AJAXページ:時間のかかっている呼び出しを見極める
AJAXページ:時間のかかっている呼び出しを見極める

AJAXページ:時間のかかっている呼び出しを見極める

New Relic BrowserのAJAX ページでは、外部のエンドポイント(HTTPまたはHTTPSのドメインなど)に対するブラウザーから出された直近のAJAXリクエストを表示します。この情報は、ウェブページの一部をアップデートするのに時間のかかっている、または失敗しているAJAXコールがある場合に、問題を見極めてユーザー体験を向上させるために役立ちます。例えば:

  • タイミングの問題時間率の合計、スループットの毎分のリクエスト(rpm)、またリクエスト毎のデータ転送率の平均値により、タイミングの問題を見極めることができます。
  • エンドポイントの問題:リクエストに関連するステータスコードは、呼び出しからの戻り値に関する情報を提供します。200以外の大きな数字のステータスコードは、AJAXエンドポイントに何か問題がある可能性を示唆します。
  • 特定のウェブページの地域的な問題:該当する場合には、関連するセッショントレースは、読み込みが行われた場所でのページのコンテキスト内のAJAXの問題を調査することができます。
この機能にアクセスができるかどうかは、サブスクリプションレベルによって異なります。

AJAXのタイミングレポートを有効にする

APMエージェントを使ってJavaScriptスニペットを挿入している場合には、New Relic BrowserはAJAXタイミングのレポートを自動的には行いません。このPro版の機能を有効化するには:

  1. New Relic のメニューバーから、Browser > Browserアプリ > (選択されたアプリ)> 設定を選択します。
  2. Browser agentのインストルメンテーションオプションから、Pro機能を選択します。
  3. アプリケーションの設定を保存を選択します。
  4. 情報の取得が可能になるまで5分ほどお待ち下さい。
  5. 推奨:5分経ってもデータが表示されない場合は、エージェントを再起動してください。
Pro機能は、選択されたアプリのAJAXおよびBrowser Overviewページからも有効化できます。

AJAXリクエストのサマリーを見る

AJAXのタイミング機能を有効にした後は、アプリのBrowser OverviewにはAJAXのレスポンスタイムの平均が含まれます。また、AJAXーエジでは詳細な情報が表示されます。New Relicは、2分以上かかっているAJAXリクエストについては自動的に除去します。

Browser > Browser アプリ > (選択されたアプリ) > AJAX:この情報を使うことで、サイトのウェブページの一部をアップデートするAJAXコールの処理に時間かかっている、または失敗している場合に、ユーザーが体験している問題を見極めることができます。
AJAXリクエストに関するサマリーを表示するには:

  1. New RelicのメニューバーからBrowser > Browser アプリ > (選択されたアプリ) > AJAXを選択します。
    または
    選択されたアプリのBrowser Overviewページから直接AJAXページを表示させるには、AJAXの応答時間の平均のチャート名にあるリンクを選択してください。
  2. オプション:並び替えまたは絞り込みのオプションを使ってください。
  3. 特定のAJAXコールのサマリーを表示するには、リスト上の名前の部分にマウスオーバーしてください。
  4. 特定に呼び出しにおけるAJAXパフォーマンスの詳細を見るには、その名前を選択してください。

New Relic Browser自体がアプリに対して行うAJAXコールが表示されている場合がありますが、これは自然なことで、New Relic Browserがブラウザーセッション中のすべてのアクティビティをキャプチャーしているためです。

IE7, IE8, またはiOS用のChromeアプリを使用しているエンドユーザーからはAJAXタイミングの詳細を取得することはできません。

AJAXパフォーマンスの詳細を見る

特定のAJAXコールを選択した場合は、そのAJAXパフォーマンスのチャートに特定のAJAXエンドポイントが4つまたは2つの期間に分けられて表示されます。分けられる期間の数は、クロスアプリケーション トレーシングのヘッダーがあるかどうかによって異なります。

  • 4期間(アプリケーションタイムキュータイムネットワークタイム、そしてコールバックタイム):これらのAJAXコールは、CATヘッダーを提供するNew Relic APMの各エージェントによって監視されるアプリに対して行なわれます。
  • 2期間(応答時間コールバックタイム):これらのAJAXコールはAPMのエージェントで監視されていないか、またはCATヘッダーを提供しないエージェントによって監視されているアプリに対して行なわれます。


Browser > Browserアプリ > (選択されたアプリ) > AJAX > (選択されたAJAXコール):上の図は特定のAJAXコールにに関する詳細例となります。

New Relicの標準のユーザーインターフェースの機能ページの機能を使うことで、詳細にドリルダウンすることができます。

追加のオプションは以下を含みます:

  • チャート内で色分けされた主なAJAXコールを分離するには、レジェンド内の対応する色分けされた名前にマウスオーバーしてください。
  • チャートビューまたはページビューによる、あらゆるAJAXリクエストのパフォーマンスの詳細を見るには、リストから名前を選択してください。
  • AJAXページに戻るには、X(閉じる)ボタンを選択してください。

トラブルシューティングのヒント

以下は、アプリのパフォーマンスの問題を見極めるためのトラブルシューティングのヒントとなります:

  • AJAXページのリクエストによるデータ送受信の平均のチャート内の、大きなスパイクを見つけてください。
  • 個々の呼び出しのAJAXパフォーマンスから、コールバックタイム値とデータ転送率の相関関係を探ってください。
  • エンドポイントの外れ値を探して、それらに対して行なわれた個々のリクエストを調査してください。
AJAXの問題をさらに深く検証するためにはAJAXトランザクションを選択し、次にAJAXとセッショントレースのテーブルからトレースを選択してください。このことで、読み込みが行われた場所でのページのコンテキスト内のAJAXの問題を調査することができます。


Browser > Browser アプリ > (選択されたアプリ) > AJAX > (選択されたAJAXコール) > (選択されたセッショントレース):上の図は、それぞれのAJAXコールに対するセッショントレースの詳細例となります。

時間率の例

AJAXページには合計時間率のチャートが含まれます。AJXカテゴリーのリストを合計時間率で並び替えた場合は、リストには各AJAXカテゴリの割合が表示されます。また、チャートでには最も時間率の高いリクエストが表示されます。
この情報を表示するにあたってNew Relic Browserは、各AJAXカテゴリにおけるリクエスト時間の累計をすべてのAJAXリクエストに対するリクエスト時間の累計で割った値を使います。なぜならば、高いスループットを持つリクエストが低いスループットを持つリクエストよりも望ましいためです。

2つのAJAXカテゴリの時間率を計算する
例えばapi1.example.comapi2.example.comの2つのAJAXカテゴリがあったとします。そして、api1.example.com が1回ヒットし、値を返すまでに1秒(1000ミリ秒)かかったとすると、合計では 1 x 1秒 = 1秒がかかります。またapi2.example.com.では500回ヒットし、値を返すのに1ミリ秒かかったとすると、値を返すまでに合計で500 x 1ms = 500ms (0.5秒)かかります。
AJAXカテゴリ内でのリクエストタイムの累計は1500ミリ秒、または1.5秒となります。時間率を求めるためには、それぞれのAJAXカテゴリをリクエストタイムの累計値で割り、そして100を掛けます。
つまり、api1.example.comでは合計時間率に対して67% (1000 ÷1500 x 100)となり、api2.example.comでは33% (500÷1500 x 100)となります。

時間の計算 api1 api2
ヒット回数 1 500
応答時間 1秒(1000ミリ秒)
1ヒット x 1000ms = 1000ms (1秒)
1ミリ秒(1ms)
500ヒット x 1ミリ秒 = 500ミリ秒(0.5秒)
全てのAJAXカテゴリに対するリクエストタイムの累計 1000ms + 500ms = 1500ms (1.5秒) 1000ms + 500ms = 1500ms (1.5秒)
時間率=カテゴリ÷1500ms
リクエストタイムの累計 x 100 (%)
1000ms / 1500 x 100 = 67% 500ms / 1500 x 100 = 33%

関連情報

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

  • ブラウザーモニタリングとパフォーマンスのインパクト(モニタリングを即座に開始するために、New Relic BrowserのJavaScriptがどのようにウェブページのパケットに組み込まれているか)
  • URLのホワイトリスト(New RelicがページビューAJAXページでどのようにメトリクスをグループ化しているか

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