セッションリプレイ（Session Replay）の導入方法¶

設定¶

表内のinterval/cooldownのデフォルト値はCanvas 2D用です。WebGLプラグインでこれらの2つの項目が明示的に設定されていない場合は、より控えめなGPU読み戻しリズムが維持され、readPixels のコストがデフォルトで拡大されるのを防ぎます。

表内のデフォルト値は、low、medium、high の文字列プリセットを使用していない場合に適用されます。文字列プリセットは品質、sampling、interval、cooldown、unchanged/failure backoff、max-per-runを同時に置き換えます。明示的な個別設定はプリセット内の対応する値を上書きします。画像品質のみを変更したい場合は、replayCanvasQuality に 0 から 1 の間の数値を渡してください。詳細なマトリックスは Canvas記録ユーザーマニュアル を参照してください。

Canvas 2D記録設定はSDK 3.3.0 から利用可能です。WebGLリプレイはSDK 3.3.7 から提供され、RUMメインパッケージのバージョン >= 3.3.7 が必要です。また、WebGLプラグインはメインパッケージと同じSDKリリースバージョンを使用することを推奨します。

Session Replay を有効にする¶

以前のSDK導入方法に従い、NPMパッケージを > 3.0.0 バージョンに置き換えるか、元のCDNリンクを https://static.guance.com/browser-sdk/v3/dataflux-rum.js に置き換えてください。SDKの init() 後、自動的にSession Replay Recordデータを収集することはありません。startSessionReplayRecording を実行してデータ収集を開始する必要があります。これは、特定の状況でのみSession Replay Recordデータを収集する場合に便利です。例：

// ユーザーログイン後の操作データのみを収集
if (user.isLogin()) {
  DATAFLUX_RUM.startSessionReplayRecording()
}

Session Replayデータ収集を停止する必要がある場合は、stopSessionReplayRecording() を呼び出して停止します。

NPM¶

@cloudcare/browser-rumパッケージを導入し、@cloudcare/browser-rum のバージョンが > 3.0.0 であることを確認してください。記録を開始するには、初期化後に datafluxRum.startSessionReplayRecording() を実行してください。

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: '<DATAFLUX_APPLICATION_ID>',
  datakitOrigin: '<DATAKIT ORIGIN>',
  service: 'browser',
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 70,
  trackInteractions: true,
})

datafluxRum.startSessionReplayRecording()

CDN¶

元のCDNアドレス https://static.guance.com/browser-sdk/v2/dataflux-rum.js を https://static.guance.com/browser-sdk/v3/dataflux-rum.js に置き換え、DATAFLUX_RUM.init() の実行後に DATAFLUX_RUM.startSessionReplayRecording() を実行してください。

<script
src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
type="text/javascript"
></script>
<script>
window.DATAFLUX_RUM &&
window.DATAFLUX_RUM.init({
    applicationId: '<DATAFLUX_APPLICATION_ID>',
    datakitOrigin: '<DATAKIT ORIGIN>',
    service: 'browser',
    env: 'production',
    version: '1.0.0',
    sessionSampleRate: 100,
    sessionReplaySampleRate: 100,
    trackInteractions: true,
})

window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
</script>

エラー関連のSession Replayデータのみを収集する方法（SDKバージョン要件 ≥3.2.19）{#sessionReplayOnErrorSampleRate}¶

機能説明¶

ページでエラーが発生した場合、SDKは自動的に以下の操作を実行します。

1. 遡及収集：エラー発生 1分前 の完全なページスナップショットを記録
2. 継続記録：エラー発生時点からセッション終了まで継続的に記録
3. スマート補完：独立したサンプリングチャネルによりエラーシナリオの完全なカバレッジを確保

設定例¶

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
// SDKコア設定の初期化
window.DATAFLUX_RUM && window.DATAFLUX_RUM.init({
   // 必須パラメータ
   applicationId: '<DATAFLUX_APPLICATION_ID>',
   datakitOrigin: '<DATAKIT_ORIGIN>',

   // 環境識別子
   service: 'browser',
   env: 'production',
   version: '1.0.0',

   // サンプリング戦略設定
   sessionSampleRate: 100,          // 全量ベースセッション収集 (100%)
   sessionReplaySampleRate: 0,       // 通常の画面録画サンプリングをオフ
   sessionReplayOnErrorSampleRate: 100, // エラーシナリオを100%サンプリング

   // 補助機能
   trackInteractions: true          // ユーザー行動追跡を有効化
});

// 画面録画エンジンを強制的に起動（必須）
window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording();
</script>

Canvas 記録について¶

Canvas記録はデフォルトでは自動的に有効になりません。実際に動作させるには、少なくとも以下の条件をすべて満たす必要があります。

• Session Replayがサンプリングされていること
• つまり、sessionReplaySampleRate > 0 であるか、sessionReplayOnErrorSampleRate にヒットしていること
• startSessionReplayRecording() が呼び出されていること
• replayCanvasEnabled: true が設定されていること
• 対象要素がCanvas 2Dであること。WebGL/WebGL2の場合はさらにWebGLリプレイプラグインの追加登録が必要です。

manual モードを使用する場合は、さらにアプリケーションコードから明示的に呼び出す必要があります。

datafluxRum.snapshotCanvas(canvas)

Canvas関連パラメータのうち必須とみなすべきもの¶

実際に導入する際は、以下の項目を必須とみなすことを推奨します。

• sessionReplaySampleRate
• replayCanvasEnabled: true
• replayCanvasMode

replayCanvasMode === 'auto' の場合は、さらに明示的に設定します。

• replayCanvasSampling
• 正の数値：自動スナップショットパスを選択します。2 から始めることを推奨します。
• 'all'：より高い再現度の自動記録。描画プロセスの再現を重視するページに適しています。
• replayCanvasAutoInterval
• 自動スナップショットのスケジューリング間隔を制御します。数値sampling自体はCanvas 2Dの頻度を制御しません。

3つの推奨最小構成¶

手動記録¶

datafluxRum.init({
  applicationId: 'Your Application ID',
  datakitOrigin: '<DataKit Domain Name or IP>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'manual',
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

自動スナップショット¶

datafluxRum.init({
  applicationId: 'Your Application ID',
  datakitOrigin: '<DataKit Domain Name or IP>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 2,
  replayCanvasAutoInterval: 250,
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

自動高再現度記録¶

datafluxRum.init({
  applicationId: 'Your Application ID',
  datakitOrigin: '<DataKit Domain Name or IP>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 'all',
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

CSP シナリオ¶

サイトのCSPが worker-src blob: を許可しない場合、以下のように設定できます。

datafluxRum.init({
  // ...
  replayCanvasWorkerUrl: '/canvas-worker.js'
})

注意点：

• replayCanvasWorkerUrl はCanvasスナップショットエンコードのみに影響します。
• これは workerUrl の代替ではありません。
• すべてのCanvasフレームがCanvas Workerを使用するわけではありません。

詳細は CSPセキュリティポリシー を参照してください。

Canvas 2D、WebGL/WebGL2の完全な機能範囲、オプションプラグインの導入、パフォーマンスに関する推奨事項は Canvas記録ユーザーマニュアル を参照してください。WebGLプラグインはRUMメインパッケージと同じSDKバージョンを使用する必要があり、WebGLエンジンがコンテキストを作成するか描画メソッドをキャッシュする前にRUM init() を完了する必要があります。

注意事項¶

特定のHTML要素が再生時に表示されない¶

セッションリプレイは以下のHTML要素をサポートしていません。iframe、ビデオ、オーディオ。Session ReplayはWeb ComponentsおよびShadow DOMをサポートしていません。

FONT または IMG が正しく表示されない¶

Session Replayはビデオではなく、DOMスナップショットに基づいて再構築されたiframeです。そのため、リプレイはページのさまざまな静的リソース（fontやimage）に依存します。

以下の理由により、リプレイ時に静的リソースが利用できない可能性があります。

• 静的リソースがすでに存在しない。例えば、以前のデプロイの一部であった場合。
• 静的リソースにアクセスできない。例えば、認証が必要な場合や、内部ネットワークからのみアクセス可能な場合。

• CORS（通常はWebフォント）により、ブラウザが静的リソースをブロックする。

• リプレイ時は、iframeに対応する guance.com サンドボックス環境に基づいているため、特定のドメインが許可されていない静的リソースがある場合、ブラウザはそのリクエストをブロックします。

• Access-Control-Allow-Originヘッダーを介して guance.com が、リプレイのためにアクセスする必要のあるすべてのfontやimage静的リソースへのアクセスを許可するように設定してください。

詳細については、クロスオリジンリソース共有 を参照してください。

CSS style が正しく適用されない、またはマウスホバーイベントがリプレイされない¶

fontやimageとは異なり、Session Replay Recordは CSSStyleSheet インターフェースを利用して、適用された各種CSSルールをレコードデータの一部としてバンドルしようとします。これが実行できない場合、CSSファイルのリンクを記録するフォールバックが行われます。

正しいマウスホバーサポートを得るには、CSSStyleSheetインターフェースを介してCSSルールにアクセスできる必要があります。

スタイルファイルがウェブページとは異なるドメインでホストされている場合、CSSルールへのアクセスはブラウザのクロスオリジンセキュリティチェックの対象となり、ブラウザがCORSを利用するスタイルファイルを crossorigin 属性を使用して読み込むように指定する必要があります。

例えば、アプリケーションがexample.comドメインにあり、link要素を介してassets.example.com上のCSSファイルに依存している場合、crossorigin 属性は anonymous に設定する必要があります。

<link rel="stylesheet" crossorigin="anonymous"
      href="https://assets.example.com/style.css”>

さらに、assets.example.comでexample.comドメインを許可します。これにより、リソースファイルは Access-Control-Allow-Origin ヘッダーを設定して正しくリソースを読み込むことができます。

関連情報¶