AJAX UIには、ブラウザから HTTP や HTTPS ドメインなどの外部インフラストラクチャへの最近の AJAX リクエストが表示されます。 この情報は、サイトの Web ページの一部を更新する AJAX 呼び出しに時間がかかったり失敗したりした場合に、エンドユーザー エクスペリエンスに関する問題を特定するのに役立ちます。 デスクトップ ブラウザ、モバイル デバイス、タブレットなど、デバイスの種類別に問題を確認できます。
トラブルシューティングのポイント
ここでは、アプリのパフォーマンス問題を特定するためのトラブルシューティングのヒントをご紹介します。
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リクエストに関する問題をトラブルシューティングするためのものです。
one.newrelic.com > All capabilities > Browser > (select an app) > AJAX
に移動します。
デバイスのタイプを選択します:デスクトップ(デフォルト)、モバイル、およびタブレット。
AJAX リクエストをクリックします。
Ajax リクエストに照準を合わせたら、調査を開始します。これらの戦略のいくつかを試してください。
サマリーページには、AJAXコールのトラブルシューティングに役立ついくつかのチャートが用意されています。
AJAXによる要約ページ | コメントコメント |
---|
グループとフィルター | UI で利用可能なSort byオプションのいずれかを使用します。 2分以上かかるAJAXリクエストはすべて自動的にフィルタリングされます。 | より柔軟にデータを表示するには、 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エージェントによって監視されていないアプリ、またはクロスアプリケーション トレース ヘッダーを提供しないエージェントによって監視されているアプリに対して行われます。
リクエストを最初から最後まで追跡するには、 の [分散トレース] リンクをクリックすることもできます。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 に加えて、次のリソースも使用できます。