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.