Session Replay That Shows You What Your Users See

The loader and the capture library

The Clairvio integration is split into two distinct JavaScript artifacts. The first is a small loader — under 1 kB minified and gzipped — that you add to every page via a single <script> tag. The loader does almost nothing on a normal page load: it registers one listener and exits. Because it contains no replay logic, no tracking code, and no third-party dependencies, it has zero measurable impact on Lighthouse scores or Core Web Vitals for your ordinary visitors.

The second artifact is the full capture library. It is never fetched unless a valid magic link token is present in the URL query string. When a customer opens a diagnostic link, the loader detects the token, dynamically inserts the capture script, and initialises a WebSocket connection back to the Clairvio ingestion endpoint. This lazy-load architecture means your regular users are never exposed to the capture overhead.

DOM serialisation

Once active, Clairvio records the session. It works by taking a full snapshot of the DOM at session start — serialising every element, attribute, text node, and computed style into a compact JSON representation — and then continuously listening to a MutationObserver for incremental changes. Rather than storing pixel frames like a screen recording, it stores a stream of structural diffs. A typical session produces under 1 MB of replay data, compared to hundreds of megabytes for an equivalent video file.

Pointer position, scroll depth, viewport resizes, and form inputs are recorded as discrete timestamped events on the same clock as the DOM mutations. During playback, Clairvio re-hydrates the serialised DOM inside an isolated iframe and re-applies the event stream frame by frame, producing a pixel-perfect reconstruction of exactly what the customer saw.

Four parallel capture streams

In addition to the DOM replay, Clairvio captures three supplementary streams simultaneously: console output (every console.log, console.warn, and console.error call with its arguments and stack trace), network activity (every XMLHttpRequest and fetch call with request method, URL, status code, timing, and configurable payload capture), and navigation events (every pushState, replaceState, and popstate transition). All four streams share the same millisecond-resolution clock so you can scrub to any point in the replay and immediately see which network request was in-flight, which error had just been thrown, and which route the user was on.

Privacy and sensitive data

Clairvio supports element-level masking via CSS selectors or data attributes. Any input[type=password] is masked by default. Masked elements are replaced with a solid block in the replay — the actual value never leaves the browser. You can mask any other element by simply adding a data attribute to the html tag.