❗️

Session Replay is in Early Beta and only available for Javascript applications. Because this is a beta, we may need to make changes along the way and cannot guarantee stability

Session Replay Beta.

We believe this is a big step forward in helping developers see exactly what led to an error, and we’re excited to have your help co-creating the future of this feature. This beta is only available for web-based JavaScript applications. I f you are interested in joining our beta please join our early access list .

Installation & Enabling Session Replay in Rollbar

To use Rollbar's new session replay feature and privacy controls, follow these steps:

1. Install or upgrade to the latest Alpha Rollbar SDK:

   npm install [email protected]

2. Import and initialize Rollbar Replays with the recorder option:

For existing Rollbar connected projects

//Your current Rolllbar config
config = {
  // ... your existing config
  recorder: {
    enabled: true
  }
}

If loading the client from the CDN:

CDN_URL = https://cdn.rollbar.com/rollbarjs/refs/tags/v3.0.0-alpha.5/rollbar.min.js

For new Rollbar connected projects.
Follow the Quick Start guide that matches your application at https://docs.rollbar.com/docs/javascript and add the above configuration

Recorder Options

Trigger Options

‼️ Important: Additional options for triggering replays will be introduced as we expand capabilities during the beta phase.

Trigger Example:

recorder: {
  triggers: [ 
     { 
        type: 'occurrence', 
        level: ['warning', 'error', 'critical', 'info'],
  			samplingRatio: 1.0 
      }
  ]
}

Trigger Example to more severe occurrences

recorder: {
   triggers: [
      {
        type: 'occurrence',
        level: ['critical'],
        samplingRatio: 1.0,
      },
      {
        type: 'occurrence',
        level: ['error'],
        samplingRatio: 0.5,
      },
      {
        type: 'occurrence',
        level: ['warning'],
        samplingRatio: 0.1,
      },
  ]
}

Troubleshooting: Enable Debug Logging

If you want to debug your session replay settings and see what events are being emitted, you can enable debug logging in the recorder config:

   recorder: {
     enabled: true,
     autoStart: true,
     debug: {
       logEmits: true
     },
     // ...privacy options below
   }

With debug.logEmits: true, Rollbar will log emitted session replay events and privacy actions to the browser console.

Adding Privacy to your recording

This document explains how to use the blockSelector, ignoreSelector, and maskTextSelector options in the Rollbar session replay recorder configuration:

recorder: {
  enabled: true,
  autoStart: true,
  blockClass: 'rb-block',
  blockSelector: '.my-blocked-class, #sensitive-section',
  ignoreClass: 'rb-ignore',
  ignoreSelector: '.my-ignore-class, #ignore-this-input',
  maskTextClass: 'rb-mask',
  maskTextSelector: '.my-mask-class, #mask-this',
  maskAllInputs: false,
  maskInputOptions: {
    password: true,
    email: true
  }
}

Privacy Config Options Table

recorder: {
    blockClass: 'my-block'
    ignoreClass: 'my-ignore'
    maskTextClass: 'my-mask'
}

What do these options do?

Block

• Purpose: Lets you specify a CSS selector (string) to block elements from being recorded in session replay, in addition to the default blockClass (e.g., .rb-block).
• How it works in Rollbar: Any element matching this selector (and its children) will be replaced with a placeholder in the session replay. The content is not recorded at all.
• Example:

  blockSelector: '.my-blocked-class, #sensitive-section'

This would block all elements with the class .my-blocked-class and the element with the id #sensitive-section from being recorded in Rollbar session replay.

Ignore

• Purpose: Let's you specify a CSS selector to ignore input events for elements, in addition to the default ignoreClass (e.g., .rb-ignore).
• How it works in Rollbar: Any element matching this selector will not have its input events (such as typing, changes, etc.) recorded. The element itself is still present in the replay, but user interactions are not.
• Example:

  ignoreSelector: '.my-ignore-class, #ignore-this-input'

This would ignore input events for all elements with class .my-ignore-class and the element with id #ignore-this-input in Rollbar session replay.

• Beta Notes: This feature is not currently implemented for individual inputs. Expected in by July 15th

Mask Text

• Purpose: Let’s you specify a CSS selector to mask text content for elements, in addition to the default maskTextClass (e.g., .rb-mask).
• How it works in Rollbar: Any element matching this selector will have its text content (and input values) masked in the replay, even if it doesn't have the .rr-mask class.
• Example:

  maskTextSelector: '.my-mask-class, #mask-this'

This would mask all text content and input values for elements with class .my-mask-class and the element with id #mask-this in Rollbar session replay.

• Beta Notes: This feature is not currently implemented for individual inputs. As a work around will need to use maskAllInputs:true if you are worried about PII inside your inputs.

Default `maskInputOptions`

{
  "password": true,
  "email": false,
  "tel": false,
  "text": false,
  "color": false,
  "date": false,
  "datetime-local": false,
  "month": false,
  "number": false,
  "range": false,
  "search": false,
  "time": false,
  "url": false,
  "week": false
}

Why use selectors in Rollbar?

• Selectors enable you to apply privacy controls to elements without needing to add classes directly in your code, or to target elements that are generated dynamically or by third-party libraries.
• You can use both the class-based and selector-based options together. If an element matches either, the privacy rule applies.

Best Practices

• Always test your selectors in your app to ensure the correct elements are masked, blocked, or ignored in Rollbar session replay.
• Use selectors for dynamic or third-party content where you can't easily add classes.
• Combine class and selector options for maximum flexibility.

Advanced Options

Replay Size and Accuracy Options

Default `slimDOMOptions`

{
  "script": true,
  "comment": true,
  "headFavicon": true,
  "headWhitespace": true,
  "headMetaDescKeywords": true,
  "headMetaSocial": true,
  "headMetaRobots": true,
  "headMetaHttpEquiv": true,
  "headMetaAuthorship": true,
  "headMetaVerification": true
}

Common Questions

Will adding Session Replay impact the performance of my application?

Our replay recorded increases the over-the-wire page load by 70kb

Does Session Replay meet GDPR compliance?

Yes, our current implementation will meet GDPR compliance requirements. Please be aware that you will need to update your website's compliance if you add session replay.

Where are the replays stored?

Replays are stored on our secure servers

What is the data retention on sessions ?

Replays are connected to occurrences and will share the same data-retention periods as your occurrences.