mask overlay in flutter session replay

[thisames]

Platform

Flutter Mobile

Obfuscation

Enabled

Debug Info

Enabled

Doctor

Dart version 3.4.3

Version

8.9.0

Steps to Reproduce

I'm testing the replay session in Flutter and noticed that widget masks overlap when navigating between screens.

It seems that the filter.items always contains the total number of widgets in the context, not just the widgets for each screen.

If I'm on screen 2, it picks up all the widgets from both screen 1 and 2, instead of just those on screen 2.

2024-09-26.02-04-26.mp4

I basically tested with these configurations in my project, but I also tested just the example from the library itself and got the same result.

const String exampleDsn =
    'https://dnsexample';

/// This is an exampleUrl that will be used to demonstrate how http requests are captured.
const String exampleUrl = 'https://jsonplaceholder.typicode.com/todos/';

const _channel = MethodChannel('example.flutter.sentry.io');
var _isIntegrationTest = false;

Future<void> main() async {
  await setupSentry(
    () => runApp(
      SentryWidget(
        child: DefaultAssetBundle(
          bundle: SentryAssetBundle(),
          child: MaterialApp(
            navigatorObservers: [SentryNavigatorObserver()],
            title: 'Navigation Basics',
            home: FirstRoute(),
          ),
        ),
      ),
    
```),
    exampleDsn,
  );
}

Future<void> setupSentry(
  AppRunner appRunner,
  String dsn, {
  bool isIntegrationTest = false,
  BeforeSendCallback? beforeSendCallback,
}) async {
  await SentryFlutter.init(
    (options) {
      options.dsn = exampleDsn;
      options.tracesSampleRate = 1.0;
      options.profilesSampleRate = 1.0;
      options.reportPackages = false;
      options.addInAppInclude('sentry_flutter_example');
      options.considerInAppFramesByDefault = false;
      options.attachThreads = true;
      options.enableWindowMetricBreadcrumbs = true;
      options.sendDefaultPii = true;
      options.reportSilentFlutterErrors = true;
      options.attachScreenshot = true;
      options.screenshotQuality = SentryScreenshotQuality.low;
      options.attachViewHierarchy = true;
      options.debug = true;
      options.spotlight = Spotlight(enabled: true);
      options.enableTimeToFullDisplayTracing = true;
      options.enableMetrics = true;

      options.maxRequestBodySize = MaxRequestBodySize.always;
      options.maxResponseBodySize = MaxResponseBodySize.always;
      options.navigatorKey = navigatorKey;

      options.experimental.replay.sessionSampleRate = 1.0;

      _isIntegrationTest = isIntegrationTest;
      if (_isIntegrationTest) {
        options.dist = '1';
        options.environment = 'integration';
        options.beforeSend = beforeSendCallback;
      }
    },
    // Init your App.
    appRunner: appRunner,
  );
}


### Expected Result

Mask applied to the widgets of each screen.

### Actual Result

The mask of the entire current context is being applied to the screen.

### Are you willing to submit a PR?

None

[buenaflor]

cc @vaind

[vaind]

This happens when the widgets on multiple screens are rendered at the same time by Flutter. So although the previous screen is overlayed by a new one from the user perspective, in the code we don't have a sure way of recognizing whether the "background" widgets are render behind some other non-transparent widget, thus are actually not visible.
This is something I have on the radar and am planning to improve in the future. I'm open to suggestions on tackling this if you have any.