[ハンズオン]New Relic Browserを使用して Web サイトをトラブルシューティングする①

# TL;DR
本記事では、[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)で紹介しているサンプルアプリケーションをセットアップする手順を紹介いたします！以下の様な方々向けにオススメのハンズオンになっています！！
- サインアップしたけど、試すアプリケーションやシステムがなくてもすぐに試すことができる
- New Relic Browser エージェントが取得するデータを確認することで、**ユーザー体験の把握の方法を学べる**

ハンズオンを通じて、**オブザーバビリティの世界を体験しましょう！!**

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

# ハンズオンについて
ハンズオンの流れと環境要件についてご紹介です。
本記事ではサンプルアプリケーションをセットアップして、New Relic Browser エージェントをインストールするまでのステップをご案内します。

※この記事は以下の内容を元にしております。この記事以外のハンズオンも記載されていますのでご参考にしてください。

https://developer.newrelic.com/collect-data/monitor-your-application/

## ハンズオンの流れ
- React デモアプリケーションを起動
- New Relic Browser エージェントをインストール
- フロントエンドエラーのトラブルシューティングを体験
- フロントエンドのパフォーマンス劣化のトラブルシューティングを体験

## ハンズオンの環境要件
- New Relic アカウント（無料でアカウントでOK!)
- git
- node
- python3
- pip3
- Google Chrome

New Relicのアカウントをお持ちでない方は、無料でアカウントを開設しましょう！クレジットカードの登録不要で、フリープランのサインアップフォームに氏名などの必要事項を入力するだけですぐに利用開始できます。早速アクセスして登録してみましょう。

https://newrelic.com/jp/sign-up-japan

:::note info
[これからはじめるNew Relicライフ！ 無料でアカウントを開設しよう！](https://newrelic.com/jp/blog/how-to-relic/create-new-account)
:::

# アプリケーションのセットアップ
まずは、サンプルアプリケーションのセットアップを実施しましょう！
1. サンプルアプリケーションを作業端末にクローンします。
```shell
git clone https://github.com/newrelic-experimental/relicstaurants.git
```
2.アプリケーションのルートディレクトリに移動し、Lab ディレクトリに切り替えます。
```bash
cd relicstaurants
git switch browser-pro-lab-material
```
3.依存関係をインストールします。
``` bash
npm install
npm run build
```
4.アプリケーションを起動します。
``` bash
npm run newstart
```

http://localhost:3000 にブラウザでアクセスして、「Relicsaurants」の画面が表示されることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/03438fa9-c6bb-0e59-4d41-346e573c7b08.png)

5.アプリケーションを実行しているターミナルとは別ウィンドでターミナルを起動し、負荷ツールの実行を試します。
``` bash
cd relicstaurants/simulator
git switch browser-pro-lab-material

pip3 install -r requirements.txt

# requirements.txtに定義されてないがChromeで自動テストするために必要なseleniumとwebdriver_managerをインストールする
pip3 install selenium
pip3 install webdriver_manager

python3 simulator.py
```

Chromeが自動で立ち上がり、自動テストが動くことを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/60b3c919-2d25-b406-a99d-b04d093efb55.png)

自動テストが動いていることの確認がとれたら、アプリケーションとシミュレータを実行しているターミナル ウィンドウで、 ```<CTRL-C>``` を押して、アプリケーションを停止します。

# New Relic ブラウザエージェントをインストール
1. [New Relic](https://one.newrelic.com/) にログインします
2. 左上の「Add Data」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/7da0c502-6a89-08fb-fbd1-34f8fad204a0.png" width="50%">

3.[Browser monitoring] を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/bd687ae7-8c3d-749f-2b58-fca5ffc76b49.png" width="60%">

4.[Place a JavaScript snippet in frontend code] を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/7e35572b-eac7-f496-6a29-e44dc3f0b7ba.png" width="80%">
5.New Relicに登録するアプリケーション名(例: Relicsaurants)を入力して、[Continue]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/218ec96c-6ce6-01d2-23c8-ed0045e6fe04.png" width="60%">
6.デフォルトの設定で[Continue]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/dec8b809-38b5-8f30-1e6a-9fc26ff64aca.png" width="60%">
7.New Relic Browser エージェントによる監視を有効にするJavaScript コード スニペットが生成されるので、クリップボードにコピーします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/2fdcb862-27cd-f0d4-987d-8430d740a003.png" width="80%">
8.アプリの public/index.html ファイルで、コピーした JavaScript スニペットを <head>内の```<!-- Replace these lines with your browser monitoring code snippet -->```の箇所に貼り付けます。
```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap"
    rel="stylesheet">
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <title>Relicstaurants</title>
    <!--Replace these lines with your 
      browser monitoring code snippet -->
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>
```
９．アプリケーションを再度起動します。
```bash
npm run build
npm run newstart
```
10.負荷ツールを再実行します。
```bash
python3 simulator.py
```
11.[see your data]をクリックして、Browserにデータが入っていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/f8308555-5e5c-683b-a712-db9fe407560d.png" width="80%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/1c6a9bc2-8477-c758-a9ae-b1d9b4c3b5eb.png" width="９０%">

セットアップ作業は以上になります！！
お疲れ様でした。次回はJavaScriptエラーとパフォーマンス劣化を分析してみます！！

<strong>いざ、オブザーバビリティの世界へ！！</strong>

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::
:::note info
[New Relic株式会社のQiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::