ブラウザRUMのインストルメンテーション固有のデータ 🔗

Splunk RUM for Browser は、自動インストルメンテーションによって以下のデータを収集します。インストルメンテーションを有効または無効にするには、インストルメンテーション設定を参照してください。

ドキュメントのロード 🔗

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 インストルメンテーションを使用して、以下のデータを収集します：

Name	タイプ	説明
`document.referrer`	文字列	参照ページのURI。例えば、`https://subdomain.example.com` です。
`screen.xy`	文字列	ディスプレイの幅と高さ。例えば、`2560x1440` です。

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

Name	タイムスタンプ
`fetchStart`	ブラウザがリソースのフェッチを開始する直前。
`unloadEventStart`	ユーザーエージェントが前の文書のアンロードイベントを開始する直前。
`unloadEventEnd`	ユーザーエージェントが前の文書のアンロードイベントを終了した直後。
`domInteractive`	ユーザーエージェントが現在の文書の準備完了を`インタラクティブ` に設定する直前。
`domContentLoadedEventStart`	ユーザーエージェントが現在のドキュメントで `DOMContentLoaded` イベントを発生させる直前。
`domContentLoadedEventEnd`	現在の文書の `DOMContentLoaded` イベントが完了した直後。
`domComplete`	ユーザーエージェントが現在の文書の準備完了を`完了`に設定する直前。
`loadEventStart`	現在のドキュメントのロードイベントが発生する直前。
`loadEventEnd`	現在の文書のロードイベントが完了したとき。

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

documentFetch 🔗

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

Name	タイプ	説明
`http.response_content_length`	数字	ペイロードボディから受け取ったドキュメントのサイズ。
`link.traceId`	文字列	APM エージェントが設定した `Server-Timing` レスポンスヘッダーから収集したトレース識別子。
`link.spanId`	文字列	APM エージェントが設定した `Server-Timing` レスポンスヘッダーから収集したスパン識別子。

resourceFetch 🔗

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

Name	タイプ	説明
`http.response_content_length`	数字	ペイロードボディから受け取ったドキュメントのサイズ。
`http.url`	文字列	リクエストされたリソースのURL。
`link.traceId`	文字列	APM エージェントが設定した `Server-Timing` レスポンスヘッダーから収集したトレース識別子。
`link.spanId`	文字列	APM エージェントが設定した `Server-Timing` レスポンスヘッダーから収集したスパン識別子。

注釈

Safari 10.1は resourceFetch スパンをサポートしていません。

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

xhr と fetch のインストルメンテーションは、XMLHttpRequest イベントと Fetch API イベントを収集します。スパンは、xml-http-request と fetch を区別する component タグの値で異なります。

このインストルメンテーションは 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インストルメンテーションは、以下のイベントがいつ発生するかを示すタイムスタンプでスパンに注釈を付けます：

イベント	タイプ	説明
`open`	数字	XHR `open` イベントが発生する UNIX エポックでの時間。マイクロ秒単位でインストルメンテーションされます。
`send`	数字	XHR `send` イベントが発生する時刻。
`load`	数字	XHR `load` イベントが発生する時刻。
`"error"`	数字	XHR `"error"` イベントが発生する時刻。
`timeout`	数字	XHR `timeout` イベントが発生する時刻。
`abort`	数字	XHR `abort` イベントが発生する時刻。

XHRおよびFetchインストルメンテーションによって収集されたアノテーションは、タイミング注釈のリクエストで説明されています。

ウェブバイタル 🔗

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

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

Name	ウェブバイタル	説明
`lcp`	最大コンテンツの描画	ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間をキャプチャすることにより、読み込みパフォーマンスを測定します。
`fid`	最初の入力遅延	ユーザーとのインタラクションから、そのインタラクションに反応してブラウザがイベントハンドラの処理を開始するまでのタイムスタンプを取得することで、インタラクティブ性を測定します。
`cls`	累積レイアウトシフト	ページのライフスパン全体で発生する予期せぬレイアウトシフトごとに、個々のレイアウトシフトスコアの合計を取得することで、視覚的な安定性を測定します。レイアウトシフトは、あるレンダリングフレームから次のレンダリングフレームへ、可視要素が位置を変えるたびに発生します。
`inp`	次のペイントへの相互作用	ユーザーがページ上で行ったすべてのインタラクションのレイテンシを観察することで応答性を測定し、最も遅い値を報告します。

ロード後のリソース 🔗

postload インストルメンテーションは、ページ load イベント後にロードされるリソースに関するデータを収集します。デフォルトでは、<script> と <img> リソースのインストルメンテーションを有効にします。通常、scroll イベントで画像をロードする際に、 postload インストルメンテーションを使用してテレメトリを収集します。

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

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

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

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

Name	タイプ	説明
`event_type`	文字列	イベント名。例えば、`click` 。
`target_element`	文字列	ターゲット要素の名前。例えば、`BUTTON` 。
`target_xpath`	文字列	ターゲット要素のXPath。

可視性 🔗

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

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

Name	タイプ	説明
`hidden`	ブーリアン	ページが非表示かどうか。

接続性 🔗

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

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

Name	タイプ	説明
`online`	ブーリアン	ブラウザがオンラインになったかオフラインになったか。

履歴API 🔗

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

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

Name	タイプ	説明
`component`	文字列	値は常に `"user-interaction"` です。
`prev.href`	文字列	ルート変更前のページURL
`location.href`	文字列	ルート変更後のページURL

長いタスク 🔗

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

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

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

Name	タイプ
`longtask.name`	文字列
`longtask.entry_type`	数字
`longtask.duration`	数字
`attribution.name`	文字列
`attribution.entry_type`	文字列
`attribution.start_time`	数字
`attribution.duration`	数字
`attribution.container_type`	文字列
`attribution.container_src`	文字列
`attribution.container_id`	文字列
`attribution.container_name`	文字列

ウェブソケット 🔗

websockets インストルメンテーションは、ウェブソケットのライフサイクル・イベントを収集し、それを使用してスパンを生成します。このインストルメンテーションは、ウェブソケット connect 、send 、onmessage イベントからスパンを収集します。

connect 🔗

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

Name	タイプ	説明
`http.url`	文字列	ウェブソケットのURL。
`duration`	数字	ウェブソケットのコンストラクタ呼び出しから `ws.open` イベントが発生するまでの経過時間。
`protocols`	文字列または配列	ウェブソケットのコンストラクタに渡されるプロトコル。
`error`	文字列	エラー発生の有無によって、値は `true` または `false` のいずれかとなります。エラーはウェブソケット構築中または `ws.error` イベントが発生したときに収集されます。
`error`	文字列	ウェブソケットのエラー・イベント・メッセージ。

send と onmessage 🔗

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

Name	タイプ	説明
`http.url`	文字列	ウェブソケットのURL。
`response_content_length`	数字	バイト単位のペイロードサイズ。

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 instrumentation を有効にして 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 です。どちらのスパンも以下の属性を持ちます：

Name	タイプ	説明
`messaging.system`	文字列	値は常に `socket.io` です。
`messaging.destination` `messaging.socket.io.namespace`	文字列	socket.io 名前空間の値。
`messaging.destination_kind`	文字列	値は常に `topic` です。
`messaging.socket.io.event_name`	文字列	イベントの名前、`emit` または `on` 関数の第一引数。

This page was last updated on 2024年01月17日.

Related Topics