Session Replay

Session Replay records DOM changes and user interactions in the browser and attaches the recording to captured exceptions, so you can see exactly what happened leading up to an error.

How it will work

The recorder is built on rrweb (opens in a new tab). It records the DOM into segments that rotate on a fixed interval. When an exception is captured, the current segments are attached to it and uploaded, and the recording appears on the exception detail page in the dashboard as a Session Replay card.

Recording is planned to be on by default in the browser SDK, and switchable off with a single option.

Planned options

Privacy & Masking

Because the recorder runs on rrweb, rrweb's standard class hooks apply to any element in your app, with no SDK configuration. They are the mechanism for keeping sensitive content out of recordings, so it is worth adding them to your markup before the SDK ships rather than after.

rr-mask: block all text in an element

Put class="rr-mask" on any element whose text content should never be recorded. The element is still captured — layout, clicks and scrolls all work in the replay — but every character of text, including the text of child elements, is replaced with asterisks.

<!-- Name visible in the app, hidden in replays -->
<span class="rr-mask">Ada Lovelace</span>
 
<!-- The entire row's text is masked -->
<tr class="rr-mask">
  <td>INV-2291</td>
  <td>1,240.00</td>
</tr>

Use it for anything you treat as PII or regulated data: names, emails, customer IDs, amounts, addresses, health information, chat content, support tickets.

rr-block: hide the element entirely

Put class="rr-block" on an element you do not want visible at all. It is replaced by a neutral grey placeholder with the same dimensions. Good for avatars, user-uploaded images and custom widgets that should not be reconstructed.

<img class="rr-block" src="/avatars/u_42.png" alt="" />

rr-ignore: do not record input values

Put class="rr-ignore" on a form input when you want interaction events — focus, blur, click — captured but not the characters the user typed.

<input class="rr-ignore" type="text" name="search" />

What is masked by default

Exactly one thing is masked without any markup on your side:

• <input type="password">. The value is never captured.

Nothing else is automatic. The recorder does not recognize attributes such as data-sensitive or aria-masked, so text inside those elements would be recorded in full. Every other piece of sensitive content needs one of the rr-* classes above.

Segment rotation

Recordings are split into segments to bound memory use. Every 30 seconds by default the current segment is finalized and a new one begins with a fresh DOM snapshot. A longer segment duration means fewer rows and fewer object-storage reads when reassembling a session, at the cost of replay granularity; 30 s is calibrated for typical browser apps.

Always-on recording

By default the recorder only ships clips when an exception fires. With recordAllSessions enabled, every segment is uploaded continuously and a parent session row is produced:

• A persistent session ID is generated at SDK initialization, and again after a bfcache restore.
• Each segment is uploaded as it rotates, linked to the parent session by session ID and segment index.
• Sessions end on 15 minutes of inactivity, 60 minutes of total duration, or pagehide. The closing payload is dispatched with fetch keepalive so it survives navigation.
• Logs and actions are flushed onto each segment as it rotates, drained from the rolling buffer so nothing is counted twice.
• Exceptions captured during the session still produce their own clip on the issue page and stamp the parent session ID, so the dashboard can link through to the full session.

Sessions get their own page in the dashboard, with attribute filters and full-session replay. See Sessions for the feature itself.

Next steps

• Exceptions: what a captured exception carries
• Initialization: the rest of the planned option surface