ブラウザーモニタリングのインストルメンテーション
ブラウザーモニタリングのインストルメンテーション

ブラウザーモニタリングのインストルメンテーション

リアルユーザーモニタリング(RUM)とも呼ばれる標準のページ読み込みのタイミングを求めるために、New Relicは全てのWebページをロードするのにかかる全時間を測定します。ページ読み込み後も監視を継続すると、ページ内のAJAXコールやJavaScriptエラー、その他のイベントやインタラクションの詳細が分かります。

ブラウザーモニタリングはページを作成するときにNew Relic agentを利用してJavaScriptをページに動的に埋め込めます。その目的はより詳細なバックエンドタイミングの情報を収集することです。また、New Relic Browserはシングルページアプリケーション(SPA)アーキテクチャを利用してアプリを監視できます。SPAモニタリングについてもっと詳しく知りたい人はこちら

計測

これらの機能を利用できるかどうかはサブスクリプションレベルに依存します。

New Relic Browserはデータを収集するためにWebページにペーストまたは埋め込まれたJavaScript要素を利用します。JavaScriptは通常、ページのHEADの部分に記載され、詳細設定やブラウザー環境のインストルメンテーションに不可欠な機能を備えています。ページのロードが完了すると、CDNサーバーから追加のスクリプトがダウンロードされます。追加でダウンロードされたスクリプトは収集したデータを処理し、bam.nr-data.netを介してNew Relicにレポートを返します。こうしてNew Relicアカウントでデータを閲覧できます。
このスクリプト要素は自動的に埋め込まれるか、またはパックエンドアプリケーションにインストールされているAPM agentによりNew Relic agent APIを介して埋め込まれるか、またはコピー&ペーストにより手動で挿入されます。APIコール、コピー&ペースト、いずれの方法でもスクリプト要素が挿入される時間や場所を制御できます。

New Relic JavaScriptは以下の方法でページ読み込みのタイミングの情報を収集します。

  • Navigation Timing Specification APIを実装しているブラウザーでは、ページ読み込みのタイミングの情報はブラウザーから読み出され、ブラウザーエージェントによりNew Relicにレポートされます。
  • Navigation Timing Specification APIを実装していないブラウザーでは、New Relicはタイミング情報を収集するためにNREUMのクッキーやブラウザーエージェントに依存しています。
  • AJAXのタイミングのデータを収集するためのXMLHttpRequestオブジェクトのインストルメンテーション
  • キャッチされなかったJavaScriptエラーを収集するためのJavaScript関数のインストルメンテーション
  • Resource Timing APIを実装しているブラウザーでは、ブラウザーエージェントがセッショントレースの詳細をブラウザーから読み出し、New Relicにレポートする。
  • New RelicがSPAモニタリングを行うにはNavigation Timing Specification APIとaddEventListener APIが必要です。SPAとの対応や要件を参照してください。

JavaScript配置の要件

JavaScriptライブラリではJavaScriptをインラインのHEADに埋め込むことは珍しく、サードパーティスクリプトを通常埋め込む方法ではありません。ページ読み込みのパフォーマンスに影響を与えることなくNew Relic Browserで正確な情報が閲覧できるように、New RelicではJavaScriptをHEADに埋め込みます。

埋め込まれたブラウザーJavaScript要素は、JavaScriptエラーまたはコールバックタイミングについての情報を記録するために、ブラウザーに組み込まれたAPIをたくさんラップします。以下の理由でコード要素を通常とは異なる配置にする必要があります。

  • インラインのHEADに配置すると、確実にインストルメンテーションのコードが先にロードされ、その後に他の全てのスクリプトがロードされますので、他のライブラリが登録されてからラップが開始されます。
  • コードをインラインに配置することで参照された外部のスクリプトによって引き起こされるネットワークラウンドトリップを回避できます。

データ伝送

ここでは、Webページのデータ伝送方法についてまとめてあります。

データ伝送 頻度
httpsでエージェントスクリプトを取得する 新しいページのロードごと
httpsでページ読み込みのタイミングデータを送信する 新しいページのロードごと
httpsでAJAXやJavaScriptエラーデータを送信する アクティビティがある場合に1分ごと
httpsでセッショントレースデータを送信する アクティビティがあり、セッショントレースが起きている場合に10秒ごと
httpsでSPAデータを送信する インタラクションの最後で
New RelicにはSHA256ハッシュ関数のサポートが必要です。古いOSではサポートされていない場合があります。エンドユーザーがSHA256を利用できない場合、ブラウザーエージェントはNew Relicに接続できず、データが送信されません。

関連情報

追加のドキュメンテーションリソースは次のとおりです。

  • ページ読み込みのタイミングプロセス(タイムセグメントや色、アプリサーバーリクエストとページ読み込みのタイミングの違い、外れ値などを含めた概要)
  • Navigation timing API(APIが利用された場合と利用されなかった場合に起こること)
  • ブラウザー設定(エージェントインストルメンテーション)(各New Relic agentのページ読み込みのタイミング設定手順の相互参照)
New RelicのエンジニアがNew Relic Browserの開発にあたって現実世界でどのようにページ読み込みのタイミングを利用してアプリのパフォーマンスを向上させたかを知りたい人はこのブログ投稿を参照してください。』

New RelicのオンラインテクニカルコミュニティでBrowserモニタリングについて議論しましょう!トラブルシューティングや質問をしたり、JavaScriptエラーレポートAJAXタイミングの詳細を話し合うことができます。