Docs » Splunk Observability Cloud でサポートされているインテグレーション » モバイルおよび Web アプリケーションを Splunk RUM でインストルメンテーションする » Splunk RUM でブラウザベースの Web アプリケーションをインストルメンテーションする » ブラウザRUMのインストルメンテーション固有のデータ

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

Splunk RUM for Browser collects the following data through instrumentation. To activate or deactivate instrumentations, see インストルメンテーション設定.

ドキュメントのロード 🔗

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 の一連のイベントを示しています。

この画像は、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 関数の第一引数。

このページは 2024年11月13日 に最終更新されました。