Session replay

Session replay for Flutter web

Session replay lets you watch real user sessions to debug issues and understand behavior. For Flutter web apps, the standard tools mostly do not work. Here's why, and what does.

By Pixeltrace · Updated

Why standard session replay fails on Flutter

Standard session replay fails on Flutter web because nearly every popular tool reconstructs sessions from the DOM, and a Flutter web app paints to a canvas with no DOM to reconstruct.

Almost every popular session-replay tool (FullStory, LogRocket, Hotjar, Microsoft Clarity, PostHog) reconstructs sessions from the DOM. Most build on rrweb or an rrweb-style engine, an open-source approach that serializes DOM mutations and replays them as a faithful re-render of the page.

The reason is how Flutter web renders. It does not draw your interface to the DOM. With the CanvasKit renderer (a WebAssembly build of Google’s Skia graphics engine, and the production default for most Flutter web apps) and the newer Skwasm renderer, Flutter paints the entire UI as pixels onto one HTML canvas element. To the browser, and to any tool that reads the DOM, your app is a single opaque rectangle. No buttons, no text nodes, nothing to attach to.

On a Flutter web app there is no DOM to serialize. These tools produce a blank replay, or at best a very low frame-rate video (reading each frame back from the GPU is slow) that is hard to act on.

There is also a privacy catch worth flagging. DOM-based tools mask sensitive fields by selecting the elements to redact (a CSS class, a selector, an attribute). On a Flutter canvas there are no such elements, so even when one of these tools does manage a low-framerate video capture of the canvas, none of them can mask anything inside it. Every tool in this space documents that canvas content cannot be masked. Anything Flutter painted (passwords, payment details, personal data) is recorded in the clear, which is a real concern for GDPR, HIPAA, PCI, and similar obligations.

Frame-based recording: the approach that works

The reliable way to do session replay on Flutter web is to record what the engine paints, the rendered frames, rather than reconstruct a DOM that does not exist. That sidesteps the canvas problem entirely. You capture the same pixels your user saw.

The engineering challenge is doing this without wrecking performance. A naive screenshot-every-frame approach can tank frame rate. The goal is capture that stays inside your frame budget so the app still feels native while recording.

What good Flutter session replay looks like

Frame-accurate scrubbing, near-native capture overhead, a lightweight SDK with minimal bundle impact, and, crucially, privacy masking that actually works on canvas. Because the capture lives inside Flutter, you can mark sensitive widgets and have those regions redacted at capture time, on-device, before anything leaves the browser, which is exactly the masking DOM-based tools cannot apply to a Flutter canvas. Those are the properties Pixeltrace is being built around.

Pixeltrace is in development. Join the waitlist to try it when it launches.

See what your users do in Flutter

Pixeltrace records the frames your Flutter web app paints, so replay works on canvas. It's not generally available yet, so leave your email and we'll tell you the moment it launches.

Help us prioritize (optional)

You'll get one email when Pixeltrace is available. If you want to hear more from us, you'll sign up for that separately (later).

Frequently asked questions

Why does session replay not work on Flutter web?
Most session-replay tools reconstruct the DOM, but Flutter web renders to a canvas with no DOM. The reconstruction has nothing to work with, so replays come back blank or as a very low frame-rate video.
How do you do session replay on a Flutter web app?
By recording the frames Flutter paints rather than reconstructing a DOM. Frame-based capture works on canvas-rendered Flutter web; the key is doing it with near-native overhead. Pixeltrace takes this approach.

Related

← Back to Pixeltrace home