Record browser sessions

Set up session recording for a browser target.

You must have an enterprise subscription.
You must use Splunk Browser RUM agent version 0.23.1 or higher.

Splunk recorder parameters

If you set recorder: 'splunk', here are the optional parameters that you can also 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.

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:

{
  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, etc.) 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:

{
  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 recorder parameters

You can use the existing set of parameters as specified in rr-web documentation. 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

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.
```
<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
```
<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.
```
<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:
```
npm install @splunk/otel-web-session-recorder
```
  2. Next, initialize this code snippet:
```
import SplunkSessionRecorder from '@splunk/otel-web-session-recorder'
```
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 Browser RUM agent and the session recorder package, SplunkSessionRecorder.init, in the order shown below:
To use the new session recorder that this private preview provides, set the recorder parameter in SplunkSessionRecorder.init to 'splunk'. Otherwise, it defaults to the legacy recorder, 'rrweb'.
Tip: Using the new Splunk recorder is improves session replay capabilities.
```
<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({
        app: 'your-app-name',
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        recorder: 'which-session-recorder-to-use'
    });
</script>
```
(Optional) Set parameters in the SplunkSessionRecorder.init method.
- For parameters related to the new session recorder, see Splunk recorder parameters.
- For parameters related to the legacy session recorder, see rr-web recorder parameters.

Putting it all together, your browser page header should look something like this:

<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({
        app: 'your-app-name',
        realm: 'your-realm',
        rumAccessToken: 'your-splunk-rum-token',
        recorder: 'splunk'
    });
</script>

Documentation

Record browser sessions