Session Replay

Overview

Session Replay expands your user experience monitoring by allowing you to capture and visually replay the web browsing experience of your users. Combined with RUM performance data, Session Replay is beneficial for error identification, reproduction, and resolution, and provides insights into your web application’s usage patterns and design pitfalls.

The RUM Browser SDK is open source and leverages the open source rrweb project.

Session Replay recorder

The Session Replay recorder is part of the RUM Browser SDK. The recorder takes a snapshot of the browser’s DOM and CSS by tailing and recording events happening on a web page (such as DOM modification, mouse move, clicks, and input events) along with these events’ timestamps.

Datadog then rebuilds the web page and re-applies the recorded events at the appropriate time in the replay view. Session Replay follows the same 30 day retention policy as normal RUM sessions.

The Session Replay recorder supports all browsers supported by the RUM Browser SDK with the exception of IE11. For more information, see the browser support table.

To reduce Session Replay’s network impact and ensure the Session Replay recorder has minimal overhead on your application’s performance, Datadog compresses the data prior to sending it. Datadog also reduces the load on a browser’s UI thread by delegating most of the CPU-intensive work (such as compression) to a dedicated web worker. The expected network bandwidth impact is less than 100kB/min.

Setup

Session Replay is available in the RUM Browser SDK. To start collecting data for Session Replay, set up Datadog RUM Browser Monitoring by creating a RUM application, generating a client token generation, and initializing the RUM Browser SDK.

Enable Session Replay

Change the npm package name or CDN URL, depending on your chosen installation method:

npm

Replace the @datadog/browser-rum package with a version >3.6.0 of @datadog/browser-rum. To start the recording, call datadogRum.startSessionReplayRecording().

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: '<DATADOG_APPLICATION_ID>',
    clientToken: '<DATADOG_CLIENT_TOKEN>',
    site: '<DATADOG_SITE>',
    //  service: 'my-web-application',
    //  env: 'production',
    //  version: '1.0.0',
    sessionSampleRate: 100,
    sessionReplaySampleRate: 100,
    trackResources: true,
    trackLongTasks: true,
    trackUserInteractions: true
});

datadogRum.startSessionReplayRecording();

CDN

Replace the RUM Browser SDK URL https://www.datadoghq-browser-agent.com/datadog-rum.js with https://www.datadoghq-browser-agent.com/datadog-rum-v4.js. When DD_RUM.init() is called, the Session Replay recording does not start until DD_RUM.startSessionReplayRecording() is also called.

Configuration

You can use the RUM Browser SDK’s initialization parameters.

The Session Replay does not start recording automatically when calling init(). To start the recording, call startSessionReplayRecording(). This can be useful to conditionally start the recording, for example, to only record authenticated user sessions:

if (user.isAuthenticated) {
    DD_RUM.startSessionReplayRecording();
}

To stop the Session Replay recording, call stopSessionReplayRecording().

Disable Session Replay

To stop session recordings, remove startSessionReplayRecording() and set sessionReplaySampleRate to 0. This stops collecting data for Browser RUM & Session Replay plan, which includes replays.

In order to apply these configurations, upgrade the RUM Browser SDK to a version >= 3.6.