Session Replay

How it works#

When captureReplay: true (default), Reliable starts an rrweb recorder on init. rrweb captures DOM mutations, mouse movements, scroll events, and input changes, everything needed to faithfully replay the page later in the dashboard.

Events are buffered in a rolling 30-second window. When an error or crash fires, the buffer is compressed (gzip) and sent alongside the error payload. Replays are linked to errors by event UUID, open any error in the dashboard and you'll see a "Watch replay" button.

Storage and bandwidth#

A 30-second rrweb buffer of a typical SaaS page is about 30-80 KB after gzip, roughly the size of a medium PNG. Replays are uploaded only when an error fires, so on healthy sessions there's no replay traffic at all.

Privacy by default#

rrweb is invasive by nature, it records the DOM. Reliable enables aggressive defaults to keep PII out of replays:

• All <input> values are masked. Text inputs show as ▪▪▪▪ in the replay.
• Password fields, credit card inputs, and SSN fields are fully blocked: not even the input element shape is recorded.
• iframe contents are not recorded by default (cross-origin iframes wouldn't be anyway).
• Web fonts and images are recorded as references, not embedded, so the dashboard streams them at playback time.

Opting specific text into the replay#

If you want certain elements to be visible in replay (button labels, headings, non-PII content), add the data-rr-allow attribute:

<!-- Visible in replay -->
<h1 data-rr-allow>Welcome back</h1>
<button data-rr-allow>Continue</button>

<!-- Default: masked in replay -->
<input type="text" placeholder="Search" />

Blocking elements from the replay entirely#

For elements that contain sensitive data (PII tables, billing info, internal IDs), use data-rr-block. Blocked elements appear as solid grey blocks in the replay:

<div data-rr-block>
  <h2>{user.name}</h2>
  <p>{user.email}</p>
  <p>{user.phone}</p>
</div>

Disabling replay#

If you don't want session replay at all (regulatory, performance, philosophical reasons), turn it off:

init({
  publicKey: 'pk_live_rl_...',
  captureReplay: false,
});

Performance impact#

rrweb's recording cost is dominated by the full DOM snapshot taken at start (a few ms on a typical page). After that, only deltas are recorded, sub-millisecond per mutation. On most apps the impact is unmeasurable. On extremely DOM-heavy pages (10,000+ nodes, like rich data grids), you may see a ~3-5% main thread cost during heavy interactions.