を開始するには、監視対象ビューのHTMLにBrowserエージェントを追加する必要があります。Browserエージェントは、アプリケーション/サイトのパフォーマンスを監視し、そのデータをNew Relicに送信する、JavaScriptコードのスニペットです。そのコードをサイトに手動で追加するか、APMエージェントを使用してそのコードを注入できます。
開始する前に
開始する前に、お使いのブラウザアプリが当社の互換性要件を満たしているかご確認ください。
当社のAPIを使用して、プログラムによるアプリケーションのモニタリングをご希望ですか?NerdGraphによるブラウザモニタリングを参照してください。
エージェントのインストール
Browserエージェントをインストールするには:one.newrelic.com > Add data > Browser and mobile > Browser monitoringに移動し、説明に従います。
インストールプロセスについてご質問がある場合は、インストール方法を参照してください。
New Relicでのデータ検索
Browserエージェントのインストールが完了したら、数分待って、ブラウザモニタリングUIでデータを検索します。
15分以上経ってもデータが表示されない場合は、トラブルシューティングを参照してください。
次のステップ
次の手順の概要:
- 概要ページでアプリのデータを表示します。
- Browserエージェントのインストゥルメントが完了したので、ウェブサイトの改善チュートリアルでデータを詳しく見てみましょう。
- ブラウザモニタリングのベストプラクティスガイドで、ブラウザモニタリング体験を最適化する方法を説明します。
インストール方法
Browserエージェントをウェブページに追加するには、次の2つのデプロイメント方法があります。
- APM + ブラウザモニタリング:当社のAPMエージェントのいずれかを使用して、ブラウザモニタリングを自動インストゥルメントする
- ブラウザモニタリングのみ:BrowserエージェントをJavaScriptスニペットとしてフロントエンドHTMLに手動で追加する
以下に、この2つの方法に関するガイダンスをご紹介します。
APM + ブラウザモニタリング
APM(アプリケーションパフォーマンス監視)エージェントを使用してブラウザアプリのバックエンドを監視している場合は、この方法を使用することをお勧めします。APMエージェントは、ウェブサイトのすべてのページにBrowserエージェントを自動的にデプロイし、APMエージェントを再起動するたびに最新バージョンのBrowserエージェントを自動取得するため、SPA以外のアプリにはこのオプションが最適です。
APMエージェントの動作をカスタマイズする場合は、APMエージェントAPIを使用できます。以下がそのドキュメントです。
ブラウザモニタリングのみ
APMエージェントが自動インジェクションに対応していない場合(Node.jsや一部のJavaアプリに該当)など、何らかの理由でAPMを使用できない場合に、この方法を使用します。この方法を使用すると、インストールプロセスの最後にUIによってカスタマイズされたJavaScriptスニペットを受け取り、それをサイトで監視対象ページのHTMLに追加します。
ページのHTML <head>
タグ内にJavaScriptスニペットを貼り付けます。通常、headタグはアプリのすべてのページに読み込まれるサードパーティのスクリプト、フォントなどの要素を扱うので、1つの場所に貼り付けるだけで済みます。これを<head>
のできるだけ先頭近く、ただし、位置に依存するMETAタグ(X-UA-Compatibleやcharsetなど)の後に貼り付けてください。スニペットの配置について詳しくは、JavaScriptの配置要件を参照してください。
あるいは、インラインスクリプトパスを強く推奨しますが、srcスクリプトを使用して、async
またはdefer
の方法でエージェントを挿入することもできます。注意事項と詳細については、以下に進んでください。
監視ブラウザ監視の遅延
注意
インスタンス化が遅れると、エージェントが完全にロードされて初期化されるまでの情報が失われます。これらのスクリプトの実行順序により、ページビューの開始時からインストゥルメンテーションのデータがいくらか失われます。
パフォーマンスやその他の理由により、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) => { if (evt.detail.loaded) { // you can start using newrelic.interaction(), etc. now }})
<InstallFeedback />