URL、ステータスコード、期間などのメタデータしかない場合、AJAXの失敗を診断するのは困難です。GraphQLのような最新のフレームワークはこれをさらに困難にします — リクエストが成功したように見える場合でも、エラーがレスポンス本文内に隠れている可能性があります。
当社のAJAXUIにより、ブラウザから外部のHTTPまたはHTTPSエンドポイントへのAJAX requestsを完全に可視化できます。時間がかかっている呼び出しや失敗している呼び出しを特定し、完全なリクエストとレスポンスのペイロードをキャプチャして、スタック全体にわたる問題をトレースできます。また、デスクトップブラウザ、モバイルデバイス、タブレットなどのデバイスタイプ別に問題をレビューすることもできます。
トラブルシューティングのポイント
ここでは、アプリのパフォーマンス問題を特定するためのトラブルシューティングのヒントをご紹介します。
AJAXコールのトラブルシューティング | 例 |
|---|
リクエスト全体の問題 | 問題がどこにあるのかわからない場合、またはリクエストを最初から最後まで追跡したい場合は、 の [分散トレース]AJAXUI リンクをクリックします。 |
タイミングの問題 | Total time percentages, throughput requests per minute (rpm), and average data transfer rates per requestは、タイミングの問題を特定するのに役立ちます。 - AJAX概要ページのAverage data transfer per requestグラフで大きなスパイクを探します。
- Group Byドロップダウンを使用してデータの傾向を分析し、リクエスト URL、GraphQL 操作名、その他の多くのフィールド別に AJAX パフォーマンスを評価します。
- 個々の呼び出しのAJAX performanceタブから、高いコールバック時間値とデータ転送速度の相関関係を探します。
|
エンドポイントの問題 | 異常なエンドポイントを探し、そこからの個々のリクエストを調査します。 AJAX概要ページのStatus codesチャートには、呼び出しからの戻り動作に関する情報が提供されます。 200の範囲外のステータス コードが多数表示される場合は、AJAX エンドポイントに問題がある可能性があります。 |
具体的なWebページの位置の問題 | 読み込まれるページのコンテキスト内で潜在的な AJAX の問題を調べます。 AJAX トランザクションを選択し、 Session traces with AJAXテーブルから任意のトレースを選択します。 |
AJAX requestsを調査する
アプリのAJAXリクエストに関する問題をトラブルシューティングするためのものです。
- one.newrelic.com > All capabilities > Browser > (select an app) > AJAXに移動します。
- デバイスのタイプを選択します:デスクトップ(デフォルト)、モバイル、およびタブレット。
- AJAX リクエストをクリックします。
AJAXリクエストに的を絞ったら、調査の開始です。以下の戦略のいくつかを試してください:
サマリーページには、AJAXコールのトラブルシューティングに役立ついくつかのチャートが用意されています。
AJAXによる要約ページ | コメントコメント |
|---|
グループとフィルター | - UIで使用可能なSort byオプションのいずれかを使用します。2分以上かかるすべてのAJAX requestsは自動的に除外されます。
- より柔軟にデータを表示するには、 Group byオプションを使用して
requestUrlまたはgroupedRequestUrlのいずれかを選択します。
|
エンドポイント | Throughputチャートには、スループットが最も高い 5 つのエンドポイントが表示されます。 通話に 5 つ以上のエンドポイントがある場合、それらはチャート上でOtherとして統合されます。 |
New Relicからの呼び出し | お客様のアプリへのAJAXコールを当社のブラウザが監視しているのが見えるかもしれません。これは正常なことです。なぜなら、すべてのアクティビティはブラウザのセッション中にキャプチャされるからです。 |
欠落しているブラウザデータ | AJAXのタイミングの詳細は、IE 7、IE 8、Chrome for iOSのブラウザでは確認できません。他のブラウザで期待通りのデータが表示されない場合は、 AJAXのトラブルシューティング手順 に従ってください。 |
AJAX概要ページから特定の通話を選択した後、 AJAX performanceリンクを使用して詳細情報にドリルダウンできます。 これには、セッショントレースの詳細への直接リンクが含まれます。
ここからタブを選択して、ページ ビュー別のパフォーマンス データを取得することもできます。(アプリ サーバーのリクエスト数がブラウザの PageView トランザクション数を大幅に上回っている場合は、バックエンドへのリクエストの一部が AJAX を介して行われているためです。詳細については、 トラブルシューティング手順を参照してください。)

one.newrelic.com > All capabilities > Browser > (select an app) > AJAX > (select an AJAX call): この例では、特定の AJAX 呼び出しのパフォーマンスの詳細を示します。 ページビューごとのパフォーマンスの詳細を表示することもできます。
Average response timeチャート上の AJAX エンドポイントは、4 つまたは 2 つの期間として表示されます。 これは、クロスアプリケーション トレース ヘッダーがあるかどうかによって異なります。
- 4 つの期間 ( Application time 、 Queue time 、 Network time 、 Callback time ): これらの AJAX 呼び出しは、クロスアプリケーション トレース ヘッダーを提供するエージェントによってアプリ モニターに対して実行されます。
- 2 つの期間 (Response time と Callback time): これらの AJAX 呼び出しは、 APMエージェントによって監視されていないアプリ、またはクロスアプリケーション トレース ヘッダーを提供しないエージェントによって監視されているアプリに対して行われます。
URL、ステータスコード、期間などのメタデータが失敗の診断に不十分な場合、ペイロードのキャプチャオプションを使用すると全体像を把握できます。これにより、各AjaxRequestイベントに4つの新しい属性が追加されます。それぞれ4KBで切り捨てられ、NRQLでクエリ可能です。また、View payloadボタンを使用して、AJAXの詳細UIでペイロードを表示することもできます:
request.headers
request.body
response.headers
response.body
ペイロードのキャプチャを有効にするには、アプリケーション設定に移動してペイロードのキャプチャオプションを設定します。

one.newrelic.com > All capabilities > Browser > (select an app) > AJAX > (select an AJAX call):この例では、特定のAJAX呼び出しのリクエストの詳細を示しています。ページビューごとにリクエストの詳細を表示することもできます。
ペイロードのキャプチャと拒否リストの相互作用
ペイロードのキャプチャは、既存のAJAXリクエストの拒否リストを尊重します。任意のAJAXリクエストについて:
URLが拒否リストにある場合、イベントは完全に破棄され、メタデータやペイロードはキャプチャされません。
URLが拒否リストにない場合、ペイロードのキャプチャ設定に基づいて、エージェントはリクエストとレスポンスのペイロードをキャプチャし、データをNew Relicに送信する前に難読化ルールを適用します。
PII保護
Browserエージェントは、クレジットカード番号、社会保障番号、passwordやtokenなどの一般的なキーを含む、キャプチャされたペイロード内の一般的な機密データパターンを取り込み前に自動的に難読化します。カスタムの正規表現ルールを設定して、ビジネス固有の機密データをマスクすることもできます。詳細については、Browserデータの難読化を参照してください。
リクエストを最初から最後まで追跡するには、 の [分散トレース] リンクをクリックすることもできます。AJAXUI
- ディストリビューティッド(分散)トレーシングのリストを表示するには、AJAX 概要レベルの AJAX UIのリンクをクリックします。
- アプリケーションと特定のリクエスト タイプでフィルターされたすべてのトレースを表示するには、AJAX UIで選択したリクエストの [分散トレース] リンクをクリックします。
AJAX カテゴリ リストをTotal time percentageで並べ替えると、リストには各 AJAX カテゴリの割合が表示されます。 また、グラフには、時間の割合が最も高い上位のリクエストが表示されます。
この情報を表示するために、ブラウザは各AJAXカテゴリの累積リクエスト時間を取得し、それをすべてのAJAXリクエストの累積リクエスト時間で割ります。スループットの高いリクエストは、スループットの低いリクエストよりも優先されるため、レスポンスタイムを最適化する場所を特定するのに役立ちます。
Example: Calculating time percentages for two AJAX categories
この例では、 api1.example.comとapi2.example.comの2つのAJAXカテゴリを使用しています。
api1.example.comは1回ヒットし、応答するのに1秒(1000ms)かかります(1 x1秒=1秒)。
api2.example.comは500回ヒットし、応答するのに1ミリ秒かかります(500 x1ミリ秒=500ミリ秒、つまり0.5秒)。
すべてのAJAXカテゴリの累積リクエスト時間は1500ms、または1.5秒です。時間のパーセンテージを得るためには、各AJAXカテゴリを累積リクエスト時間で割り、パーセンテージのために100を掛けてください。
したがって、 api1.example.comは合計時間パーセンテージの67%(1000を1500で割ったものに100を掛けたもの)であり、 api2.example.comは33%(500を1500で割ったものに100を掛けたもの)です。
Time calculations | api1 | api2 |
|---|
ヒット数 | 1 | 500 |
対応時期 | 1秒(1000ms) 1ヒット×1000ms=1000ms(1秒) | 1ミリ秒(1ms) 500ヒット×1ms=500ms(0.5秒) |
すべてのAJAXカテゴリの累積リクエスト時間 | 1000ms + 500ms = 1500ms (1.5秒) | 1000ms + 500ms = 1500ms (1.5秒) |
Time percentage = Category / 1500ms cumulative request time x 100 for percentage | 1000ms / 1500 x 100 = 67%となります。 | 500ms / 1500 x 100 = 33 |
次のステップ
AJAX UI に加えて、次のリソースも使用できます。