リソースパフォーマンスの監視

リソースパフォーマンスの監視

RUM SDK は、すべての RUM ビュー (ページの読み込み) のリソースとアセットを収集します。XMLHttpRequest (XHR) と Fetch リクエストだけでなく、画像、CSS ファイル、JavaScript アセット、フォントファイルも収集します。RUM リソースイベントは、詳細なタイミングとメタデータとともに、それぞれに対して生成されます。

RUM リソースは、収集時にアクティブな RUM ビューに関連するすべてのコンテキストから継承します。

RUM リソースを APM トレースにリンクする

リクエストがスタックのレイヤー間を移動するときに、リクエストをさらに完全にエンドツーエンドで可視化するには、RUM データを対応するバックエンドトレースに接続します。これにより、次のことが可能になります。

  • ユーザーが直面するエラーの原因となったバックエンドの問題を特定する。
  • スタック内の問題によってユーザーが影響を受ける範囲を特定する。
  • フレームグラフで完全なエンドツーエンドのリクエストを確認する。これにより、RUM と APM の間をシームレスにナビゲートし、正確なコンテキストで戻ることができます。

この機能の設定については、RUM とトレースの接続を参照してください。

リソースタイミングとメトリクス

リソースの詳細なネットワークタイミングデータは、Fetch および XHR ネイティブブラウザメソッドと Performance Resource Timing API から収集されます。

属性タイプ説明
duration数値リソースのロードにかかった全時間。
resource.size数値(バイト)リソースのサイズ。
resource.connect.duration数値(ns)サーバーへの接続が確立されるまでにかかった時間 (connectEnd - connectStart)。
resource.ssl.duration数値(ns)TLS ハンドシェイクにかかった時間。最後のリクエストが HTTPS 経由ではなかった場合、このメトリクスは収集されません (connectEnd - secureConnectionStart)。
resource.dns.duration数値(ns)最後のリクエストの DNS 名が解決されるまでにかかった時間 (domainLookupEnd - domainLookupStart)。
resource.redirect.duration数値(ns)後続の HTTP リクエストにかかった時間 (redirectEnd - redirectStart)。
resource.first_byte.duration数値(ns)応答の最初のバイトを受信するまでにかかった時間 (responseStart - RequestStart)。
resource.download.duration数値(ns)応答のダウンロードにかかった時間 (responseEnd - responseStart)。

: 一部のリソースの詳細なタイミングの収集に問題がある場合は、リソースタイミングと CORS を参照してください。

リソースの属性

属性タイプ説明
resource.type文字列収集されるリソースのタイプ (cssjavascriptmediaXHRimage など)。
resource.method文字列HTTP メソッド (POSTGET など)。
resource.status_code数値応答ステータスコード。
resource.url文字列リソースの URL。
resource.url_host文字列URL のホスト部分。
resource.url_path文字列URL のパス部分。
resource.url_queryオブジェクトクエリパラメーターの key/value 属性として分解された、URL のクエリ文字列部分。
resource.url_scheme文字列URL のプロトコル名 (HTTP または HTTPS)。
resource.provider.name文字列リソースプロバイダー名。デフォルトは unknown となります。
resource.provider.domain文字列リソースプロバイダーのドメイン。
resource.provider.type文字列リソースプロバイダーのタイプ (first-partycdnadanalytics など)。

サードパーティのリソースを特定する

RUM は、リソース URL ホスト部分からリソースプロバイダーの名前とカテゴリを推測します。リソース URL ホストが現在のページ URL ホストと一致する場合、カテゴリは first party に設定されます。それ以外の場合、カテゴリは、たとえば cdnanalytics、または social になります。

リソースタイミングと CORS

Resource Timing API は、RUM リソースのタイミングを収集するために使用されます。これは、ブラウザがスクリプトに適用するクロスオリジンセキュリティ制限の対象となります。たとえば、Web アプリケーションが www.example.com でホストされており、images.example.com を介して画像をロードする場合、デフォルトでは、www.example.com でホストされてロードされたリソースのタイミングのみが取得されます。

これを解決するには、クロスオリジンリソースに Timing-Allow-Origin HTTP 応答ヘッダーを追加して、CORS の対象となるリソースの拡張データ収集を有効にします。たとえば、任意のオリジンにリソースタイミングへのアクセスを許可するには、Timing-Allow-Origin: * を使用します。CORS の詳細については、MDN Web ドキュメントをご覧ください。

その他の参考資料