New Relic Browserエージェントを使用したブラウザ拡張機能ViewのRUM観測

New Relic Browserエージェントは、ウェブアプリケーションやサイトのパフォーマンス、エラーやユーザー体験を監視するのに役立ちます。ページの読み込み時間、Ajaxリクエスト、JavaScriptのエラー、カスタムイベントのデータを収集し、New Relicに送信し解析、可視化します。

ところで、ブラウザ拡張機能でレンダリングするビューも従来のウェブページと同じ仕組みで動作することはご存知でしたか？

New Relic Browserエージェントを利用すれば、ウェブ拡張によってレンダリングされたView内のリアルユーザーモニタリング（RUM）データを幅広く観察することもできます。

ポップアップ、サイドバー、オプションページなどのブラウザ拡張のViewでNew Relicブラウザエージェントを使用したい場合適切に設定する必要があります。以下は、その方法についてのガイドです。

Browserエージェント(NPM Package)のインストール

最初のステップは、Browser エージェントをウェブ拡張プロジェクトにインストールすることです。本記事の例では、次のコマンドを実行して、Browser エージェントのNPMパッケージを利用しています。

npm install @newrelic/browser-agent –save

これにより、Browserエージェントがpackage.jsonファイルに依存関係として追加され、node_modulesフォルダーにダウンロードされます。

NPMライブラリを利用すると、アプリのビルド結果にエージェントコードが直接含まれるため、ブラウザ拡張機能のコンテンツセキュリティポリシー（CSP）ルールの設定を簡素化できます。

NPMの代わりにBrowser Agentのコードスニペットをインラインスクリプトとしてコピー、拡張機能Viewに貼り付けてエージェントを実装したい場合は、拡張機能がNew Relicのコンテンツ配信ネットワーク（CDN）からの外部リソースのロードを許可していることを確認する必要があります。

拡張機能ビューでBrowserエージェントを読み込む

Browserエージェントを利用しRUMの計装を行うにはView内で実行されるコードでBrowserエージェントを含めて初期化する必要があります。そのために、WebViewを定義するコードの最上位にエージェントを追加します。この例では、エージェントが追加され、Reactベースのウェブ拡張機能Viewの最上位レベルに初期化されることを示しています。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';
// コピー＆ペーストしたNR1 UIのJavaScriptスニペットの値を使用して設定にデータを入力。

const options = {
   Init:{ … },
loader_config: { … }
Info: { … }
}
// エージェントローダーコードを、インスタンス化時にすぐに実行する
const browserAgent = new BrowserAgent(options)
// エージェントインスタンスをReactアプリケーションに渡し、必要に応じて他のコンポーネントがアクセスできるようにする
ReactDOM.render(
  <App 
    browserAgent={browserAgent} 
  />, 
  document.getElementById('root')
);

エージェントがインストールされ、ウェブ拡張機能ビューで実行されると、通常のウェブページと同様にRUMデータを検出することができます。ブラウザエージェントの動作を自分の好みに設定するには、詳細情報についてはNPMのreadmeをご覧ください。

これらの手順に従うことで、New Relic BrowserエージェントをChrome拡張機能Viewに追加し、拡張機能Viewのパフォーマンスと実際のユーザーエクスペリエンスが観測できます。
エージェントが収集したデータはNew Relicアカウントのダッシュボードで閲覧でき、拡張機能の最適化とトラブルシューティングに利用できます。
今すぐブラウザエージェントをインストールして、拡張機能が顧客体験に与える影響を理解し始めましょう。