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アカウントのダッシュボードで閲覧でき、拡張機能の最適化とトラブルシューティングに利用できます。
今すぐブラウザエージェントをインストールして、拡張機能が顧客体験に与える影響を理解し始めましょう。
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.