ドキュメントのロード

document インストルメンテーションは、Window:load イベントが発生するまでにロードされるリソースに関するスパンを生成します。生成されるルートスパンは documentLoad です。documentFetch および resourceFetch スパンの parentID は documentLoad.id です。

ページロード要求に Server-Timing ヘッダーがある場合、RUM はデータを使用して documentFetch スパンを対応するバックエンドスパンにリンクします。ブラウザ RUM エージェントは、script、link、css - font、iframe、XHR/fetch、img、favicon、manifest.json などのリソースも収集し、Server-Timing ヘッダーが存在する場合は、それらを APM トレースにリンクします。

documentLoad

ブラウザ RUMエージェントは、documentLoad インストルメンテーションを使用して、以下のデータを収集します：

以下の注釈は、PerformanceNavigationTiming インターフェイスに関する W3C 仕様で指定されているナビゲーションのタイミングから収集されたものです：

この図は、documentLoad の一連のイベントを示しています。

documentFetch

ブラウザ RUMエージェントは、documentFetch インストルメンテーションを使用して、以下のデータを収集します：

resourceFetch

ブラウザ RUMエージェントは、resourceFetch インストルメンテーションを使用して、以下のデータを収集します：

XHRとFetchインストルメンテーション

xhr および fetch インストルメンテーションは、XMLHttpRequest イベントと Fetch API イベントを収集します。スパンは、component タグの値で xml-http-request と fetch が区別されます。

このインストルメンテーションは、スパンの名前の前に HTTP メソッド名を付加します。インストルメンテーションのマップ先となっているバックエンドの応答に Server-Timing ヘッダーが含まれる場合は、バックエンドのトレースとのリンクも生成されます。

ブラウザ RUMエージェントは、XHRおよびFetchインストルメンテーションを使用して、以下のデータを収集します：

• http.method

• http.response_content_length

• http.host

• http.scheme

• http.status_code

• http.status_text

• http.user_agent

• http.url

XHRインストルメンテーションとFetchインストルメンテーションは、以下のイベントがいつ発生するかを示すタイムスタンプでスパンに注釈を付けます：

XHR および Fetch インストルメンテーションが収集する注釈については、「リクエストタイミング注釈」に説明があります。

ウェブバイタル

webvitals インストルメンテーションは、Google Web Vitals メトリクスに関するデータを収集します。ブラウザ RUM エージェントは、期間がゼロのスパンとして Web Vitals メトリクスを収集します。すべてのスパンには指定された traceId があり、親スパンはありません。

ブラウザ RUMエージェントは、webvitals インストルメンテーションを使用して、以下のデータを収集します：

ロード後のリソース

postloadインストルメンテーションは、ページ load イベント後にロードされるリソースに関するデータを収集します。デフォルトでは、インストルメンテーションは <script> および <img> リソースのインストルメンテーションをアクティブにします。通常、postload インストルメンテーションは、scroll イベントで画像をロードするときにテレメトリを収集するために使用します。

postload で収集されたスパンは、「resourceFetch」で説明されているデータモデルと一致します。

ユーザーインタラクション

interactions インストルメンテーションは、Element.addEventListener タイプのイベントリスナーが登録されているエレメント上のインタラクションのテレメトリデータを収集します。リスナーによって収集されたイベントは、DOM イベント名と一致する名前でスパンを生成します。

ブラウザ RUMエージェントは、interactions インストルメンテーションを使用して、以下のデータを収集します：

可視性

visibility インストルメンテーションは、visibilitychange イベントを収集します。ブラウザのタブがまったく表示されない場合があるため、ページが更新されたときに起こる可視性の変化は記録されません。

ブラウザ RUMエージェントは、visibility インストルメンテーションを使用して、以下のデータを収集します：

接続性

connectivity インストルメンテーションは、offline と online イベントを収集します。ブラウザがオフラインになると、ブラウザはオフラインイベントを記録し、ブラウザがオンラインになるまでメモリにキャッシュされます。オフラインイベントとオンラインイベントは同時に送信されます。

ブラウザ RUMエージェントは、connectivity インストルメンテーションを使用して、以下のデータを収集します：

履歴API

ブラウザ RUM エージェントは、History API をインストルメンテーションして、ブラウザのセッション履歴を可視化できるようにします。History API は、ページをリロードせず、単一ページのアプリケーションで使用される URL 変更を追跡します。

インストルメンテーションはまた、hashchange イベントをリッスンすることで、location.hash を変更して発生する URL の変更も追跡します。ルート変更には期間がありません。routeChange スパンには次のタグが含まれます。

長いタスク

longtask インストルメンテーションは、長いタスクに関する情報を収集します。ブラウザ RUM エージェントは、検出されたすべての長いタスクに対してスパンを作成します。

スパン属性には、そのタスクが発生したコンテナが含まれます。トップレベルページ内で発生しないタスクについては、containerId、containerName、containerSrc フィールドがタスクのソースについての情報を提供します。

ブラウザ RUMエージェントは、longtask インストルメンテーションを使用して、以下のデータを収集します：

ウェブソケット

websockets インストルメンテーションは、WebSocket のライフサイクルイベントを収集し、それを使用してスパンを生成します。インストルメンテーションでは、WebSocket connect、send、onmessage イベントからスパンを収集します。

connect

websockets インストルメンテーションは、connect イベントから以下のデータを収集します：

send と onmessage

websockets インストルメンテーションは、send と onmessage イベントから以下のデータを収集します：

Socket.io メッセージ

Socket.io インストルメンテーションは、socket.io クライアントライブラリを使用して送信されたメッセージからスパンを生成します。スパンは、メッセージングシステムの OpenTelemetry 仕様に準拠しています。このインストルメンテーションはデフォルトで非アクティブ化されています。

スタンドアロンのsocket.ioビルドを使用する場合は、次のスニペットのように、true をコンフィギュレーション設定に渡してインストルメンテーションを有効にします：

<script src="/location/to/splunk-otel-web.js"></script>
<script>
   SplunkRum.init({
      // ...
      instrumentations: {
         socketio: true
      }
   });
</script>
<script src="/socket.io/socket.io.js"></script>

@splunk/otel-web と socket.io-client の両方の npm パッケージを同じバンドルで使用する場合は、target の設定を使用して、socket.io クライアントをインストルメンテーションに渡します：

import SplunkOtelWeb from '@splunk/otel-web';
import { io } from 'socket.io-client';
SplunkRum.init({
// ...
   instrumentations: {
      socketio: {
         target: io,
      },
   },
});

Splunk RUM の CDN ディストリビューションを使用する場合は、以下の例のように socket.io インストルメンテーションを有効にして io 関数を window.ioとして公開します。

<script src="/location/to/splunk-otel-web.js"></script>
<script>
SplunkRum.init({
   // ...
   instrumentations: {
      socketio: true
   }
});
</script>
<script src="/app.min.js"></script>

先ほどの例の app.min.js ファイルの内容は以下の通りです：

import { io } from 'socket.io-client';
window.io = io;
const socket = io();
// ...

ターゲットにグローバル変数名を指定すれば、別のグローバル変数名を使うことができます：

SplunkRum.init({
// ...
instrumentations: {
   socketio: {
      target: 'socketIoClient',
      },
   },
});
// Expose the io object in your bundle
window.socketIoClient = io;

socket.io のクライアントとサーバー間で送信されるメッセージは、クライアントからサーバーへ送信される場合は EVENT_NAME send スパン、サーバーからクライアントへ送信される場合は EVENT_NAME receive スパンを生成します。どちらのタイプのスパンにも、次の属性が含まれます。