New RelicのBrowserエージェントを導入することで、通常では把握することができないエンドユーザーのブラウザ上での体験を把握して、アプリケーションの改善に繋げることができます。今回はBrowserエージェントのスニペットを作成してHTMLヘッダーに組み込む導入方法を紹介します！
New Relic Browserの4つのインストール方法の概要については以下の記事を参照ください。
APMからブラウザエージェントをインジェクトする方法は別記事を作成してご紹介したいと思います。
事前準備
本記事ではPetClinicというJavaで作られているサンプルアプリケーションにNew RelicのBrowserエージェントをスニペット形式で導入します。
実行環境としてAmazon Linux 2023とDockerの導入方法を紹介しているので、お好きな環境で試してみてください。
New Relicのアカウントが無い方は下記を参考にアカウントを作成ください。
事前準備（Amazon linux 2023の場合）
Amazon linux 2023にインストールする場合の手順を紹介します。まずは、Javaとgitをインストールします。
sudo yum install java git
続いて、PetClinicをCloneします。
git clone https://github.com/spring-projects/spring-petclinic.git
PetClinicをビルドして起動確認を行います。
cd spring-petclinic
./mvnw package
java -jar target/*.jar
ブラウザでアクセスできることを確認します。
※PetClinicはデフォルト設定ではTCP:8080でListenします。
起動確認できたらCtrl + Cで停止します。
事前準備（Dockerの場合）
Docker用のPetClinicのリポジトリを実行環境にCloneします。
git clone https://github.com/dockersamples/spring-petclinic-docker.git
Docker ComposeでPetClinicを起動します。
cd spring-petclinic
docker compose up -d
Dockerの場合もデフォルトはTCP:8080でListenするので、http://localhost:8080/でブラウザでアクセスできることを確認します。
Browserエージェントを導入
それではBrowserエージェントを導入しましょう。
JavaScriptのスニペットを生成（共通）
New Relicの管理画面にログインし、「＋ Integrations & Agens」を選択->「browser monitoring」で検索かけて、表示されたアイコンをクリックします。
今回はスニペットを作成してHTMLヘッダーに組み込むので、Place a JavaScript snippet in frontend codeを選択します。
New Relicの画面上で表示されるアプリケーションの名称を設定します。
例ではpetclinic-browserとしています。
名称を入れたら[Save and continue]をクリックします。
Browserエージェントの設定が聞かれます。
今回はデフォルト設定のまま進めます。
BrowserエージェントのJavaScriptでできたスニペットが作成されるので、[Copy to clipboard]でコピーしておきます。
ソースコードの修正（共通）
layout.htmlのHTMLヘッダーにJavaScriptスニペットを追加
JavaScriptスニペットを使う場合は、JavaScriptスニペットをHTMLヘッダーに追記するのが基本 となります。spring-petclinicでは、layout.htmlにヘッダーのテンプレートがあるので、こちらのHTMLヘッダーにスニペットを貼り付けます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:["bam.nr-data.net"]}};
;NREUM.loader_config={accountID:
...
...
...
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
ただし、spring-petclinicはThymeleafを使用しているのですが、そのままではJavaScriptスニペット内の[(...)]をThymeleafのinlined expressionsと判断してビルド時に構文エラーが出てしまうので、今回の例ではJavaScriptスニペットがinlineed expressionsではないことを明示する様に修正します。Thymeleafのinlined expressionsの詳細は下記を参照ください。
追加したJavaScriptスニペットのscriptタブにth:inline="none" を追記します。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" th:inline="none">
;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:["bam.nr-data.net"]}};
;NREUM.loader_config={accountID:
...
...
...
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
nohttp-checkstyle-validationの除外URLを追加
また、このままだとビルド時にpom.xmlのnohttp-checkstyle-validationでhttpアクセスしようとしていると判断されてエラーが発生してしまうので、JavaScriptスニペットに記載されているhttp://custom.transactionをチェックの除外とするURLとしてnohttp-checkstyle.xmlに追記します。
...
<module name="io.spring.nohttp.checkstyle.check.NoHttpCheck">
<property name="allowlist" value="http://custom.transaction"/>
</module>
...
動作確認
設定が完了したのでビルドしてAmazon Linux 2023とDockerで動作させてみます。
動作確認（Amazon Linux 2023の場合）
PetClinicをビルドして起動確認を行います。
cd spring-petclinic
./mvnw clean package
java -jar target/*.jar
ブラウザでpetclinicにアクセスして複数のページを開きます。これによってテレメトリデータがNew Relicに送付されます。
動作確認（Dockerの場合）
Docker ComposeでPetClinicを起動します。
cd spring-petclinic
docker compose build --no-cache
docker compose up -d
ブラウザでhttp://localhost:8080/でアクセスして複数のページを開きます。これによってテレメトリデータがNew Relicに送付されます。
動作確認（共通）
New Relicの画面を開いてBrowser > petclinic-browserを開いてデータが入っていることを確認します。
Browserエージェントの導入とデータ確認までを紹介させていただきました。
取り込んだデータの分析方法はまた別の記事でご紹介できればと思います。
その他
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のX(旧Twitter) や Qiita OrganizationOrganizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！