Browserエージェントをインストールしてみよう！（スニペット編）

New RelicのBrowserエージェントを導入することで、通常では把握することができないエンドユーザーのブラウザ上での体験を把握して、アプリケーションの改善に繋げることができます。**今回はBrowserエージェントのスニペットを作成してHTMLヘッダーに組み込む導入方法**を紹介します！

**New Relic Browserの4つのインストール方法の概要**については以下の記事を参照ください。

https://qiita.com/T_OMORI/items/c23c739bf414ad91c857

**APMからブラウザエージェントをインジェクトする方法は別記事**を作成してご紹介したいと思います。

# :one: 事前準備
本記事では[PetClinic](https://github.com/spring-projects/spring-petclinic)というJavaで作られているサンプルアプリケーションにNew Relicの**Browserエージェントをスニペット形式で導入**します。
実行環境として**Amazon Linux 2023**と**Docker**の導入方法を紹介しているので、お好きな環境で試してみてください。

New Relicのアカウントが無い方は下記を参考にアカウントを作成ください。

https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa

## 事前準備（Amazon linux 2023の場合）
Amazon linux 2023にインストールする場合の手順を紹介します。まずは、Javaとgitをインストールします。
```bash
sudo yum install java git
```
続いて、PetClinicをCloneします。
```bash
git clone https://github.com/spring-projects/spring-petclinic.git
```
PetClinicをビルドして起動確認を行います。
```bash
cd spring-petclinic
./mvnw package
```
```bash
java -jar target/*.jar
```
ブラウザでアクセスできることを確認します。
※PetClinicはデフォルト設定ではTCP:8080でListenします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/31939354-35bd-b512-4b0f-19c28b457833.png)

起動確認できたらCtrl + Cで停止します。

## 事前準備（Dockerの場合）
Docker用のPetClinicのリポジトリを実行環境にCloneします。
```bash
git clone https://github.com/dockersamples/spring-petclinic-docker.git
```
Docker ComposeでPetClinicを起動します。
```bash
cd spring-petclinic
docker compose up -d
```
Dockerの場合もデフォルトはTCP:8080でListenするので、```http://localhost:8080/```でブラウザでアクセスできることを確認します。

# :two: Browserエージェントを導入
それではBrowserエージェントを導入しましょう。

## JavaScriptのスニペットを生成（共通）

New Relicの管理画面にログインし、「＋ Integrations & Agens」を選択->「browser monitoring」で検索かけて、表示されたアイコンをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/04fe6f06-89ae-fa0d-4571-9cf41569bafd.png" width="80%">

今回はスニペットを作成してHTMLヘッダーに組み込むので、**Place a JavaScript snippet in frontend code**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/5d6f69ac-efdb-578f-d641-15fe65044de2.png)

New Relicの画面上で表示されるアプリケーションの名称を設定します。
例ではpetclinic-browserとしています。
名称を入れたら[Save and continue]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/fe7643e7-0a3c-5f6a-8224-543271c181f8.png)

Browserエージェントの設定が聞かれます。
今回はデフォルト設定のまま進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/f409093f-5265-fa9e-2ac0-6ee38210d325.png)

BrowserエージェントのJavaScriptでできたスニペットが作成されるので、[Copy to clipboard]でコピーしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/16f9c2c6-d990-9beb-7214-0a95edd25021.png)



## ソースコードの修正（共通）

### layout.htmlのHTMLヘッダーにJavaScriptスニペットを追加

JavaScriptスニペットを使う場合は、**JavaScriptスニペットをHTMLヘッダーに追記するのが基本** となります。spring-petclinicでは、**layout.htmlにヘッダーのテンプレートがあるので、こちらのHTMLヘッダーにスニペットを貼り付けます**。

```html:src/main/resources/templates/fragments/layout.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の詳細は下記を参照ください。

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#inlining

追加したJavaScriptスニペットの**scriptタブにth:inline="none"** を追記します。

```html:src/main/resources/templates/fragments/layout.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" 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に追記**します。

```xml:src/checkstyle/nohttp-checkstyle-validation.xml
...
	<module name="io.spring.nohttp.checkstyle.check.NoHttpCheck">
		<property name="allowlist" value="http://custom.transaction"/>
	</module>
...
```

# :three: 動作確認

設定が完了したのでビルドしてAmazon Linux 2023とDockerで動作させてみます。

## 動作確認（Amazon Linux 2023の場合）

PetClinicをビルドして起動確認を行います。
```bash
cd spring-petclinic
./mvnw clean package
```
```bash
java -jar target/*.jar
```

ブラウザでpetclinicにアクセスして複数のページを開きます。これによってテレメトリデータがNew Relicに送付されます。




## 動作確認（Dockerの場合）


Docker ComposeでPetClinicを起動します。
```bash
cd spring-petclinic
docker compose build --no-cache
docker compose up -d
```
ブラウザで```http://localhost:8080/```でアクセスして複数のページを開きます。これによってテレメトリデータがNew Relicに送付されます。

## 動作確認（共通）

New Relicの画面を開いてBrowser > petclinic-browserを開いてデータが入っていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/9da13c41-b1bf-e6f9-72c5-120ed4ab84b3.png)


Browserエージェントの導入とデータ確認までを紹介させていただきました。
取り込んだデータの分析方法はまた別の記事でご紹介できればと思います。

# その他
New Relicでは、**新しい機能やその活用方法**について、QiitaやXで発信しています！
**無料でアカウント作成**も可能なのでぜひお試しください！

:::note info
New Relic株式会社の[X(旧Twitter)](https://x.com/NewRelicJapan) や [Qiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::