LogRocket + Flutter

LogRocket and Flutter web

LogRocket pairs session replay with frontend monitoring and is widely used on React, Vue, and Angular apps. On Flutter web, the replay piece runs into the canvas problem. Here's the situation.

By Pixeltrace · Updated

Does LogRocket session replay work on Flutter web?

Not in a usable way. LogRocket reconstructs sessions from the DOM, and a Flutter web app has no DOM, so the visual replay has nothing to rebuild even when console and network logging still flows.

LogRocket reconstructs sessions from the DOM plus network and redux state. That reconstruction is what lets you scrub through a session and inspect state at each step.

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 the DOM reconstruction has nothing to work with. The visual replay comes back blank (or, where a canvas-video fallback exists, a very low frame-rate clip), even while console and network logging keep flowing.

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.

What you can and cannot get

Depending on setup, you may still capture some network and error telemetry. But the headline LogRocket feature, watching a faithful visual replay of the user’s session, does not survive the canvas on Flutter web.

A Flutter-native alternative

Pixeltrace records the rendered frames of your Flutter web app so visual replay works on canvas. It is built for Flutter’s rendering model rather than adapted from a DOM recorder, and kept light enough to record without a visible performance hit.

Being built for Flutter also means masking works where it can't on a DOM recorder: you mark sensitive widgets and Pixeltrace redacts those regions at capture time, on-device, so personal data never enters the recording. That's masking on canvas, which LogRocket can't do.

Pixeltrace isn't available yet. Join the waitlist for a launch notification.

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 is LogRocket replay blank on Flutter web?
LogRocket reconstructs replay from the DOM, but Flutter web renders to a canvas with no DOM elements to reconstruct. The visual replay therefore appears blank (any canvas-video fallback is low-framerate and unmaskable), even if some network/error telemetry is captured.
What replay tool works with Flutter web?
Pixeltrace records the frames Flutter paints to the canvas, so visual replay works on Flutter web where DOM-based tools like LogRocket cannot. It hasn't launched yet. Leave your email and we'll tell you when it does.

Related

← Back to Pixeltrace home