ブラウザ監視のインストゥルメンテーション

リアルユーザーモニタリング(RUM)とも呼ばれる標準的なページ読み込みタイミングに関して、New RelicはWebページ全体の総合的な読み込み時間を測定します。ページ読み込み後の追加の監視によって、ページ内AJAXコール、JavaScriptエラー、そしてその他のベントやインタラクションの詳細を得ることができます。

ブラウザ監視では、New Relicエージェントを活用して、ページが出来上がるのに合わせJavaScriptを動的にインジェクトすることで、より詳細なバックエンドのタイミング情報を収集することができます。New Relic Browserは、シングルページアプリケーション(SPA)アーキテクチャによってアプリを監視することもできます。

ブラウザデータを収集するインストゥルメンテーション

これらの一部の機能を利用できるかは、サブスクリプションレベルによります。

データを収集するにあたりNew Relic Browserは、通常ページのHEADの一部としてWebページに貼付けもしくは挿入されたJavaScript要素を使用します。これには設定情報ならびに重要なブラウザ環境の計測が含まれます。ページの読み込みが終了すると、CDNサーバーから追加のスクリプトがダウンロードされます。この追加スクリプトが、収集したデータを処理しbam.nr-data.net経由でNew Relicにレポートすることで、ご利用のNew Relicアカウントでデータを確認できます。

スクリプト要素は、自動的もしくはバックエンドアプリケーションにインストールされたAPMエージェントによるNew RelicエージェントAPI経由でインジェクトするか、コピー/ペーストで手動で挿入できます。APIコールとコピー/ペーストのいずれの方法でも、スクリプト要素をいつ、どこで挿入するか管理できます。

New Relic JavaScriptは、以下のメソッドでページ読み込みタイミング情報を収集します:

メソッド ページ読み込みタイミング情報の収集
Navigation Timing Specification APIを実装したブラウザ

Navigation Timing Specification APIを実装したブラウザの場合、ページ読み込みタイミング情報はブラウザから読み込まれ、ブラウザエージェントを介してNew Relicにレポートされます。パフォーマンスタイミングオブジェクトから適正値を読み取ることで、タイミング情報をキャプチャします。

  • ナビゲーション開始: navigationStart
  • ファーストバイト: responseStart
  • DOM の準備完了: DOMContentLoadedEventEnd
  • ページ準備完了: loadEventEnd
Navigation Timing Specification APIを実装していないブラウザ

Navigation Timing Specification APIを実装していないブラウザの場合、New RelicはNREUM cookieとブラウザエージェントを頼りにタイミング情報を収集します。

追加のインストゥルメンテーション

New Relic Browserは以下も使用します:

Resource Timing API

Resource Timing APIを実装するブラウザの場合、New RelicのBrowserエージェントがセッショントレース詳細の読み込みとレポートを行います。

シングルページアプリケーション(SPA)の監視

SPA監視を行うにあたって、New RelicはNavigation Timing Specification APIとaddEventListener APIが必要となります。

JavaScriptの配置要件

HEADにJavaScriptをインラインで挿入することはJavaScriptライブラリにおいて珍しい要件であり、サードパーティ―スクリプトの一般的な含まれ方とは異なります。New Relicでは、New Relic Browserがページ読み込みパフォーマンスに支障をきたすことなく正確な情報を提供できるよう、この要件を設けています。

インジェクトされたブラウザのJavaScript要素は、ブラウザの多数の内蔵APIをラップしてJavaScriptエラーやコールバックタイミングに関する情報を記録します。コード要素の普通とは異なる配置は、以下の理由から必要となります:

  • インラインのHEAD配置によって、インストゥルメンテーションコードが他のスクリプトより前に読み込まれるため、他のライブラリ登録時にラッピングを行うことができます。
  • また、インラインのコード配置は、外部参照スクリプトによって引き起こされるネットワークラウンドトリップを排除できます。

データ転送

httpsおよびhttp Webページの双方に関して、New Relicはhttps経由でデータ転送を行います。これは、Webページを行き来するデータ転送がいつ行われるかをまとめたものです。

New Relicでは、ハッシュ関数であるSHA256のサポートが必要となります。一部の古いオペレーティングシステムは、これに対応していません。エンドユーザーがSHA256を持っていない場合、BrowserエージェントはNew Relicに接続せず、データは送信されません。

データ転送 頻度
エージェントスクリプトをフェッチする https経由のページ読み込み後に一度
ページ読み込みタイミングデータを送信する https経由のページ読み込み後に一度
AJAXおよびJavaScriptエラーデータを送信する アクティビティがある場合はhttps経由で1分に1回
セッショントレースデータを送信する アクティビティがあり、セッショントレースが発生している場合はhttps経由で10秒ごと
SPAデータを送信する インタラクションの最後にhttps経由で

その他のヘルプ

New Relicのエンジニアがページ読み込みタイミングを利用して、New Relic Browserの開発時に当社のアプリケーションパフォーマンスを改善させた方法に関しては、こちらのブログ記事をご覧ください。

推奨する詳細情報: