Session Replay for Browser RUM

Session Replay allows you to monitor user activity within mobile applications by recording interactions such as clicks, scrolls, and navigation. It captures these interactions as dynamic, video-like journeys, along with detailed session metadata. This provides teams with clear insight into the user experience, especially when issues arise. You can watch the session replay to:

  • Optimise the user experience.
  • Debug the errors for application crashes.
  • Diagnose the reasons for application slowness.

Session Replay Licenses

Session Replay is an add-on license available for the packages: RUM Peak, Browser RUM-Pro, Browser RUM-Peak, Mobile RUM-Pro, and Mobile RUM-Peak. For more information, see Session Replay.

Prerequisites

Ensure that the following conditions are met to use Session Replay:

  • Controller >= 25.10
  • JavaScript Agent >= 25.9
Log in to the administration console and add the following property to use Session Replay:
  1. Go to Account Settings.

    1. Click Add Property and add browser.session.replay.enabled. Set the value of this property to true.

JavaScript エージェントの構成

javascript アプリケーションでのセッションリプレイを報告するには、次のように javascript エージェントを構成します。
  1. コントローラ UI にログインします。
  2. 対象のブラウザアプリケーションを開きます。
  3. 左のナビゲーションメニューで、[Configuration] を選択します。
  4. [Configure JavaScript Agent] を選択します。
  5. [Configure Session Replay] で、[Enable Session Replay] を選択します。
    configure-session-replay-JavaScript-agent

Configure Session Replay Using API Parameters

After this configuration, copy the instrumentation script and inject it in the JavaScript Agent.

JSON
(function(config){
    // ... other JSAgent configs
  
    config.sessionReplay = {
        enabled: true,
        sessionReplayUrlHttps: ""
        // ... other optional configs
    };
})(window["adrum-config"] || (window["adrum-config"] = {}));

enabled

Set this parameter to true to enable Session Replay.

sessionReplayUrlHttps

(Required)

Type: String

Enter the endpoint where you want to send the captured session data (EUM cloud URL).

packAssets

Type: boolean

Default:
JSON
packAssets: true | {
   fonts?: false
   images?: false
   styles?: true
}

This parameter packs the website assets like images, CSS, and fonts in the recorded.

This parameter only bundles the styles by default. This default setting ensures the optimized usage of your bandwidth. You can modify this setting to bundle fonts and images if required.
注: As a best practice, avoid changing the default settings.
JSON
packAssets: boolean | {
   fonts?: boolean
   images?: boolean
   styles?: boolean
}
注: If you set this option to false, the recording only keeps the asset URLs which will fetch the assets during replay.

iframes

Type: boolean

Default: true

Records the same-origin iFrames.

imageBitmap

Type: boolean

Default: false

Enable this option to capture the canvas and video content for richer session replay.

maskAllText

Type: boolean

Default: false

Masks all textual content across the page.

maskAllInputs

Type: boolean

Default: true

Masks all <input> fields to protect user-entered sensitive data.

persistence

Type: boolean

Default: false

During frequent site refreshes or navigation, Session Replay data may be lost. To prevent this, set it to true to enable local storage persistence for your Session Replay data.

sensitivityRules

Type: Array

Fine-tunes element-level privacy masking. Follow the syntax to include sensitivityRules:

JSON
sensitivityRules:[{rule:&lt;Type&gt;, selector:&lt;Css Elements&gt;}]

There are three rule types that apply to the information within specified CSS object in the recording:

  • exclude: Skips the information.
  • mask: Masks the information.
  • unmask: Unmasks the information.
Example:
JSON
sensitivityRules: [{ rule: "exclude", selector: "img" },{ rule: "mask", selector: ".sensitive-field" },{ rule: "unmask", selector: ".public-info" }]

sessionReplayScriptUrl

Type: string

Overrides the default replay script location.

Generally: adrumExtUrlHttps + "adrum/session-replay/" + agentVersion

enableReplayFolderVersioning

Type: boolean

Uses agent version folders for compatibility. Set to false to serve from a flat structure (e.g., https://your-cdn.com/replay).

セッションリプレイの有効化

管理者はセッションリプレイのみを有効にできます。選択したブラウザアプリケーションのセッションリプレイを有効にするには、以下のオプションを実行します。
  1. コントローラ UI にログインします。
  2. 対象のブラウザアプリケーションを開きます。
  3. 左のナビゲーションメニューで、[Configuration] を選択します。
  4. **[インストルメンテーション(Instrumentation)]** をクリックします。
  5. [Session Replay] タブで、[Enable Session Replay] を選択します。
    BRUM のセッションリプレイの有効化。

セッションリプレイの表示

  1. [User Experience > Browser Apps] に移動します。
  2. セッションリプレイを有効にしたアプリケーションを選択します。
  3. [Sessions] を選択します。
  4. 記録が可能な場合、[Session Replay] に再生アイコンが表示されます。
  5. [Session Replay] タブを展開します。

[Session Replay] は、セッションのアクティブなセグメントを強調表示します。録画またはユーザー アクティビティがない場合は、空白の画面が表示されます。

ブラウザ RUM のセッションリプレイの表示

再生速度を調整できます。