Splunk ブラウザ RUM インストルメンテーションを設定する 🔗
OpenTelemetry JS for Web の Splunk ディストリビューションから ブラウザ RUM エージェントを設定することで、カスタム属性の追加、環境やアプリケーションに合わせたインストルメンテーション、サンプリングのカスタマイズなどを行うことができます。
設定方法 🔗
ブラウザRUMエージェントを設定するには、SplunkRum.init()
関数に渡されるオブジェクトを編集します:
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
SplunkRum.init(
{
realm: 'us0',
rumAccessToken: 'ABC123...789',
applicationName: 'my-awesome-app',
version: '1.0.1'
// Any additional settings
});
</script>
一般設定 🔗
以下の設定を使用して、ブラウザRUMエージェントを構成します:
プロパティ |
タイプ |
説明 |
---|---|---|
|
文字列 |
組織のレルム名、例えば |
|
文字列(必須) |
エージェントがテレメトリデータを Splunk Observability Cloud に送信することを許可する RUM トークン。RUM アクセストークンを生成するには、Generate your RUM access token in Splunk Observability Cloud を参照してください。 |
|
文字列( |
エージェントが収集したテレメトリを送信するインジェスト URL。 |
|
文字列 |
アプリケーションの名前。デフォルト値は |
|
文字列 |
全スパンのアプリケーションのバージョン。例えば、」1.0.1 「または 「20220820」。 |
|
文字列 |
アプリケーションによって生成されるすべてのスパンの環境。例えば、 |
|
オブジェクト |
すべてのスパンに追加される属性を設定します。例えば、 |
|
オブジェクト |
特定のブラウザRUMインストルメンテーションをアクティブまたは非アクティブにします。インストルメンテーション設定 を参照してください。 |
|
|
エージェントが無視しなければならないURLのリスト。一致するURLはスパンを生成しません。文字列または正規表現の2種類のルールを指定できます。 |
|
文字列 |
セッショントラッキングに使用されるドメイン。たとえば、 |
|
ブーリアン |
非同期コンテキストマネージャーを有効にします。デフォルト値は |
|
|
エクスポート前にspan属性を修正するためのコールバックを提供します。デフォルト値は |
|
オブジェクト |
|
|
ブーリアン |
開発者コンソールのデバッグロギングを有効にします。デフォルト値は |
インストルメンテーション設定 🔗
特定のブラウザRUMインストルメンテーションをアクティブまたは非アクティブにするには、オブジェクトを構成し、instrumentations
プロパティに渡します。以下のエージェント初期化の例は、いくつかのインストルメンテーションの設定を変更します:
SplunkRum.init(
{
beaconEndpoint: 'https://rum-ingest.us0.signalfx.com/v1/rum',
rumAccessToken: 'ABC123…789',
applicationName: 'my-awesome-app',
instrumentations:
{
interactions:
{
// Adds``gamepadconneted`` events to the
// list of events collected by default
eventNames: [
...SplunkRum.DEFAULT_AUTO_INSTRUMENTED_EVENT_NAMES,
'gamepadconnected'
],
},
longtask: false, // Deactivates monitoring for longtasks
websocket: true, // Activates monitoring for websockets
},
});
instrumentations
オプションで対応しているすべてのプロパティを以下の表に示します:
プロパティ |
デフォルト |
説明 |
---|---|---|
|
|
接続イベントの収集をアクティブにします。接続性 を参照してください。 |
|
|
ドキュメント読み込みイベントに関連するスパンの収集をアクティブにします。ドキュメントのロード を参照してください。 |
|
|
JavaScript エラーの収集をアクティブにします。ブラウザRUMエージェントが収集したエラー を参照してください。 |
|
|
Fetch API リクエストの収集をアクティブにします。XHRとFetchインストルメンテーション を参照してください。 |
|
|
クリックやキーの押下などのユーザーインタラクションの収集をアクティブにします。ユーザーインタラクション を参照してください。 |
|
インストルメンテーションがユーザーインタラクションとして捕捉する DOM イベントの配列。 |
|
|
|
長いタスクの収集をアクティブにします。長いタスク を参照してください。 |
|
|
socket.io メッセージの収集をアクティブにします。Socket.io メッセージ を参照してください。 |
|
|
ロードイベントの後にロードされたリソースの収集をアクティブにします。ロード後のリソース を参照してください。 |
|
|
socket.io クライアントをロードするグローバル変数名、または |
|
|
可視性イベントの収集をアクティブにします。可視性 を参照してください。 |
|
|
ウェブソケットのライフサイクルイベントの収集をアクティブにします。ウェブソケット を参照してください。 |
|
|
Google Web Vitalsメトリクスの収集を有効に し ます。ウェブバイタル を参照してください。 |
|
|
XMLHttpRequest イベントの収集をアクティブにします。XHRとFetchインストルメンテーション を参照してください。 |
サンプリング設定 🔗
デフォルトでは、ブラウザ RUMエージェントは、すべてのユーザーからすべてのデータを収集します。tracer
プロパティにカスタムサンプラーを渡すことで、サンプリングを調整できます。
次の例は、サンプリングをログインしているユーザーに制限する方法を示しています:
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
var shouldTrace = isUserLoggedIn();
SplunkRum.init({
realm: '<realm>',
rumAccessToken: '<your_rum_token>',
applicationName: '<application-name>',
tracer: {
sampler: shouldTrace ? new AlwaysOnSampler() : new SplunkRum.AlwaysOffSampler(),
},
});
</script>
// When using npm you can get samplers directly from @opentelemetry/core
import {AlwaysOnSampler, AlwaysOffSampler} from '@opentelemetry/core';
import SplunkOtelWeb from '@splunk/otel-web';
SplunkOtelWeb.init({
beaconEndpoint: 'https://rum-ingest..signalfx.com/v1/rum',
rumAccessToken: '<your_rum_token>',
applicationName: '<application-name>',
tracer: {
sampler: userShouldBeTraced() ? new SplunkRum.AlwaysOnSampler() : new SplunkRum.AlwaysOffSampler(),
},
});
Splunk Distribution of OpenTelemetry JS for Web には、以下のサンプラーが含まれています:
サンプラー |
説明 |
---|---|
|
すべてのリクエストでサンプリングを有効にします。これはデフォルトのサンプラーです。 |
|
全リクエストで停止されたサンプリング。 |
|
親トレースのサンプラー設定を継承します。 |
|
セッションベースのサンプリング。セッションベースのサンプラー を参照してください。 |
セッションベースのサンプラー 🔗
Splunk Distribution of OpenTelemetry JS for Web には、セッションをサポートするカスタムサンプラーが含まれています。セッション比率はトレース比率よりも望ましい状態です。
セッションベースのサンプラーには、以下の方法でアクセスできます:
Splunk CDN ビルドを使用する場合は、
SplunkRum.SessionBasedSampler
エクスポートを使用します。npmパッケージを使用する場合は、
SessionBasedSampler
エクスポートを使用します。
セッションベースのサンプラーは、以下の設定を受け付けます:
オプション |
タイプ |
デフォルト値 |
説明 |
---|---|---|---|
|
|
|
報告されたセッションの割合、範囲は |
|
|
|
セッションのサンプリング時に使用するサンプラー。 |
|
|
|
セッションをサンプリングしない場合に使用するサンプラー。 |
次の例は、セッションの半分からRUMデータを収集する方法を示しています:
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
SplunkRum.init({
realm: '<realm>',
rumAccessToken: '<your_rum_token>',
applicationName: '<application-name>',
tracer: {
sampler: new SplunkRum.SessionBasedSampler({
ratio: 0.5
}),
},
});
</script>
import SplunkOtelWeb, {SessionBasedSampler} from '@splunk/otel-web';
SplunkOtelWeb.init({
realm: '<realm>',
rumAccessToken: '<your_rum_token>',
applicationName: '<application-name>',
tracer: {
sampler: new SessionBasedSampler({
ratio: 0.5
}),
},
});
非同期トレース設定 🔗
プロミスチェーンになるユーザーインタラクションのような、非同期に起こるトレースは、親アクティビティから切り離される可能性があります。この問題を回避するために、ブラウザ RUMエージェントは、以下のプロパティまたはパターンを使用しているときに発生するトレースと親トレースを接続するカスタムコンテキストマネージャーを含んでいます:
setTimeout
34ms以下のタイムアウトsetImmediate
requestAnimationFrame
Promise.then
/catch
/finally
textNode
上のMutationObserver
MessagePort
ハッシュ・ベース・ルーター
非同期トレース・リンクはデフォルトで有効になっています。互換性の問題がある場合は、context.async
プロパティを false
に設定することで、無効にすることができます。
コンテキストマネージャーにより、Splunk RUM はコンポーネントが最初にレンダリングされたときに実行されたリクエストを、アプリケーションがコンポーネントをページに追加する原因となったユーザーインタラクションにリンクさせることができます。XMLHttpRequest
イベントと Fetch API イベントは、promise メソッドを介して親コンテキストを保持するようにパッチされます。
制限事項 🔗
非同期トレースを使用する場合、以下の制限が適用されます:
async/await
関数はサポートされていません。Babelを使用して古いブラウザをターゲットにコードをダウンコンパイルします。document.getElementById('save-button').addEventListener('click', async () => { const saveRes = await fetch('/api/items', {method: 'POST'}); const listRes = await fetch('/api/items'); // Can be disconnected from click event when not transpiled });
プロミスベースの実装によってロードされたコードだけが、親インタラクションにリンクされます。
コンテキスト伝播の設定 🔗
ブラウザ RUM エージェントは、Server-Timing
ヘッダーから traceparent
データを収集するため、コンテキストプロパゲータを登録しません。必要であれば、OpenTelemetry API を使ってコンテキストプロパゲータを登録できます:
import {propagation} from '@opentelemetry/api';
import {B3Propagator} from '@opentelemetry/propagator-b3';
propagation.setGlobalPropagator(new B3Propagator());
OpenTelemetry APIを直接呼び出す場合は、使用しているAPIのバージョンが、ブラウザ RUMエージェントで使用されているものと一致していることを確認してください。
エクスポート設定 🔗
By default, the Browser RUM agent uses the Zipkin exporter to send data to Splunk Observability Cloud.
Starting from version 0.17.0 and higher, you can configure the RUM agent to use the OTLP exporter. The following example shows how to configure the RUM instrumentation to use the OTLP exporter:
SplunkRum.init({
realm: '<realm>',
rumAccessToken: '<your_rum_token>',
applicationName: '<application-name>',
deploymentEnvironment: '<deployment-env>',
exporter: {
otlp: true
},
});
When setting the beaconEndpoint
manually, use https://rum-ingest.<realm>.signalfx.com/v1/rumotlp
as the OTLP endpoint. The endpoint is set automatically when exporter.otlp
is true
and a realm
is configured.