Record browser sessions

Set up session recording for a browser target.

Splunk recorder parameters

Here are the optional parameters that you can set in SplunkSessionRecorder.init:

Parameter Type Description
maskAllInputs boolean Show or hide values of input elements in the replay. If set to true, user interaction with inputs is replaced by animation. Default: true.
maskAllText boolean Show or hide text in the replay. If text is hidden, it is replaced by black bars. Default: true.
maxExportIntervalMs number Time in milliseconds after which you will always get a segment if there is any data. This does not ensure you will always get a segment after that time; at the beginning of the replay, segments are created at a faster pace to ensure they can be sent reliably. Default: 5000.
sensitivityRules array of SensitivityRule objects Specific handling of sensitivity rules to mask, unmask, or exclude parts of the page being recorded. Default: [].
features object Features to toggle on or off. For default settings, see below.
sampler object Optional session sampler that determines which user sessions are recorded. Applies to entire session. Use SplunkRum.SessionBasedSampler to create a sampler with a fixed sampling ratio (for example, ratio: 0.5). Example: new SplunkRum.SessionBasedSampler({ ratio: 0.5 }) // record ~50% of sessions
realm String

The name of your organization's realm. To find the realm name of your account, open the navigation menu in Splunk Observability Cloud, select Settings, and then select your username. The realm name appears in the Organizations section.

Example: us0.
rumAccessToken String (required)

RUM token that authorizes the agent to send telemetry data to Splunk Observability Cloud. To generate a RUM access token, see Generate your RUM access token in Splunk Observability Cloud.
Splunk recorder's sensitivityRules array

The sensitivityRules array gives you fine-grained control over what is recorded. You can mask, unmask, or exclude specific elements on the page from being recorded. Put general rules at the beginning of the array, and more specific rules at the end of the array.

Available rule types:

  • mask: Replace the content of the element with black bars.

  • unmask: Show the content of a masked element.

  • exclude: Exclude the element from the recording. We do not record any interaction with this element; instead, in the replay, we show a DIV element with the same size and position

Parameter Type Description
rule string Type of sensitivity. Valid values: 'mask', 'unmask', 'exclude'.
selector string

CSS selector for sensitive elements.

For example:

  • p.sensitive selects all p elements with class="sensitive".

  • ul ~ table selects all table elements that are siblings of a ul element.

Example:

JSON 
{
  sensitivityRules: [
    { rule: 'mask', selector: '.mask-example' },
    { rule: 'unmask', selector: '.unmask-example' },
    { rule: 'exclude', selector: '.exclude-example' },
  ]
}
Splunk recorder's features object

The features object provides a way for you to toggle the following features on or off:

Parameter Type Description
backgroundServiceSrc string Link to the published background-service.html. This helps to avoid blocking the main thread during data processing. Default: undefined.
canvas boolean When set to true, the canvas is recorded. Default: false.
video boolean When set to true, the video is recorded. Default: false.
iframes boolean When set to true, same-origin iframes are recorded. Default: false.
packAssets boolean | object When set to true, includes assets like images, CSS, and fonts in the recording. Otherwise, you will need to use a service like an assets proxy to serve the files from a remote location during playback. You can also specify which type of assets you want to pack by providing a config object. Default: { styles: true }.
cacheAssets boolean When set to true, any asset (such as images, CSS files, and so on) found on the page will have its URL stored in the local storage cache. This ensures that the asset is not processed multiple times, even after the page is reloaded. Default: false.

Example:

JSON 
{
  features: {
    backgroundServiceSrc: 'https://example.xyz/background-service.html',
    canvas: true,
    video: true,
    iframes: true,
    packAssets: {
      fonts: true, 
      images: true,
      styles: true,
    },
    cacheAssets: true,
  }
}
rr-web migration guide

The Splunk RUM browser agent version 1.0.0 removed rrweb and introduced the splunk built-in recorder. We've mapped some rr-web parameters to their Splunk recorder alternative, as shown in the table below. This mapping will make your migration from the rrweb recorder to Splunk as seamless as possible.

Name Migrated to Migration support Note
blockClass sensitivityRules Partial Cannot migrate regular expressions.
blockSelector sensitivityRules Full
ignoreClass sensitivityRules Partial Cannot migrate regular expressions
maskTextClass sensitivityRules Partial Cannot migrate regular expressions
maskTextSelector sensitivityRules Full
maskAllInputs maskAllInputs Full
maskInputOptions None For security reasons, you must manually migrate this parameter.
maskInputFn None For security reasons, you must manually migrate this parameter.
maskTextFn None For security reasons, you must manually migrate this parameter.
inlineStylesheet features.packAssets.styles Full
inlineImages features.packAssets.images Full
collectFonts features.packAssets.fonts Full
recordCanvas features.canvas Full
  1. In your browser's page header, add a script that runs splunk-otel-web-session-recorder.js immediately below the script that runs splunk-otel-web.js:
    Important: Replace the <version> placeholder in src with a version from https://github.com/signalfx/splunk-otel-js-web/releases.
    CODE 
    <script src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web.js" crossOrigin="anonymous"></script>
<script-that-runs-splunk-otel-web-session-recorder>

    where <script-that-runs-splunk-otel-web-session-recorder> is a script that runs splunk-otel-web-session-recorder.js from the Splunk CDN, from a self-hosted location, or from NPM:

    • Splunk CDN

      CODE 
      <script src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web-session-recorder.js" crossOrigin="anonymous"></script>

    • Self-hosted: This assumes you've already downloaded the desired version of splunk-otel-web-session-recorder.js and saved this file in a location accessible by the users of your browser page.

      CODE 
      <script src="<your-self-hosted-path>/splunk-otel-web-session-recorder.js" crossOrigin="anonymous"></script>

    • NPM

      1. Use the following command to set up session replay with NPM through a package named @splunk/otel-web-session-recorder:

        CODE 
        npm install @splunk/otel-web-session-recorder

      2. Next, initialize this code snippet:

        PYTHON 
        import SplunkSessionRecorder from '@splunk/otel-web-session-recorder'
  2. In your browser's page header, below the scripts that run splunk-otel-web.js and splunk-otel-web-session-recorder.js, initialize the Splunk RUM browser agent and the session recorder package, SplunkSessionRecorder.init, in the order shown below:
    Tip: Using the new Splunk recorder is improves session replay capabilities.
    JSON 
    <script>
    SplunkRum.init({
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        applicationName: 'your-app-name',
        version: 'your-app-version',
        deploymentEnvironment: 'your-environment-name'
    });
</script>
<script>
    SplunkSessionRecorder.init({
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        recorder: 'which-session-recorder-to-use'
    });
</script>
Putting it all together, your browser page header should look something like this:
JSON 
<script src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web.js" crossOrigin="anonymous"></script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web-session-recorder.js" crossOrigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        applicationName: 'your-app-name',
        version: 'your-app-version',
        deploymentEnvironment: 'your-environment-name'
    });
</script>
<script>
    SplunkSessionRecorder.init({
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        recorder: 'splunk'
    });
</script>