Screen recordings that show how the bug happened

A replay, not a video file

The website widget uses page replay (rrweb). Instead of filming pixels, it records changes to the page, clicks, scrolls and typing, and plays them back in the portal, so you see the page as the reporter saw it.

Because nothing is filmed, the browser never asks the reporter to share their screen. Flawsnap also writes readable steps next to the replay, such as "Clicked 'Add to cart'", so you can skim what happened before you press play.

Turning it on

1. 1

   Be on Pro

   Recordings are a Pro feature. On Starter, a report sent with a recording is kept, but the recording is dropped.

2. 2

   Allow it on the project

   In the portal, open the project's Security settings and switch on Allow screen recording.

3. 3

   Let reporters start it

   Reporters can then attach a recording when they report. You can also start one from your own button with the JS API.

<button type="button" onclick="Flawsnap.startRecording()">Record the problem</button>

Flawsnap.startRecording() still works when you hide the floating button on the project, so you can put recording behind a link in your help menu instead.

Keeping private data out of recordings

Typed values are always masked; you cannot turn that off. For anything else that should not appear, such as an account balance or a customer list, mark the element in your HTML.

<!-- Blocked: kept out of the recording -->
<div data-flawsnap-block>Saved cards</div>

<!-- Masked: the text is hidden in the recording -->
<span data-flawsnap-mask>[email protected]</span>

Limits to plan around

• A recording stops at five minutes, and can be up to 15 MB.
• It carries on across route changes in a single-page app, but a full page reload ends a widget recording. For multi-page flows on classic sites, ask reporters to record the step that fails.
• It is started by the reporter. Flawsnap does not record every visitor in the background.
• The Flutter SDK has no screen recording.

The extension records real video

The Flawsnap Chrome extension, on the Chrome Web Store for Chrome, Edge and Brave, takes a different approach: 'Record this tab' captures a WebM video that keeps going across page loads, up to five minutes. It is meant for team members testing sites that do not have the widget installed. Recordings there are Pro too.

When a recording earns its place

For one-step visual problems, an annotated screenshot is quicker to send and quicker to read.

• Bugs that depend on order: "it only breaks if I go back and change the size".
• Timing problems, where a button is clicked before data has loaded.
• User acceptance testing, where testers walk a script and you need to see where they left it.

Questions

Will the recording show passwords or card numbers someone typed?

Typed values are always masked in widget recordings. Mark other sensitive elements with data-flawsnap-block or data-flawsnap-mask so they are hidden or masked as well.

Is this the same as session replay?

Not quite. Session replay tools usually record every visit. Flawsnap records only when a reporter starts it, for up to five minutes, and attaches it to their report.

Why does my recording stop when I change page?

A full page reload ends a widget recording. Navigation inside a single-page app does not. If your site reloads on every link, record the one step that fails.

Related

• Using session replay to reproduce bugs
• Pricing
• Bug reporting for QA testing
• Console and network logs, attached to every report
• Install Flawsnap in a React app