Session Replay support for Flutter on Mobile

[bruno-garcia]

Add support for Sentry's Session Replay: https://sentry.io/for/session-replay/

[Rafik-Belkadi-malou]

from how many thumbs up will you start to consider its implementation?

[marandaneto]

from how many thumbs up will you start to consider its implementation?

This is blocked by flutter/flutter#117382

[YasserDRIF]

We are using Smartlook currently, Adding this to Sentry would be amazing

[bruno-garcia]

We're working on it! Wanna join the early adopter release? Join the waitlist and discussion about the feature:

• Session Replay for Mobile - Waitlist sentry#63138

[vaind]

Replay alpha version now available for Android in 8.6.0-alpha.2 - please share any and all feedback.

To try out replay, you can set following options:

await SentryFlutter.init(
  (options) {
    ...
    options.experimental.replay.sessionSampleRate = 1.0;
    options.experimental.replay.errorSampleRate = 1.0;
  },
  appRunner: () => runApp(MyApp()),
);

Access is limited to early access orgs on Sentry. If you're interested, sign up for the waitlist

[mcosti]

Where should we post the issues we find? In this topic or each in a separate issue?

Here's what I found so far:

[sentry] [debug] WidgetFilter obscuring: Text("Editor")
[sentry] [debug] WidgetFilter obscuring: Text("My Festivals")
[sentry] [debug] WidgetFilter obscuring: Text("Messages")
[sentry] [debug] WidgetFilter obscuring: Text("Profile")
[sentry] [error] Replay: failed to capture screenshot.
         'dart:ui/painting.dart': Failed assertion: line 26 pos 10: '<optimized out>': Rect argument contained a NaN value.
         #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
         #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
         #2      _rectIsValid (dart:ui/painting.dart:26:10)
         #3      _NativeCanvas.drawRect (dart:ui/painting.dart:5936:12)
         #4      ScreenshotRecorder._obscureWidgets (package:sentry_flutter/src/replay/recorder.dart:137:14)
         #5      ScreenshotRecorder._capture (package:sentry_flutter/src/replay/recorder.dart:103:9)
         <asynchronous suspension>
         #6      Scheduler._run.<anonymous closure> (package:sentry_flutter/src/replay/scheduler.dart:53:41)
         <asynchronous suspension>

Also, quite low performance, especially on Android. I am developing a chat app and I can see a ton of logs for obscuring data, including the bottom navigation which gets obscured on every scroll. (Although not technically re-rendered).

Edit: I do not see any recordings showing up for iOS and for Android, the whole 9 minute recording is stuck on the initial first tab (not the loading screen, but the first screen from the navigation bar). I can see the network logs as I'm scrolling through my app, but the recording itself is stuck.

[✓] Flutter (Channel stable, 3.22.3, on macOS 14.1 23B74 darwin-arm64, locale en-NL)

[vaind]

@mcosti I've tried to reproduce what you're seeing with NaN with PageView but couldn't. Any chance you can come up with a repro that you're able to share?

[vaind]

TODOs

• (blocker) Provide a way to redact specific elements (hook into redaction logic) feat: custom replay masking rules #2324
• (blocker) Mask custom graphics experiment: mask CustomPaint widget #2346
• (blocker) Mask webviews - add webview and video widgets to the sample app #2355
• (blocker) Mask video - add webview and video widgets to the sample app #2355
• (blocker) Measure overhead
• (blocker) chore: report replay integration #2349
• (blocker) Add Documentation for Flutter Replay sentry-docs#11555
• Pause/resume API
• support orientation change - seems to work out of the box via native integration
• Clock drift fix: use UTC, or single time clock read, or stopwatch
• Add quality setting low/medium/high
• report SDK sample rates

[rhinck]

I apologize for my ignorance, but does this issue being closed indicate that there is now Flutter support for session replay? If so, how would I go about trying it out in my project? (I couldn't seem to find any docs offering additional information)

[vaind]

Session Replay beta for iOS and Android should come out in the next release

[buenaflor]

It's available starting from Sentry Flutter 8.9.0

[bruno-garcia]

@vaind could you help get it on our docs? https://docs.sentry.io/platforms/flutter/

If we add a note that it's experimental, like we did for the other SDKs, it should be OK. Now is the time since we expect to GA this in a a month or two.

[darkfrog26]

Session Replay beta for iOS and Android should come out in the next release

I presume this means that it's not supported for Flutter Web?

[buenaflor]

I presume this means that it's not supported for Flutter Web?

It's not available on Flutter Web, at least not yet. I have a working experimental/draft implementation but I can't give a sure timeline when this will be available

The draft implementation is not sufficient due to PII

[darkfrog26]

@buenaflor thanks for the info, I appreciate it.

[ant1m4tt3r]

if we use this experimental feature would we be able to see the replays in my sentry dashboard? looks like it still isn't available i guess. am i missing something?

[bruno-garcia]

if we use this experimental feature would we be able to see the replays in my sentry dashboard? looks like it still isn't available i guess. am i missing something?

Yeah we just haven't updated Sentry to consider Flutter as supported. But if you send the data, it'll show up.

[ant1m4tt3r]

thanks @bruno-garcia. for some reason i can't see the data yet, even though the app is running with the replay feature on. i'm looking into it, it may be some misconfiguration or something that i am missing.

should the replay work in a debug build or only in release mode?

[vaind]

should the replay work in a debug build or only in release mode?

Works in debug build too. You can try turning on debug logging in options to get more info on what's going on.

[bruno-garcia]

thanks @bruno-garcia. for some reason i can't see the data yet, even though the app is running with the replay feature on. i'm looking into it, it may be some misconfiguration or something that i am missing.

should the replay work in a debug build or only in release mode?

Are you a member of an enterprise org on Sentry SaaS? That's the only thing I can think of. Our open beta is only available to self-serve orgs right now.

If that's the case, can you create a free developer account, and try there, does it work?

[coffeeispower]

thanks @bruno-garcia. for some reason i can't see the data yet, even though the app is running with the replay feature on. i'm looking into it, it may be some misconfiguration or something that i am missing.
should the replay work in a debug build or only in release mode?

Are you a member of an enterprise org on Sentry SaaS? That's the only thing I can think of. Our open beta is only available to self-serve orgs right now.

If that's the case, can you create a free developer account, and try there, does it work?

I'm also trying to use this feature but it just refuses to work, it doesn't send the replay or at least sentry is not accepting it. I just created the sentry account for the project, it's a developer plan org.

[nrajput05]

I presume this means that it's not supported for Flutter Web?

It's not available on Flutter Web, at least not yet. I have a working experimental/draft implementation but I can't give a sure timeline when this will be available

Is this still not available for flutter web ?

[buenaflor]

Is this still not available for flutter web ?

no, as I said above I can't give a sure timeline when this will be available, it could still take a long time until we properly tackle this. I will write it here if I have any further information/updates

[skiunke]

Is this still not available for flutter web ?

no, as I said above I can't give a sure timeline when this will be available. I will write it here if I have any further information/updates

would a potential implementation cover WASM support?

[bruno-garcia]

Is this still not available for flutter web ?

no, as I said above I can't give a sure timeline when this will be available. I will write it here if I have any further information/updates

would a potential implementation cover WASM support?

I updated the title of the issue to be clear but this support is all about Android and iOS at this time. While our JS SDK could record a replay from Flutter Web, it would be based off of our web canvas support, have no masking at all and quite high overhead. So it would require a new approach for Flutter Web which we didn't look into yet.