> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# RUM session replay

> Record privacy-aware rrweb DOM snapshots and replay real browser sessions in MoleSignal.

Session replay records the browser DOM as a full snapshot followed by timestamped incremental changes.
MoleSignal reconstructs those events in a sandboxed, non-interactive player.

Replay is disabled by default.

## Enable sampled replay

```ts theme={null}
const rum = initRum({
  applicationId: 'checkout-web',
  clientToken: 'msrum_your_client_token',
  site: 'https://molesignal.example.com',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  sessionReplay: {
    blockSelector: '[data-molesignal-block]',
    maskTextSelector: '[data-molesignal-mask]',
    ignoreSelector: '[data-molesignal-ignore]',
  },
});
```

`sessionReplaySampleRate` is evaluated only for sessions included by `sessionSampleRate`. See
[RUM data sampling](/en-US/rum/sampling) for the effective-rate calculation.

## Start or stop recording manually

```ts theme={null}
rum.startSessionReplayRecording();

// Stop before a sensitive workflow that should never be recorded.
rum.stopSessionReplayRecording();
```

Manual start applies only to a session already selected by `sessionSampleRate`. Starting recording
creates a new full DOM snapshot so the replay can be reconstructed.

## Recorded events

The recorder captures:

* full DOM snapshots and incremental DOM mutations;
* pointer movement and clicks;
* scrolling and viewport changes;
* input interaction with values masked;
* stylesheet state and accessible inline styles;
* media state supported by rrweb.

A periodic full snapshot is recorded every five minutes by default. Configure a value from 30 seconds
through 30 minutes with `checkoutInterval`:

```ts theme={null}
sessionReplay: {
  checkoutInterval: 5 * 60_000,
},
```

## Privacy controls

All input values are masked. With the default `defaultPrivacyLevel: 'mask'`, all page text is also
masked. Define block, mask, and ignore selectors before enabling production replay.

```html theme={null}
<div data-molesignal-block>Payment details</div>
<span data-molesignal-mask>Customer name</span>
<canvas data-molesignal-ignore></canvas>
```

Read [RUM privacy](/en-US/rum/privacy) for selector semantics and a production review checklist.

## Optional high-volume capture

The following options are disabled by default because these options can substantially increase payload and
storage size:

```ts theme={null}
sessionReplay: {
  collectFonts: false,
  inlineImages: false,
  recordCrossOriginIframes: false,
},
```

Cross-origin frame recording also requires cooperation from the framed application. Canvas pixels
are not replayed by the MoleSignal player. Prefer DOM representations or placeholders for canvas-heavy
content.

## Transport and retention

Replay uses a separate queue and defaults to a 10-second flush interval with 100 events per batch.
Use `replayFlushInterval` and `replayBatchSize` to tune client behavior. MoleSignal compresses replay
segments in object storage and expires stored segments with the deployment's `compactor.retention_days` policy.

## Verify replay

<Steps>
  <Step title="Record a non-sensitive test journey">
    Navigate through multiple pages, click controls, scroll, and trigger one DOM update.
  </Step>

  <Step title="Open the session">
    Go to **RUM → Session replay** and open the newly recorded session.
  </Step>

  <Step title="Check reconstruction and masking">
    Verify the page structure, event timing, progress controls, blocked regions, and masked values.
  </Step>

  <Step title="Check the availability filter">
    A session appears as replayable only after MoleSignal receives a valid full DOM snapshot.
  </Step>
</Steps>

<CardGroup cols={2}>
  <Card title="Data sampling" icon="sliders" href="/en-US/rum/sampling">
    Estimate replay coverage and volume.
  </Card>

  <Card title="Privacy" icon="shield" href="/en-US/rum/privacy">
    Define the recording boundary before rollout.
  </Card>
</CardGroup>