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.
Attention: This documentation mentions a product that is currently only available as an early preview ("Beta"). Splunk AppDynamics reserves the right to change the Beta and its documentation including the content herein, at any time, for any reason, and without notice or compensation to you before making it generally available as well as never making it generally available. This documentation is not a guarantee of future product features and should not be relied upon in making any purchasing decisions. Actual product results may vary from forward-looking statements due to factors including but not limited to: changes in Splunk AppDynamics and third-party technologies, factors related to the economy and target markets, acquisitions of other companies, the hiring and termination of personnel, and other factors. Please refer to the full terms at https://www.splunk.com/en_us/legal/appdynamics-limited-license-agreement.html for details.

前提条件

セッションリプレイを使用するには、次の条件が満たされていることを確認してください。

  • コントローラ 25.4 以降
  • JavaScript エージェント 25.5
セッションリプレイを使用するには、管理コンソールにログインして次のプロパティを追加します。
  1. [Account Settings] に移動します。

    1. [Add Property] をクリックし、browser.session.replay.enabled を追加します。プロパティの値を 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.

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

sessionReplayUrlHttpsstring(Required) Endpoint where you want to send the captured session data (EUM cloud URL).
packAssetsbooleantrue

Packs the website assets like images, CSS, and fonts in the recorded. If this option is disabled, the recording only keeps the asset URLs which will fetch the assets at the time of replay.

iframesbooleantrueRecords the same-origin iframes.
imageB itmapbooleanfalseEnable this option to capture the canvas and video content for richer session replay.
maskAllInputsbooleantrueMasks all <input> fields to protect user-entered sensitive data.
maskAllTextbooleanfalseMasks all textual content across the page.
sensitivityRulesArray[]

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

sensitvityRules:
[
    {rule: <Type>, selector: <Css Elements>}
]

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

  • exclude: Skips the information.
  • mask: Masks the information.
  • unmask: Unmasks the information.

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

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

Overrides the default replay script location.

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

enableReplayFolderVersioningbooleantrueUses 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 のセッションリプレイの表示

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