Using session replay to reproduce bugs

How DOM replay works

Most web session replay is not video. A recorder such as the open-source rrweb library takes a snapshot of the page's structure (the DOM) when recording starts, then logs every change: elements added or removed, text changed, the mouse moving, a click, a scroll, an input. The player rebuilds the page from the snapshot and applies the changes in order.

This has useful consequences. Files are small compared with video. Text in the replay is real text, not pixels. And because the recorder knows which elements are inputs, it can mask what people type before anything is saved.

Replay versus screen video

When replay helps most

• Bugs that depend on order: the error only happens if you open the filter, change the sort and then go back.
• Reporters who cannot describe what they did: customers and clients often do not remember the clicks before the problem.
• Timing and state: a double click, a fast scroll, a form submitted twice.
• Layout that changes: a menu that jumps, a banner that pushes the button away just as someone taps.

When it does not help

• The cause is on the server. A replay shows the empty table; only server logs show why the query returned nothing.
• The problem is in a canvas, a map, an embedded video or an iframe from another site, which DOM recorders often cannot see.
• The bug depends on data the replay masks or does not record, such as request bodies.

Turning a replay into reproduction steps

1. 1

   Watch it once without stopping

   Get the shape of what happened before looking at detail.

2. 2

   Find the moment it went wrong

   Note the time and what was on screen. If a step list is available, find the matching action.

3. 3

   Line it up with the logs

   Check the console and network logs around that time. A red error or a failed request just before the symptom is the strongest lead.

4. 4

   Write the steps from the start of the recording

   Note the starting page and state, then each meaningful action. Ignore idle mouse movement.

5. 5

   Follow your own steps on a clean session

   Use the same browser and screen size. If it does not reproduce, compare account, data and timing with the replay.

Privacy settings to check

• Typed values should be masked by default, not opt-in.
• You should be able to block whole elements (an account panel, a card form) from being recorded.
• Recording should be limited to sites you control.
• Prefer recordings started for a reason (a bug report) over recording every visitor all the time, unless you need analytics and have consent.

How recording works in Flawsnap

Flawsnap's widget recording is a DOM replay built on rrweb, started by the reporter from the report form and capped at five minutes. There is no screen-share prompt. It produces readable steps such as "Clicked 'Add to cart'", always masks typed values, and supports data-flawsnap-block and data-flawsnap-mask attributes to hide or mask elements. Recordings continue across in-app navigation in single-page apps; a full page reload ends one.

Recordings are a Pro feature, and the project needs "Allow screen recording" turned on in its Security settings. On Starter, the report is kept and the recording is dropped. The coming-soon browser extension records the tab as WebM video instead. See screen recording.

<!-- Not recorded at all -->
<div data-flawsnap-block>Account balance: ...</div>

<!-- Recorded, but its text is masked -->
<p data-flawsnap-mask>Jane Doe, 12 High Street</p>

Questions

Is session replay the same as screen recording?

Not usually. Web session replay rebuilds the page from recorded structure and events, while screen recording captures pixels. Replays are smaller and can mask inputs, but may miss canvas elements, embedded video and cross-site iframes.

Does session replay slow down a website?

Recording adds some work in the browser, because it watches every change to the page. Loading the recorder only when it is needed, for example when someone starts a bug report, keeps the cost away from visitors who never report anything.

Do I need consent to use session replay?

That depends on your jurisdiction and how you use it. Recording every visitor for analytics usually needs a clear basis such as consent. A recording a user starts themselves to report a bug is a different situation, but take your own legal advice and mention it in your privacy policy.

Related

• Screen recordings that show how the bug happened
• Console and network logs, attached to every report
• Browser console logs, explained for bug reports
• Bug reporting for SaaS product teams
• Install Flawsnap in a React app