を開始するには、監視対象ビューのHTMLにBrowserエージェントを追加します。Browserエージェントは、サイトのパフォーマンスを監視し、そのデータをNew Relicに送信する、JavaScriptコードのスニペットです。
開始する前に
まだ確認していない場合は、お使いのブラウザアプリが当社の互換性要件を満たしているかご確認ください。
Browserエージェントのインストール
Browserエージェントをインストールするには、次の4つの方法があります。特定のニーズに応じて、以下を実行できます。
one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoringに移動し、指示に従って、UIでJavaScriptスニペットを生成します。
スニペットを取得したら、それを<head>
タグのできるだけ先頭近く、ただし位置に依存するMETAタグ( X-UA-Compatible
やcharset
など)の後に貼り付けます。
スニペットの配置に関する詳細については、JavaScriptの配置要件を参照してください。
(npm経由でBrowserエージェントをインストールしたい場合は、@newrelic/browser-agent
パッケージを参照してください。)
注意
インスタンス化が遅れると、エージェントが完全にロードされて初期化されるまでの情報が失われます。これらのスクリプトの実行順序により、ページビューの開始時からインストゥルメンテーションのデータがいくらか失われます。
パフォーマンスやその他の理由により、Browserエージェントの初期化をページ読み込みサイクルの開始から遅らせたい場合があります。エージェントが完全に初期化されるまで、newrelic
API は使用できません。この遅延により、ブラウザ監視UIにも不完全なデータが作成されます。
エージェントが完全に初期化されると、期待どおりに動作します。遅延は、エージェントがグローバルをラップするとき、または取得データに影響を与える他のライブラリやコードに関連するイベントをサブスクライブするときにも影響します。
次の方法でエージェントの初期化を遅らせることができます。
async
属性を持つscript-src
タグを追加します。
defer
属性を持つscript-src
タグを追加します。
動的なインポートを使用するか、ローダーコードを時系列的に遅らせて配置します。
ページのsrc
は、CDN内の有効なエージェントローダーバージョンを指す必要があります。たとえば、現在のPro+SPAエージェントリリースが常に含まれるURLはhttps://js-agent.newrelic.com/nr-loader-spa-current.min.js
です。外部のサードパーティスクリプトをロードするために、CSPは必須です。
newrelic
APIの呼び出しをいつ開始できるかを判断するには、グローバルスコープでイベントをサブスクライブします。
window.addEventListener("newrelic", (evt) => {
APMエージェントを使用すると、コードにスニペットを手動で追加することなく、ブラウザ監視をデプロイできます。エージェントを再起動すると、Browserエージェントの最新バージョンが自動的に使用されます。
APM(アプリケーションパフォーマンス監視)エージェントを使用してブラウザアプリのバックエンドを監視しており、非SPAアプリがある場合は、この方法を使用することをお勧めします。
各APMエージェントには固有の手順があります。
ブラウザをプログラムで作成したい場合は、NerdGraph、GraphQL APIを介して作成できます。
詳細については、NerdGraphチュートリアルを参照して、ブラウザスニペットを作成し、設定してください。
スニペットができたら、それをアプリの<head>
タグに追加します。
複数のウェブアプリにわたってブラウザ監視デプロイメントを自動化したい場合は、NerdGraphとBrowserエージェントnpmパッケージを使用して、アプリケーションのビルドプロセスの一部としてエージェントを設定し、デプロイすることができます。
詳細については、npmとNerdGraphを使用した複数のアプリのインストゥルメント化を参照してください。
次のステップ
Browserエージェントをインストールしたら、数分待って、ブラウザモニタリングUIでデータを検索します。
15分以上経ってもデータが表示されない場合は、ブラウザインストレーションのトラブルシューティングを参照してください。
UIにBrowserデータが表示されたら、そのデータを最大限に活用するための次の手順に従います。
このドキュメントはインストールの役に立ちましたか?