Open
Description
Description
We’ve integrated several session replay/screen recording analytics tools with our Flutter Web app, including:
- UxCam
- Smartlook
- Microsoft Clarity
- Heap
In all cases, the tools only capture a white screen with cursor movement and click tracking. The actual UI content is not visible in the recordings.
This seems to be related to Flutter Web’s rendering mechanism (e.g., canvas-based rendering), which may not be compatible with how these tools capture the DOM.
Expected Behavior
Session recording tools should be able to capture the rendered UI along with user interactions to support user behavior analysis.
Actual Behavior
- The UI is blank/white in recordings
- Only the mouse pointer and clicks are tracked
Tools Tried
- UxCam
- Smartlook
- Microsoft Clarity
- Heap
Flutter Doctor Output
flutter doctor -v
[✓] Flutter (Channel stable, 3.32.1, on macOS 15.1.1 24B91 darwin-arm64, locale en-IN) [126ms]
• Flutter version 3.32.1 on channel stable at /Users/enspirit/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b25305a883 (6 days ago), 2025-05-29 10:40:06 -0700
• Engine revision 1425e5e9ec
• Dart version 3.8.1
• DevTools version 2.45.1
[✗] Android toolchain - develop for Android devices [81ms]
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✗] Xcode - develop for iOS and macOS [131ms]
✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
Download at: https://developer.apple.com/xcode/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is a package manager for iOS or macOS platform code.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/to/platform-plugins
For installation instructions, see https://guides.cocoapods.org/using/getting-started.html#installation
[✓] Chrome - develop for the web [32ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio (not installed) [31ms]
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
[✓] VS Code (version 1.100.2) [31ms]
• VS Code at /Users/enspirit/Downloads/Visual Studio Code.app/Contents
• Flutter extension version null
[✓] Connected device (2 available) [206ms]
• macOS (desktop) • macos • darwin-arm64 • macOS 15.1.1 24B91 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 137.0.7151.68
[✓] Network resources [556ms]
• All expected network resources are available.
! Doctor found issues in 3 categories.
**Steps to Reproduce**
Deploy a Flutter Web app using default configuration (CanvasKit or HTML renderer)
Integrate a session replay tool (e.g., Clarity or Smartlook)
Record a session
Observe that UI is not visible
Additional Info
We’d like to know:
Is this a known limitation?
Are there any analytics/session replay tools that do support Flutter Web screen capture?
Any workaround to make canvas-based rendering visible to screen recording tools?
Thanks in advance!