設定方法

ブラウザ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エージェントを構成します：

インストルメンテーション設定

特定のブラウザ 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 オプションで対応しているすべてのプロパティを以下の表に示します：

サンプリング設定

デフォルトでは、ブラウザ RUM エージェントはすべてのユーザーからすべてのデータを収集します。カスタムサンプラーを tracer プロパティに渡すことで、サンプリングを調整できます。

次の例は、サンプリングをログインしているユーザーに制限する方法を示しています：

CDN

<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 SplunkRum.AlwaysOnSampler() : new SplunkRum.AlwaysOffSampler(),
      },
   });
</script>

npm

// 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データを収集する方法を示しています：

CDN

<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>

npm

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 エージェントで使用されているものと一致していることを確認してください。

エクスポート設定

デフォルトでは、Browser RUMエージェントはZipkinエクスポーターを使用してデータをSplunk Observability Cloudに送信します。

バージョン 0.17.0 以降では、OTLP エクスポータを使用するように RUM エージェントを設定できます。次の例は、OTLP エクスポータを使用するように RUM インストルメンテーションを設定する方法を示しています。

   SplunkRum.init({
      realm: '<realm>',
      rumAccessToken: '<your_rum_token>',
      applicationName: '<application-name>',
      deploymentEnvironment: '<deployment-env>',
      exporter: {
         otlp: true
      },
   });

beaconEndpoint を手動で設定する場合は、OTLP エンドポイントとして https://rum-ingest.<realm>.signalfx.com/v1/rumotlp を使用します。エンドポイントは exporter.otlp が true で、realm が設定されている場合に自動的に設定されます。

ブラウザRUMエージェントが使用するクッキー

ブラウザ RUMエージェントは、以下のクッキーを使用して、トレースをセッションにリンクします：