ブラウザのパフォーマンスとイベントの監視

ブラウザ エージェントでは、Web ページ ロード パフォーマンス メトリックおよびエラーを監視できます。 ブラウザ、ネットワーク、またはアプリケーション サーバにパフォーマンス低下を正確に示すことができます。
apmdevops106
ブラウザ エージェントでは、Web ページ ロード パフォーマンス メトリックおよびエラーを監視できます。 ブラウザ、ネットワーク、またはアプリケーション サーバにパフォーマンス低下を正確に示すことができます。
アプリケーション所有者は、以下の概略的な手順に従います。
  1. ブラウザ エージェントに固有の追加情報を確認および使用します。
ブラウザ エージェントによるアプリケーション パフォーマンスの監視
管理対象アプリケーションのブラウザ応答時間をモニタして、ビジネス サービスとその依存関係の観点からアプリケーションを確認できます。 マップは、メトリック、エラー、およびイベントのパフォーマンスと分析から自動的に生成されます。
注:
ページ ロード メトリックのみがマップに表示されます。 構造フレームワーク(AJAX など)のメトリックは、このマップには表示されません。
以下の手順に従います。
  1. 左側のペインで、
    [エクスペリエンス ビュー]
    をクリックします。
    Experience ビューでは、個々のエクスペリエンス カードが表示されます。 各カードは、サマリを表示します。 赤色の項目は、遅延または障害が発生したトランザクションを表示しています。
  2. カードを参照し、対象のカードの
    ノートブック
    のアイコンをクリックします。
    [分析ノートブック]はエクスペリエンスの詳細を表示します。 関係フローに、選択したエクスペリエンスのトランザクション パスを表示します。 このマップは、発生したイベントのコンテキストを提供します。
  3. (オプション)[パースペクティブ]ドロップダウン リストから[タイプ]
    を選択します。
  4. マップを分析して、パフォーマンスの問題を示す一連の依存関係における最初のコンポーネント(左端のコンポーネント)を特定します。 このコンポーネントは、アプリケーション環境においてパフォーマンスの低下の原因となります。
  5. マップで、目的の
    コンポーネント
    をクリックします。
    [メトリック]タブには、BlamePoint および W3C メトリックが表示されます。
  6. (オプション)
    [メトリック]
    タブで、目的の
    メトリック名
    をクリックします(例: 間隔ごとのページ ヒット数)。
    メトリック ツリーが表示され、特定のメトリックが示されます。
  7. この情報は、パフォーマンスの問題を調査するのに役立ちます。
ブラウザ エージェント メトリックの分析
パフォーマンスの低下したアプリケーションは、エンドユーザ エクスペリエンスに影響する可能性があります。 メトリック ツリーにライブ データを表示すると、パフォーマンスの問題を分析して解決するのに役立ちます。 エージェント、リソース、およびメトリックのツリー ビューは、15 秒ごとに更新されて最新のメトリック データを表示します。
以下のパスに、すべてのブラウザ エージェント メトリックが表示されます。
  • [DxC Agent]、[Business Segment]
    ノード。 以降のセクションのメトリック パスの説明では、
    DxC Agent
    のパスが示されます。
注:
すべてのブラウザ エージェント メトリックの値は切り捨てられます。 「Browser Agent Calculations (ブラウザ エージェントの計算)」セクションへのリンクを追加するか、または以下の各サブトピック内で特定の計算に個別に追加します。
ページ ロード メトリック
ブラウザ エージェントは、ブラウザ応答時間および Web ページのイベントをレポートします。 使用可能な場合、ブラウザ エージェントは、ブラウザ応答のタイミングをレポートします。 一部のブラウザでは以下の制限があります。
  • 初期ページの場合、関連する前のページのアンロードはありません。
  • ページ ロードがユーザ入力を待機する場合、この時間は Average Page Load Time (ms) メトリックに含まれます。
以下の表では、ブラウザのページ ロード メトリックを計算する方法について説明します。 「メトリックの計算」列は、ブラウザ エージェントが特定のメトリックを取得するために使用する計算式を示しています。 たとえば、Average Page Render Time (ms) は、ブラウザの 2 つのイベント時間(loadEventEnd および domComplete)の引き算によって取得されます。
メトリック
説明
メトリックの計算
Average Page Render Time (ms)
ドキュメント オブジェクト モデル(DOM)が処理された後、コンテンツを表示する時間。
loadEventEnd 時間 - domComplete 時間
Average Connection Establishment Time (ms)
ブラウザがサーバへの TCP 接続を確立するまでの時間。
connectEnd 時間 - connectStart 時間
Average Domain Lookup Time (ms)
ブラウザが現在の Web ページのドメインのネーム サービス ルックアップを完了するまでの時間。
domainLookupEnd 時間 - domainLookupStart 時間
Average DOM Processing Time (ms)
ナビゲーション開始から、ブラウザがドキュメント オブジェクト モデル(DOM)を処理するまでの時間。
注:
この時間は、DOM 内のオブジェクトがすべて取得されロードされる時間ではありません。
domComplete 時間 - domLoading 時間
Average Page Load Time (ms)
ナビゲーション開始から、ブラウザがコンポーネントをすべてロードし、ページのロードが完了するまでの時間。
loadEventEnd 時間 - navigationStart 時間
Average Previous Page Unload Time (ms)
以前に表示されたページをアンロードする時間。 アンロードするページがない場合(たとえばブラウザ セッションが開始されたとき)、値はありません。
unloadEventEnd 時間 - unloadEventStart 時間
Average Time to First Byte (ms)
ブラウザがサーバまたはアプリケーション キャッシュから応答の最初のバイトを受信するまでの時間。
responseStart 時間 - requestStart 時間
Average Time to Last Byte (ms)
ブラウザがサーバまたはアプリケーション キャッシュから応答の最後のバイトを受信するまでの時間。
responseEnd 時間 – requestStart 時間
JavaScript Errors Per Interval
指定された間隔内で、監視対象 Web ページ上で発生した JavaScript エラーの数。
適用不可
Page Hits Per Interval
監視対象の Web ページが一定の間隔内で要求されたオカレンスの数。
適用不可
Average Page Stall Time
ページ要求で待機に費やす時間。この値を超えると、ディスパッチされます。
(connectStart 時間 - domainLookupEnd 時間) + (requestStart 時間 - connectEnd 時間)
ブラウザ エージェントでは、ブラウザ メトリックが作成およびレポートできなくなるしきい値を使用します。 ページのロード、非同期、JavaScript 関数などのメトリックのしきい値には、デフォルトのしきい値があります。このしきい値は設定可能です。 メトリックが作成されるには、ブラウザのタイミングがしきい値の制限を満たしている必要があります。
ブラウザ メトリックがレポートされないために、メトリック ツリーに作成されない場合があります。 この場合、メトリックはマップに表示されません。 たとえば、メトリック ツリーに Average Time to First Byte (ms) が表示されていない場合は、マップにも表示されません。
ブラウザ エージェントは、ブラウザ応答時間および Web ページのイベントをレポートします。 使用可能な場合、ブラウザ エージェントは W3C Navigation Timing API を使用してブラウザ応答のタイミングをレポートします。 W3C Navigation Timing API は、最新のブラウザで実装されるインターフェースです。 これらのブラウザの一部には以下の制限があります。
  • 初期ページの場合、関連する前のページのアンロードはありません。
  • ページ ロードがユーザ入力を待機する場合、この時間は Average Page Load Time (ms) メトリックに含まれます。
最上位のページのビジネス トランザクションが開始されていない場合、以下の場所にメトリックが表示されます。
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path>
最上位のページのビジネス トランザクションが開始されている場合、以下の場所にメトリックが表示されます。
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser
注:
エラーが発生した場合、ブラウザ エージェントはページ メトリック パスの下の Page Errors Per Interval メトリックをインクリメントします。 このメトリックは、ページの JavaScript および AJAX エラーの総数を反映します。
ソフト ページ ロード メトリック
単一ページのアプリケーションでは、初期ページのロード時に、そのページのすべてのコンテンツを取得するための単一のページ要求を行います。 アプリケーションで、サーバのリソースを動的に取得し、ユーザ操作の結果として UI を更新することができます。 多くの単一ページのアプリケーションでは、HTML5 履歴 API と URI ロケーション ハッシュ プロパティを使用して、同じ単一の Web ページ上の論理ユーザ ナビゲーションを示します。 ページ全体を再ロードせずに、変更のルーティングをトリガするこのタイプの論理ユーザ ナビゲーションは、ソフト ページ ナビゲーションと呼ばれます。 ブラウザ エージェントでは、ソフト ページのロード時間を監視し、Average Page Load Time (ms) メトリックをレポートします。 ブラウザ エージェントはまた、監視対象のソフト ページが指定された間隔内でアクセスされたオカレンスの数を監視します。 ブラウザ エージェントは、Page Hits Per Interval メトリックとしてこの数をレポートします。 この情報では、単一ページ アプリケーションのエンド ユーザ エクスペリエンスについてのより包括的な情報を提供します。
単一ページのアプリケーションとソフト ページ ナビゲーションで以下のメトリックが利用可能です。 これらのメトリックの計算では、以下の変数が使用されます。
  • TSPE = ソフト ナビゲーション(ページ ロードせずにルート変更する)が開始した時間
  • TSPS = ソフト ページがロードを完了する時間
メトリック
説明
メトリックの計算
Average Page Load Time (ms)
ソフト ナビゲーション(ページ ロードせずにルート変更する)が発生してから、ソフト ページがロードを完了するまでの平均時間。
TSPE - TSPS
Page Hits Per Interval
監視対象のソフト ページが一定の間隔内でアクセスされたオカレンスの数。
適用不可
ソフト ページ ナビゲーションが発生すると、その Average Page Load Time (ms) と Page Hits Per Interval メトリックが最上位のページのソフト ページ ハッシュ ノードの下に表示されます。
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Page_Path> | <Soft_Page_Hash>
最上位のページのビジネス トランザクションが開始されていると、ソフト ページ メトリックが表示されます。
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft Page_Hash>
AJAX メトリック
Web アプリケーションに関して、ブラウザ エージェントは、AJAX (Asynchronous JavaScript and XML)のような構造フレームワークでの動的 Web ページのブラウザ応答タイミングを提供できます。
ブラウザ エージェントは、以下をサポートしません。
  • ネストされた AJAX コールバック
  • AJAX 要求の同期
  • XMLHttpRequest.onerror
    および
    XMLHttpRequest.ontimeout
    などのコールバック関数 (コールバックの実行時間は、
    XMLHttpRequest.onreadystatechange
    および
    XMLHttpRequest.onload
    でサポートされています)。
    アイコン
    注:
    サポートの詳細については、「製品互換性マトリックス」を参照してください。
以下のメトリックは、AJAX を使用するフレームワークに関して使用できます。 これらのメトリックの計算では、以下の変数が使用されます。
  • TSE = AJAX の Send 呼び出しが終了する時刻
  • TFB = ブラウザがサーバ応答の最初のバイトを受信する時刻
  • TLB = ブラウザがサーバ応答の最後のバイトを受信する時刻
  • TCS = AJAX コールバック実行が開始する時刻
  • TCE = AJAX コールバック実行が終了する時刻
メトリック
説明
メトリックの計算
Average Callback Execution Time (ms)
以下の平均時間
XMLHttpRequest.onreadystatechange
または
XMLHttpRequest.onload
コールバック関数がサーバ応答を処理する平均時間。
TCE - TCS
Invocation Count per Interval
指定された間隔内に AJAX リクエストが発行された総回数。
適用不可
Average Time to First Byte (ms)
HTTP リソースに関する AJAX リクエストが発行されてからサーバ応答の最初のバイトが受信されるまでの平均時間。
TFB - TSE
Average Resource Load Time (ms)
HTTP リソースに関する AJAX リクエストが発行されてから AJAX コールバック(サーバ データの受信および処理を担当する機能)が完了するまでの平均時間。
TCE - TSE
Average Response Download Time (ms)
サーバ応答の最初のバイトの受信から最後のバイトの受信までの平均時間。
TLB - TFB
注:
AJAX コールでは、Average Response Download Time (ms) および Average Callback Execution Time (ms) メトリックは個別にレポートされます。 これらのメトリックは、特定 AJAX フレームワークの制限、具体的には、jQuery 1.x を通じた AJAX コールのためにレポートされないことがあります。
  • ブラウザ エージェントは、初期 AJAX コールの Average Callback Execution Time (ms) をレポートしない可能性があります。
  • ブラウザ エージェントは、Average Response Download Time (ms) および Average Time to First Byte (ms) をレポートしない可能性があります。
AJAX 呼び出しは、トップレベルのページやソフト ページで実行できます。 AJAX メトリックは、非同期(Async)リクエストと同期(Sync)リクエストに分類されます。
同期 AJAX メトリック
最上位のページのビジネス トランザクションが開始されていない場合、ページの[Resources]ノードの下に AJAX メトリックが表示されます。
  • Business Segment | <HOST/PORT> | <Page_Path> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <HOST/PORT> | <Page_Path> | <Soft_Page_Hash> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
最上位のページのビジネス トランザクションが開始されている場合、以下の場所に AJAX メトリックが表示されます。
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
AJAX コールでビジネス トランザクションが開始されている場合、最上位のページで開始されているビジネス トランザクションよりも優先されます。 AJAX メトリックがここに表示されます。
  • Business Segment | <Business_Service_AJAX> | <Business_Transaction_AJAX> | <Business_Transaction_Component_AJAX> | Browser | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
非同期 AJAX メトリック
最上位のページのビジネス トランザクションが開始されていない場合、ページの[Resources]ノードの下に AJAX メトリックが表示されます。
  • Business Segment | <HOST/PORT> | <Page_Path> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <HOST/PORT> | <Page_Path> | <Soft_Page_Hash> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
最上位のページのビジネス トランザクションが開始されている場合、以下の場所に AJAX メトリックが表示されます。
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
AJAX コールでビジネス トランザクションが開始されている場合、最上位のページで開始されているビジネス トランザクションよりも優先されます。 AJAX メトリックがここに表示されます。
  • Business Segment | <Business_Service_AJAX> | <Business_Transaction_AJAX> | <Business_Transaction_Component_AJAX> | Browser | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
注:
AJAX コールにエラーがある場合、ブラウザ エージェントは AJAX メトリック パスの下の Resource Errors Per Interval メトリックをインクリメントします。
Web リソース メトリック
ブラウザ エージェントは、イメージ、CSS、および JavaScript など、ページ上のすべてのリソースの Web リソース メトリックをレポートします。 Web ページは、最初のページ自体のダウンロードから表示可能でないコンテンツから構築されます。 このコンテンツは、イメージ、サウンド、またはその他のメディアの形式である場合があります。 たとえば、Web アプリケーションでは、コンテンツ配信サービスを使用してイメージをホストし、埋め込み広告を含めることもできます。 ページで参照してダウンロードするこれらのサポート アイテムは、名前付きリソースです。 アナリストは、アプリケーションのパフォーマンス低下が、アプリケーションまたは Web リソース(サード パーティから提供される可能性がある)によるものかどうかを把握する必要があります。
ページ上にある他のすべてのリソースの Web リソース メトリックは、ページの[Resources]、[HTML]ノード下に表示されます。
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Page_Path> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Soft_Page_Hash> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
ページのビジネス トランザクションが開始されている場合、Web リソース メトリックは以下の場所に表示されます。
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
以下の手順に従います。
  1. 左側のペインで、
    [メトリック]
    をクリックします。
    メトリック ツリーには、メトリックとその他の情報がツリー形式で表示されます。 ドメインのすぐ下の高レベル ノードは、個々のアプリケーション サーバ ホストまたは同等のものにインストールされているエージェントを表します。 ノードは、特定のメトリック情報が収集され、エージェント中心のツリー ビューに表示される場所です。 ノードを展開すると、より詳細なメトリック情報を表示し、検索できます。
  2. [DxC Agent]、[Business Segment]
    ノードを展開します。
    エージェント、リソース、およびメトリックのツリー ビューは、15 秒ごとに更新されて最新のメトリック データを表示します。
  3. ノードを移動して、ブラウザ メトリックを表示します。
  4. (オプション)ツリー内の特定のメトリックの同じビューが表示できるように、URL を同僚と共有します。
エラーの分析
Web アプリケーションは、次のようなアクションに JavaScript を使用します。
  • ユーザ情報の受け入れ
  • 切り替え効果の提供
  • 複雑なデータのレンダリングと表示
Web ページの機能しないセクションは、JavaScript または AJAX エラーに原因がある可能性があります。 ブラウザ エージェントによる JavaScript および AJAX エラーの監視により、そのようなエラー状況を可視化できます。
JavaScript エラー
JavaScript エラー処理は try-catch ブロックでローカルに、およびイベント ハンドラでグローバルに指定できます。 ブラウザ エージェントはグローバル エラー ハンドラを使用して、現在のブラウザ ウィンドウでキャッチされなかったすべての JavaScript エラーをキャプチャします。 ブラウザ エージェントは以下を実行できます。
  • Page Errors Per Interval メトリックに JavaScript エラーの数をレポートします。 このメトリックは、適切なビジネス トランザクションまたは URL コンテキスト内のページ メトリック パスの下に表示されます。
  • 行と列の番号、タイムスタンプ、エラーのスタック トレースなど、ブラウザ ウィンドウ内でネイティブおよびカスタムの JavaScript エラーに関する情報を収集します。
  • エラーごとのエラー スナップショットをエラーの詳細と共に生成します。
AJAX エラー
AJAX ステータス コードは、AJAX エンドポイントの問題を示している可能性があります。 ブラウザ エージェントは、以下の応答 HTTP ステータス コードを含むすべての AJAX コールを AJAX エラーとしてレポートします。
  • 4XX クライアント エラー
  • 5XX サーバ エラー
また、ブラウザ エージェントは、各 AJAX コールの問題を理解するのに役立つ、エラー応答に関する情報もキャプチャします。 ブラウザ エージェントは以下を実行できます。
  • Page Errors Per Interval メトリックに、ページの AJAX エラーの総数をレポートします。 このメトリックは、適切なビジネス トランザクションまたは URL コンテキスト内のページ メトリック パスの下に表示されます。
  • 適切なビジネス トランザクションまたは URL コンテキスト内の AJAX メトリック パスの下で Resource Error Per Interval をレポートします。
  • エラー応答に関する以下の情報をキャプチャします。
    • 応答のステータス コード(例: 404)
    • 応答のステータス テキスト(例: Not Found)
    • jQuery からのカスタム エラー メッセージ(JSON パーサ エラー メッセージやスタック トレースなど)
エラー スナップショットからのエラーの分析
ブラウザ エージェントは、エラーごとに個別の JavaScript または AJAX エラー スナップショットを作成します。 1 間隔内で、監視対象 Web ページで発生した各エラーには、以下の情報が含まれます。
  • ブラウザ名
  • ブラウザのバージョン
  • エラーが発生した Web ページの URL
  • ブラウザによってレポートされたエラーの説明
  • ブラウザによってレポートされたエラー行番号
  • ブラウザによってレポートされたエラー列番号
  • ブラウザによってレポートされたソース ファイル名
エラー スナップショットで、呼び出しパスおよびパラメータを含むエラーの詳細を確認します。 15 秒ごとに、各エラー スナップショットに、その間隔で発生した JavaScript または AJAX エラーが表示されます。
以下の手順に従います。
  1. [ビジネス トランザクション]
    タブをクリックします。
    サマリ リストは、コンポーネントに対応する追跡を表示します。 セグメントには、継続時間が表示されます。 セグメントは、トランザクションに関連付けられているすべての問題を色分けして表示します、たとえば、赤はエラーを示します。
  2. 目的のトランザクション追跡をクリックします。
    個別のトランザクション コンポーネントは、グラフィカル スタック (ウェディング ケーキ) に表示されます。
  3. 目的の赤色のビジネス区分をクリックします。たとえば、JavaScript エラーでは以下のようになります。
    Business Segment | <Page_Path> または <business transaction>/jserrors/error_SyntaxError.jsp (0 ms)
  4. [コンポーネント詳細]
    を表示し、エラーの詳細を表示します。
    注:
     すべてのブラウザがスタック トレースを提供できるわけではありません。 たとえば、Internet Explorer 10、Microsoft Edge、および Safari 9.x はスタック トレースを提供しません。
  5. 問題の原因と思われるコンポーネントを識別し、組織の問題解決プロセスに従います。