インフラしか分からん民がフロントエンドアプリを計測するためのエージェント導入手順をまとめてみた!やってみて!!

Webページはどんどん複雑さがまして、純粋なhtmlページではなく、Reactなどを用いたケースが増えていて、アプリ内で一体何が起きているのか、ましてや千差万別なエンドユーザの環境から問題を解決するための適切な情報を得るのは簡単なことではないよね。情報取得のための技術的な手法はなんとなくわかっているけど、実際に試すための最初の一歩を踏み出すことができないということもあるよね。そんな時に読んで、試してもらえると嬉しいよ。

はじめに

『Webのページ(htmlのページ)がどんな利用状態なのかを知りたいといった時は、New Relicが提供するスクリプトをheadタグ内にcopy&pasteして...といった方法はよくわからず。Reactとか普通に使われているから、copy&pasteしてと言われても...』
よっしゃ!!それなら、もっと簡単にReactのフロントエンドアプリでもNew Relicのエージェント(Browserエージェント)を取り込んで、色々計測するための最初の一歩をまとめてみたよ。

これを契機にカリカリとオレオレフロントエンドアプリをカスタムして、インフラもアプリも触れるいけてるエンジニアを目指しちゃおう。

さっそく問題

New Relicのブラウザエージェントを試したい!!
簡単に計測対象となるページを用意して、サクッと試してみたい。

用意してほしいもの

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

New Relicの環境

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

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

npmコマンド

npmコマンドは、Node.jsをインストールすると一緒にインストールされる公式パッケージ管理ツールのことだよ。wingetコマンドやbrewコマンドを用いてNode.jsをインストールする、curlを用いてNode.jsのsetupスクリプトを取得するなどにより、npmコマンドを利用することができるようになるよ。

もしVS CodeといったIDEを利用することができれば、よりスムーズに試すことができるよ。

さぁやってみよう

まずはNew Relicに関わらず一般的な手順を実行する

コマンドラインからnpmコマンドを実行してサンプルフロントエンドアプリを作成する

• 任意の作業ディレクトリを作成し、そのディレクトリ内でnpmコマンドを実行するよ

testbrowserというディレクトリとmy-appというフロントエンドアプリを作成した例

mkdir testbrowser
cd testbrowser
npm create vite@latest my-app

上記のコマンドを実行すると、コマンドライン上で利用するフレームワークや言語を選択することができるので、今回はReactとJavaScriptを選択するよ。

Reactを選択!!

JavaScriptを選択!!

最後にYESを選択すると、あっという間にフロントエンドアプリが作成されるよ。

Webブラウザを立ち上げて http://localhost:5173 にアクセスするよ。
下の表示がされたら、成功だよ。

Count is XXXとなっている箇所をクリックすると表示される数字が大きくなることを確認してね。

参照しているWebブラウザの開発者モードで参照しているページにnewrelicオブジェクトを確認する

下の画像はChromeブラウザで試しているよ。
newrelicと入力してみたら、そんなものは定義されていないと表示がされるよ。

このタイミングで、ここでエラーが表示されるのは、正しいよ
この後、Browserエージェントを導入することで、表示がどう変化するかを確認するよ

ここまできたら、コマンドライン上で　Ctrl + c で、フロントエンドアプリの起動を停止するよ。

さっそくNew Relicのエージェントを導入する

New Relic上で、管理しやすい名前とスクリプトに追記するコードを取得する

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

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

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

• Browserエージェントパッケージをインストールするコマンドが表示されているので、そのコマンドを実行するよ
  • npmとyarnコマンドを選べるけど、今回はnpmを利用するよ

今回の例では、 my-app という名前でアプリを作成したので、作成したディレクトリ配下にmy-appというディレクトリが作成されているよ
my-appディレクトリに移動して、取得したコマンドを実行するよ

cd my-app
npm install @newrelic/browser-agent --save

エラーなどが発生せずに完了したら、次に進むよ。

コードを少し変更して、フロントエンドアプリを起動する

• New Relic上では、スクリプトに追加する内容が表示されているので、そのスニペットをコピーしたら、my-app配下のsrc/main.jsxに追加するよ

もとのスクリプトも含めてmain.jsxはこんな感じになるよ

追記後のmain.jsx

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

// Remaining import statements

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

const options = {
  "info": {
    "applicationID": XXXXXXXXXX,
    "beacon": "bam.nr-data.net",
    "errorBeacon": "bam.nr-data.net",
    "licenseKey": "NRJS-XXXXXXXXXXXXXXXXXXX",
    "sa": 1
  },
  "init": {
    "ajax": {
      "deny_list": [
        "bam.nr-data.net"
      ]
    },
    "browser_consent_mode": {
      "enabled": false
    },
    "distributed_tracing": {
      "enabled": true
    },
    "performance": {
      "capture_detail": false,
      "capture_marks": false,
      "capture_measures": true
    },
    "privacy": {
      "cookies_enabled": true
    }
  },
  "loader_config": {
    "accountID": XXXXXXX,
    "agentID": XXXXXXXXXX,
    "applicationID": XXXXXXXXXX,
    "licenseKey": "NRJS-XXXXXXXXXXXXXXXXXXX",
    "trustKey": XXXXXXX
  }
}

// The agent loader code executes immediately on instantiation.
const nrba = new BrowserAgent(options)

// Remaining code

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

設定を保存したら、ルートディレクトリ(今回の例だと、my-appディレクトリ)で、フロントエンドアプリを起動するよ。

フロントエンドアプリを起動するよ

npm run dev

正しく起動すると以下の表示になるよ(BEFOREの時とほとんど同じだね)。

次に進む前に、New Relic上で青いボタンのContinueやSee your dataボタンを押して、詳細データを確認できるページにジャンプしよう。

参照しているページの最初はError rateなどエラーに関連しているチャートとなっているけど、サンプルで作成されたアプリはエラーが発生しないくらいシンプルなものなので、少し画面を下にスクロールして、Page view load timeをみると変化がわかりやすいよ

まだページを参照していないから、何も表示されていないね

Webブラウザでnewrelicオブジェクトを確認する

• 表示されるURL(デフォルトだと http://localhost:5173 )にアクセスしよう
  • BEFOREの時と同じ表示になるよ。

• Count is XXX をクリックできることを確認してみよう
  • ヨシ!!

• Webブラウザの開発者モードでnewrelicオブジェクトを確認してみよう
  • BEFOREでは定義されていないというメッセージが表示されたけど...

この表示が出たら、正しくBrowserエージェントの設定が行われていると確認できるよ

New Relic上でチャートが表示されることを確認する

New Relicに戻って、データが表示さるかを確認してみよう。

本当ならここまででテスト利用はおしまいなんだけど、続いてBrowserエージェントの設定変更もやってみるよ。

(Optional) エージェントの設定を変更する

参照しているBrowserエージェントのUIのサブメニュー内にApplication settingsというアイテムがあるのでそれをクリックするよ

次のUIが表示されるよ。

このUI上で機能のON/OFFやパラメータを設定することができるのだけど、大事なところは、その変更が右上の緑で囲んだ部分に反映されるだけなので、その反映されたパラメータをmain.jsxに追加したスニペットのパラメータに反映させないといけないよ

試しに以下の様に変更するよ。

Session replay(トグルスイッチ): ON
Sample rate of total sessions: 100
Record initial page load(トグルスイッチ): ON

ついつい忘れがちなのが、設定を変更後、右下にヒッソリと配置されているSaveボタンを押すこと

ボタンを押すと、右上のスクリプトに変更が反映されるよ。

反映されたスクリプト内のパラメータをmain.jsxに反映させるよ

スクリプト内をよくみると、NREUM.info, NREUM.init, NREUM.loader_configの3つの変数にまとめられていることがわかるよ
例えば、NREUM.init={...}となっているので、...の部分を、main.jsxのoptions内のinitの値に反映させるようにするといいよ

この設定変更を試す中で、

• key:valueのkeyを"(ダブルクォーテーション)で囲む
• :(コロン)とkeyの間にスペースを追記する

などの記載方法で設定がうまく行かなかったので、スクリプトに更新する際は注意してね

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

optionsのパラメータをこんな感じに変更するよ

更新後のoptionsのパラメータ例抜粋

const options = {
  "info": {
    "applicationID": XXXXXXXXXX,
    "beacon": "bam.nr-data.net",
    "errorBeacon": "bam.nr-data.net",
    "licenseKey": "NRJS-XXXXXXXXXXXXXXXXXXX",
    "sa": 1
  },
  "init": {
    "session_replay": {
      "enabled": true,
      "block_selector": '',
      "mask_text_selector": '*',
      "sampling_rate": 100.0,
      "error_sampling_rate": 100.0,
      "mask_all_inputs": true,
      "collect_fonts": true,
      "inline_images": false,
      "inline_stylesheet": true,
      "fix_stylesheets": true,
      "preload": true,
      "mask_input_options": {
      }
    },
    "distributed_tracing": {
      "enabled": true
    },
    "performance": {
      "capture_measures": true
    },
    "browser_consent_mode": {
      "enabled": false
    },
    "privacy": {
      "cookies_enabled": true
    },
    "ajax": {
      "deny_list": [
        "bam.nr-data.net"
      ],
      "capture_payloads": 'none'
    },
    "api": {
      "register": {
        "enabled": true,
        "duplicate_data_to_container": false
      }
    }
  },
  "loader_config": {
    "accountID": XXXXXX,
    "agentID": XXXXXXXXX,
    "applicationID": XXXXXXXXXX,
    "licenseKey": "NRJS-XXXXXXXXXXXXXXXXXX",
    "trustKey": XXXXXXX
  }
}

もしフロントエンドアプリを停止しているなら、このコマンドで起動だよ

npm run dev

フロントエンドアプリ起動後、Webブラウザでアクセスし、再度、New RelicポータルからBrowserエージェントの情報を参照すると…AFTERで試した時は表示されていなかったSession replayのチャート部分(下の図の緑色枠内)になにやら表示されるようなったよ。

Session replay内のアイテムを選択すると、Webブラウザ上で参照した内容(マスクなどがかかった状態)や処理を再現することができるようになったよ。

簡単な手順の紹介はいったんここまでだけれど、このサンプルアプリにワザとエラーを発生させる処理やAPIを呼び出す処理などを組み込むことで、Browserエージェントを自由にテストすることができるよ。

実際に利用しているフロントエンドアプリ(検証用のものでも…)に対してBrowserエージェントをいきなり導入するのは、かなりハードルは高いけど、手元で簡単に試すことで技術的な理解を深めることができるよね。
学習も兼ねて、まずはやってみてもらえるとうれしいよ。

もしもっと多くのことを知りたくなったら、下の公式ドキュメントサイトにアクセスしてみてね。

さいごに

実際に手順を試してみたら、思った以上に簡単で便利だなと思ってもらえたんじゃないかな？
実は、New Relicを使い倒すと、フロントエンドアプリ以外も幅広くカバーしているよ。もし、興味があるなら、

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

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