システムが複雑になって、サーバのキャパシティだけでは原因の判断できないような事象に遭遇したことがある人は多いんじゃないかな？そんな時には、New Relicのブラウザエージェントを是非試してみて。フロントエンドアプリに少しだけ手を加えるだけで、新しい気づきを得ることができるようになるよ。まずはどんなものかを実際に体感してもらいたいから、サンプルのフロントエンドアプリを使って、導入が簡単なことや、どんな情報を観られるかの触りを理解してもらうための手順を用意したよ。まずはやってみて!!!

はじめに

前回のQiita記事としてnpmコマンドでフロントエンドアプリを計測するエージェントを導入する手順をまとめてみたのだけど、昔からの知人に「インフラしか分からん民が、背伸びしてReactとかいうんじゃないよ」(涙)とありがたいお言葉を頂いたよ。npmコマンドは、フロントエンドアプリのコードを直接ガリガリ編集する人には向いているけど、buildされたものだけにアクセスできる場合には、別の方法が必要だよね。そんな場合には、昔ながらスニペットのコピー＆ペーストをやってみて。

一方で、そのフロントエンドアプリを用意するのは面倒なんだけど…とのコメントも。大したものではないけど、簡単に試せる、おふざけフロントエンドアプリを用意したから、それを使ってやってみて!!

さっそく問題

New Relicのブラウザエージェントをコピー＆ペーストで導入したい。
サクッと導入手順を確認しつつ、実際の挙動をみてみたい。

用意して欲しいもの

無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！

New Relicの環境

もし持っていない場合は、上記のQiita記事を参考にFreeの環境を取得してね
業務で既にNew Relicを使っているなら、その時に使っている業務用のメールアドレス以外のものでFreeの環境を取得してね

New Relicが提供しているBrowser monitoringという機能が提供するBrowserエージェントを利用するよ

Webサーバが起動している環境

テスト用フロントエンドアプリをWebブラウザからアクセスするために使うよ。
今回は、UbuntuサーバにNGINXを用意した環境で試してみたよ。サーバが用意できない場合は、ローカル環境で試しても全く問題がないよ。

NGINXやApacheが稼働している環境を利用するよ
コンテナで環境を用意してもいいよね

さぁやってみよう

まずはフロントエンドアプリをWebサーバ経由でみえるようにしよう

テスト用フロントエンドアプリをダウンロードしよう

まずはフロントエンドアプリの準備だよ。下のサイトにアクセスしてね。

上記のファイルをgit cloneまたはダウンロードしてね。必要なものはasssetsフォルダ(と、その中身)とicons.svg, index.html, favicon.svgだよ。
これらのオブジェクトをNGINXが稼働しているサーバの任意のパス(例: /var/www/html/soba)にコピーしてね。

NGINXを設定しよう

NGINXの設定ファイルを編集するよ
ubuntuの場合は、/etc/nginx/sites-available/defaultになるよ

NGINXの設定ファイルのdefault serverセクション

server {
    listen 80;
    listen [::]:80;

    index index.html index.htm index.nginx-debian.html;
    
    # サーバーのIPアドレスまたはドメイン名
    server_name your-server-ip_or_domain;

    # Reactのビルドファイルを置いた場所
    root /var/www/html/soba;

    # 最初に読み込むファイル
    index index.html;

    location / {
        # 【超重要】リクエストされたファイルがなければ index.html にルーティングする設定
        try_files $uri $uri/ /index.html;
    }
}

手元のPCで試す場合には、NGINXのdockerコンテナを用いるのが一番シンプルだけど、今回はローカルにNGINXを用意して試すパターンを記載しているよ
Dockerコンテナの場合でも、NGINXの設定は同じだよ

上記の設定ファイル内のrootディレクティブで指定したパスが、URLのルート(/)にアクセスした際に参照されるパスになるよ
例えば、 https://localhost/ ==> /var/www/html/sobaディレクトリ内を参照するよ

上記の設定を変更したら、

NGINXの設定内容のテスト(エラーなどの表示がなければ、次の再起動を実施するよ)

sudo nginx -t

NGINXの再起度により、新しい設定を反映させるよ

sudo systemctl restart nginx

キレてる？？？

早速、NGINX上から配信しているフロントエンドアプリにアクセスしてね
UIでちゃんと表記していないのだけど(反省...)、マウスの左ボタンを押しながら、[ココを切る！]のエリアを上下に、行ったり来たりしてね。
うまく動くと、下の図の様に[ココを切る！]の左側に、スライスされたソバ(?)が大量に表示されるよ。

大したことしている訳じゃないけど、UI上の表示が変わると、何かアプリが動いた感があるよね(自己満足)

ここまで無事に辿り着いたなら、このフロントエンドアプリに、New Relicのブラウザエージェントを導入するステップをやっていくよ。

さっそくコピー＆ペーストでエージェントを導入しよう

コピー＆ペーストするスニペットを取得しよう

https://login.newrelic.com からNew Relicポータルにログインするよ
ログイン後、画面左上にある + Integrations & Agents あるいは、右にある青ボタンの + Add data をクリックして、表示されるタイル群からBrowser monitoringを選択するよ

オプション: もし複数のアカウントを持っている環境だと、導入するアカウントの選択画面が表示されるよ
実装方法を選択する画面になるから、Place a JavaScript snippet in frontend codeのタイルをクリックするよ

New Relic上で管理に使う名前を設定するよ

ブラウザエージェントのパラメータをここで設定するよ
Capture session replaysトグルスイッチを有効化するよ
Sample rate of total sessions (%)の値を10から100に変更するよ

Capture session replaysトグルスイッチを有効化するまでは多くのオプションが非表示になっているよ

フロントエンドアプリに適用するスニペットを取得するよ

表示されたスニペットを右上のCopy to clipboardボタンから取得するよ。
このコピーしたスニペットを次のセクションでフロントエンドアプリにコピー＆ペーストするよ。

New Relic上でのスニペット取得作業は以上だから、ちゃんとスニペットが確保でていれば、青ボタンのSave and continueボタンを押して、計測データが確認できる画面に進んおいてね

コピー＆ペースト!!

手元にダウンロードしてきたindex.htmlファイルに取得したスニペットを適用するよ

オリジナルのindex.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sobakiri-app</title>
    <script type="module" crossorigin src="/assets/index-DL6P0iWW.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-nqMpL4T3.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

スニペットの貼り付け位置(index.html)

<!doctype html>
<html lang="en">
  <head>
    ︙
    <title>sobakiri-app</title>
    ###########################################
    ##### ここに取得したスニペットをペーストする #####
    ###########################################
    <script type="module" crossorigin src="/assets/index-DL6P0iWW.js"></script>
    ︙
  </head>
    ︙
</html>

厳格にスニペットの位置が決まっている訳ではないけど、htmlのページを構成する様々なオブジェクトの取得状況やレンダリング状況を計測するために、

headタグ内に記載する
他のscrptタグよりも前に記載する

ことをお勧めしているよ

Webブラウザの開発者モードでnewrelicオブジェクトを確認してみてね

前回のQiitaの記事でも紹介したけど、newrelicオブジェクトを参照できるかを確認することで、期待通りブラウザエージェントの導入が行えたかを確認することができるよ。

フロントエンドアプリにアクセスする際、ブラウザのキャッシュが効いていて直ぐに設定が反映されないなどもあったので、試す際はブラウザのプライベートモードで試してみるといいよ

New Relic上でみてみよう

まずはフロントエンドアプリにアクセスして、大量のソバを切りまくってね
フロントエンドアプリにアクセスすることで、

ソバを切ることに飽きてきたら、早速、New Relicでブラウザデータをみてね
今回、特にみてもらいたいのはSession replayの部分だよ

Session replayは、New Relicにアクセス後、左のメニューからBrowserを選択して、表示される一覧からエージェント導入時に指定したアプリ名を選ぶと、上記のUIを参照できるよ

上のスクリーンショット内で緑色の線の部分は、マウスのポインタの動いた軌跡を表しているよ
一心不乱にソバを切っているのがわかるね

画像は荒いんだけど、Session replayで参照できるUI上のますすの動きをGIF動画にしてみたよ

他にも色々と機能があるから、どんどん試してみてね。

さいごに

お疲れ様でした！！すごく簡単な作業でブラウザエージェントの導入を行えたよね。インフラが得意な人程、いつもと違う観点の計測データを確認することができたんじゃないかな？サーバのキャパシティは十分あるのに、なんでユーザの満足度が低いんだろうと思ったら、そっと試してみると、思ってもみないデータが取れるかもしれないね。

もし、サーバ以外にも興味があるなら、

の無料オンデマンドトレーニングを受講するといいよ。

New Relic株式会社のQiita Organizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。