AJAX ページ: 処理の遅い呼び出しを特定する

New Relic Browser の AJAX ページは、直近のブラウザから、外部のエンドポイント(HTTP/HTTPS ドメインへ)への AJAX リクエストを表示します。この情報は、時間の掛かっているときや、AJAX コールに失敗しているときに以下のような問題を特定するのに役立ちます。

  • タイミングの問題: 合計時間の割合、スループット(分あたりのリクエスト数: rpm、分あたりの平均データ転送レートなどの情報は、タイミングの問題を特定するのに役立ちます。
  • エンドポイントの問題: リクエスト数に関連するステータスコードは、呼び出しに対する振舞いを結果として返します。ステータスコードが 300 番台以上の数字の場合は、AJAX のエンドポイントで何か問題が起きていることを示しています。
  • 特定のページの位置の問題: (利用可能な場合のみ) セッショントレース機能は、読み込まれたページの処理内で AJAX 絡みの問題を調査するのに役立ちます。
この機能を利用するには、PRO 以上のサブスクリプションレベルが必要となります。

AJAX タイムレポート機能の有効化

JavaScript スニペットの追加に、APM エージェントを利用している場合、New Relic Browser の AJAX タイムレポート機能は、自動で有効になりません。この機能を有効にする手順は以下のとおりです。

  1. New Relic のメニューバーから、Browser > Browser apps > (選択したアプリ) > Settings [設定] を選択する。
  2. Browser agent instrumentation [Browser エージェントの計測]オプションから、Pro features [Pro 機能]を選ぶ。
  3. Save application settings [アプリ設定の保存]を押します。
  4. 利用可能になるまで、5分程度待ちます。
  5. 推奨: 5分経ってもデータが表示されない場合は、エージェントを再起動してみてください。
Pro 機能の有効化は、選択済みアプリの AJAX ページと Browser Overview ページから行えます。

AJAX リクエストの概要の表示

AJAX タイミング機能を有効後、Browser Overview ページには、Average AJAX response time [平均 AJAX レスポンスタイム]チャートが表示されます。さらに、AJAX ページに、詳細なデータが表示されるようになります。New Relic は、自動で 2分以上かかっている 全 AJAX リクエストを抽出します。

Browser AJAX page
Browser > Browser apps > (選択済みアプリ) > AJAX:ページの一部の更新に時間がかかっていたり、AJAX コールが失敗している場合、この情報が、問題を特定する手がかりになります。

AJAX リクエストの概要情報を表示する手順は以下のとおりです。

  1. New Relic のメニューバーから、Browser > Browser apps > (選択済みアプリ) > AJAX にアクセスします。
    もしくは
    選択済みアプリの Browser Overview ページから、直接 AJAX ページにアクセスします。Average AJAX Response Time チャートのタイトルにあるリンクを押します。
  2. オプション: 必要に応じて、Sort by [並べ替え] やフィルターを利用します。
  3. リスト上の任意を名前を選択すると、その AJAX エンドポイントの概要情報が表示されます。

アプリへの New Relic Browser 自身の AJAX コールを見る場合があります。New Relic Browser はブラウザセッション中の全活動をキャプチャしているため、これは正常な動作です

AJAX タイムレポート機能を使うには、Pro 以上のサブスクリプションレベルである必要があります。) また、AJAX タイミングの詳細は、IE 7、IE 8、iOS 版 Chrome では利用できません。

AJAX パフォーマンスの詳細表示

ある AJAX コールを選択すると、その AJAX performance チャートには、その AJAX エンドポイントに対して、4種類の期間、または2種類の期間のどちらかを示します。期間の数は、クロスアプリケーションのトレースヘッダーがあるかどうかに依存します。

  • 4種類の期間 (Application timeQueue time, Network timeCallback time): CAT ヘッダーを提供する New Relic APM エージェントが監視するアプリの場合、この AJAX コールは、作成されます。
  • 2種類の期間 (Response timeCallback time): この AJAX コールは、APM エージェントが監視していないアプリや CAT ヘッダーを提供しないエージェントが監視するアプリの場合に、この AJXA コールは作成されます。
Browser AJAX details
Browser > Browser apps > (選択済みアプリ) > AJAX > (選択済み AJAX コール): 上記は、ある AJAX コールの詳細の例です。

New Relic 標準の UI の機能ページ機能を使って詳細情報にドリルダウンします。

以下は、ここで利用可能な他の機能です。

  • チャート内の色分けされた AJAX コールを分離するには、凡例にある対応する色分けされた名前を選択します。
  • AJAX リクエストのパフォーマンス詳細を見るには、リストから対象の名前を選択します。
  • AJAX ページに戻るには、X (閉じる)を押します。

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

以下は、アプリのパフォーマンスの問題を選別するためのトラブルシューティングのヒントです。

  • AJAX ページの Average data transfer by request [リクエスト別の平均データ転送量]チャートにある大きなスパイクを探します。
  • 個別の呼び出しの AJAX performance から、コールバック時間の長さとデータ転送速度との相関関係を探します。
  • 外れ値のエンドポイントを探し、それらから作られたリクエストを調査します。
潜在的な AJAX の問題をより深く調べるには、AJAX トランザクションを選択肢、Session traces with AJAX [AJAX 有りのセッションとレース]表から気になるトレースを選択します。ここから、読みまれたページにおけるAJAX の問題を調査できます。
Browser: AJAX call and related session traces
Browser > Browser app > (選択したアプリ) > AJAX > (選択した AJAX コール) > (選択したセッショントレース): 上記はある AJAX コールのセッショントレースの詳細です。

時間の合計の例

AJAX ダッシュボードには、Total time percentage [時間の合計に占める割合]チャートがあります。Total time percentage で AJAX カテゴリのリストを並べ替えると、リストは、各 AJAX カテゴリの割合を表示します。そして、チャートには、割合の高いリクエストが表示されます。

この情報を表示するには、New Relic Browser は、AJAX カテゴリごとにリクエスト時間の合計を取得し、それを全 AJAX リクエストのリクエスト時間の合計で割ります。レスポンスタイムを最適化すべき場所を特定するのに役立ちます。なぜなら、ハイスループットのリクエストはロースループットのリクエストより好ましいためです。

2つの AJAX カテゴリの時間の割合の計算
2つのカテゴリ api1.example.comapi2.example.com があり、api1.example.com は、1回ヒットし、応答するのに 1秒(1000ミリ秒)かかりるとします(1 x 1 秒 = 1 秒)。api2.example.com は、500回ヒットし、応答に、1ミリ秒かかるとします。(500 x 1ミリ秒 = 500ミリ秒 言い換えると 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 1000 ミリ秒 = 1000 ミリ秒 (1 秒)

1 ミリ秒

500 ヒット x 1 ミリ秒 = 500 ミリ秒 (0.5 秒)

全 AJAX カテゴリの累積リクエスト時間 1000 ミリ秒 + 500 ミリ秒 = 1500 ミリ秒 (1.5 seconds) 1000 ミリ秒 + 500 ミリ秒 = 1500 ミリ秒 (1.5 seconds)
時間の割合 = カテゴリ / 1500 ミリ秒 累積リクエスト時間 x 100 (パーセントに変換) 1000 ミリ秒 / 1500 x 100 = 67% 500 ミリ秒 / 1500 x 100 = 33%

関連情報

関連する情報は以下のとおりです。