Session recording

Open in ChatGPTOpen in Claude

Session Recording

Session Recording enhances your user experience monitoring by enabling you to record and visually replay the web browsing activities of your users.

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.
    immediateFlush: false, // Flush recording events immediately on start to capture short-duration sessions (<10s). Defaults to false.
  },
});

Recording Manually

You can always start/stop your session recording manually as follows:

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

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

Privacy & Security

To protect your users’ privacy and sensitive information, elements containing certain 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.
  },
});

Example:

<div class="rr-block">Dont record me</div>

Element	Action
.rr-block	An element with the class name .rr-block will not be recorded. Instead, it will replay as a placeholder with the same dimension.
.rr-ignore	An element with the class name .rr-ignore will not record its input events
.rr-mask	All text of elements and their children will be masked.

If you want to mask all of your inputs and texts in the session, you can use the following configuration:

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    // ...
    maskAllInputs: true,
    maskTextSelector: '*',
  },
});

Worker Url

By default, Session recording uses an inline web worker script to compress data before transmission. For added flexibility, you can host a custom worker script on your own domain. Simply host the following file on your server: worker.min.js

For a locally hosted worker file:

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    // ...
    workerUrl: '/assets/worker.min.js',
  },
});

For an externally hosted worker file:

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    // ...
    workerUrl: 'https://cdn.rum-ingress-coralogix.com/coralogix/browser/latest/worker.min.js',
  },
});

Screenshots

Screenshot is a feature that allows you to capture a screenshot of the user's screen at the time of an error or based on specific custom logic triggers.
Note that the Screenshot feature is a subset of session recording and shares the same configurations, including options like masking, sample rate and others.
sessionRecordingConfig must be enabled to use this feature.

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    enable: true,
    // ...
  },
});

Capture a screenshot manually:

CoralogixRum.screenshot();
// or with a description
CoralogixRum.screenshot('Screenshot after the user logged in');

Capture a screen automatically based on custom logic, using the beforeSend

CoralogixRum.init({
  // ...
  beforeSend: (event) => {
    // ...
    // automatically take a screenshot when an error occurs and append the screenshot id to the event
    if (event.event_context.type === 'error' && event.session_context.user_name === 'CEO') {
      const id = CoralogixRum.screenshot('creating a screenshot due to an error!');
      event.screenshotId = id;
    }

    return event;
  },
});