Our next-gen architecture is built to help you make sense of your ever-growing data. Watch a 4-min demo video!

Back to All Docs

Session Replay

Last Updated: Apr. 21, 2024

Optimize user experience monitoring by recording and replaying user sessions with Session Replay.

Overview

Creating exceptional user experiences is paramount in the fast-paced software development world. To achieve this, developers must understand their users’ interactions, identify pain points, and ensure seamless functionality.

Session Replay enhances your user experience monitoring by enabling you to record and visually replay the web browsing activities of your users. When combined with Real User Monitoring (RUM) performance data, Session Replay is invaluable for pinpointing, tracking, and resolving errors. It also provides insights into your web application’s usage patterns and design flaws.

How It Works

The Session Replay recorder is part of the RUM Browser SDK, whether NPM or CDN.

The recording tool captures a snapshot of the browser’s DOM by actively monitoring and logging events occurring on a web page, including but not limited to DOM modifications, mouse movements, clicks, input events, and their respective timestamps.

Coralogix then reconstructs the web page and re-implements the recorded events at the appropriate moments in the replay view.

Configuration

Configure Session Replay as follows:

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    enable: true, // Must declare.
    /**
     * If autoStartSessionRecording is false, you can manually start & stop your session recording.
     * Refer to Recording Manually Section.
     **/
    autoStartSessionRecording: true, // Automatically records your session when SDK is up.
    recordConsoleEvents: true, // Will record all console events from dev tools. Levels: log, debug, warn, error, info, table etc..
    sessionRecordingSampleRate: 100, // Percentage of overall sessions recording being tracked, defaults to 100% and applied after the overall sessionSampleRate.
  },
});

Privacy & Security

To protect your users’ privacy and sensitive information, elements containing specific class names are blocked or masked in recordings, as follows:

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    // ..
    blockClass: 'rr-block', // Use a string or RegExp to redact all elements that contain this class, defaults to rr-block.
    ignoreClass: 'rr-ignore', // Use a string or RegExp to Ignore all events that contain this class, defaults to rr-ignore.
    maskTextClass: 'rr-mask', // Use a string or RegExp to mask all elements that contain this class, defaults to rr-mask.
    maskAllInputs: false, // Mask all input content as * (Default false), refer to Input types.
    maskInputOptions: { password:true } // Mask some kinds of input as *, By Default the SDK masking password inputs.
  },
});

For example:

<div class="rr-block">Dont record me</div>
ElementAction
.rr-blockThe element will not be recorded. It will replay as a placeholder with the same dimension.
.rr-ignoreThe element will not record input events.
.rr-maskAll text of elements will be masked.

Manage Session Recordings

Start & Stop Recordings

To manually start and stop recordings, use the following code snippet:

// To start manually the Session Recording
CoralogixRum.startSessionRecording();

// To stop the Session Recording
CoralogixRum.stopSessionRecording();

Avoid Performance Impact

Session Replay works by recording incremental DOM changes in your web application. To avoid performance issues, the feature will stop recording if it detects an excessive number of mutations. The default is set to 5,000.

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    // ...
    // According to MutationObserver API, A large number of DOM mutations can negatively impact performance
    maxMutations: 5000
  },
});

Getting Started

STEP 1. Click on the play icon of a specific user session in the User Sessions Grid or error in the Error Grid.

STEP 2. You will be redirected to the SESSION REPLAY tab.

Replay Screen

The Replay Screen offers users a dynamic interface to relive recorded sessions with advanced control options, ensuring a seamless and insightful playback experience.

  • Play & Pause: Users can effortlessly control the playback by pausing and resuming the video at their convenience
  • Speed Control: The replay speed can be adjusted to suit user preferences
  • Interaction Focus: Skipping directly to stages with user interactions enhances efficiency.
  • 0-Second Skip: The ability to skip forward and backward by 10 seconds offers precise navigation.

Console

The Console presents users with an immersive environment to explore recorded sessions comprehensively, combining various elements for an enriched understanding of user interactions and application behavior. Observe Console output – your application’s internal logs and messages – in sync with user actions.

Data Usage

To reduce costs and lessen the network load caused by Session Replay, Coralogix compresses the data before sending it. Coralogix eases the strain on a browser’s user interface thread by assigning CPU-heavy tasks, like compression, to a separate web worker.

We apply the following logging pipeline to Session Replay data:

Logs prioritySent dataUnits
Low (Compliance)1 GB0.12

Limitations

Session Replay records up to one hour of activity.

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to contact us via our in-app chat or by emailing support@coralogix.com.

On this page