Application Real-Time Monitoring Service:遅延セッションのトレース

SDK での静的リソースのレポートを有効化

デフォルトでは、ARMS ブラウザ監視 SDK は静的リソースのデータをレポートしません。遅延セッションのトレースを有効化するには、SDK の config オブジェクト内で sendResource を true に設定します。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f6354******",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

pid の値は、ARMS コンソールから取得したご利用のアプリケーションの PID に置き換えてください。

アプリケーションを再デプロイ後、ページが onload イベントを発火するたびに、SDK が静的リソースの読み込み時間データをレポートします。

データのサンプリングしきい値

sendResource を有効化すると、大量のテレメトリデータが生成されます。オーバーヘッドを制限するため、ARMS ではページ読み込み時間に基づいてデータをサンプリングします。

リソースのウォーターフォールで「サイズ」が 0 と表示される

サイズ 値は、ブラウザ API PerformanceResourceTiming.transferSize から取得されます。0 が返されるのは、以下の 2 つのケースです。

• リソースはブラウザキャッシュから提供されました。

• リソースがクロスオリジンであり、サーバーが Timing-Allow-Origin ヘッダーを設定していない場合

確認するには、Chrome DevTools（F12）を開き、ネットワーク タブに移動して、キャッシュを無効化 を選択します。その後、ページを再読み込みすると、transferSize の値が表示されます。

リソースのウォーターフォールで「時間」が 0 と表示される

時間 値は PerformanceResourceTiming.duration から取得されます。0 が返されるのは、max-age ディレクティブによって制御される長期キャッシュからブラウザがリソースを提供した場合で、ネットワーク要求が発生しないためです。

確認するには、Chrome DevTools（F12）を開き、ネットワーク タブに移動して、キャッシュを無効化 を選択し、ページを更新します。タイミング値が表示されます。

クロスオリジンのリソースで、すべてのタイミングフィールドが 0 を返す

同一オリジンポリシーにより、クロスオリジンのリソースに対してブラウザは以下のタイミング属性について 0 を返します。

redirectStart、redirectEnd、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、requestStart、responseStart

これを解決するには、クロスオリジンのリソース応答に Timing-Allow-Origin ヘッダーを追加します。

Timing-Allow-Origin: *

これにより、任意のオリジンがリソースのタイミングデータにアクセスできるようになります。より細かい制御が必要な場合は、* の代わりに個別のオリジンを指定してください。

API ウォーターフォール図の時間範囲

API ウォーターフォール図は、ページ読み込み開始時刻から、ページ完全読み込み完了後 1 分間の期間をカバーします。ページ読み込み中に実行された API 要求の全体的な状態を示します。

ウォーターフォール図間で API 応答時間が異なる理由

API ウォーターフォール図における応答時間は、通常、リソースのウォーターフォール図よりも数ミリ秒長くなります。これは、2 つの図がタイミングを測定する方法が異なるためです。

この差異は無視できるほど小さく、ボトルネック分析には影響しません。

API ウォーターフォール図のタイムラインの開始点

API ウォーターフォール図のタイムライン原点は、API が要求を送信した時刻とページの fetchStart タイムスタンプとの差分に等しくなります。これにより、各 API 要求がページ読み込みライフサイクルに対してどのタイミングで発行されたかが明らかになります。