Zone missmatch on flutter web

[kay4ik]

Platform

Flutter Web

Obfuscation

Disabled

Debug Info

Disabled

Doctor

[√] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.19045.4046], locale de-DE)
• Flutter version 3.19.3 on channel stable at C:\Users\R081094\dev\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ba39319843 (13 days ago), 2024-03-07 15:22:21 -0600
• Engine revision 2e4ba9c6fb
• Dart version 3.3.1
• DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\R081094\AppData\Local\Android\Sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = C:\Users\R081094\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.3)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.9.34701.34
• Windows 10 SDK version 10.0.20348.0

[√] Android Studio (version 2023.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.87.2)
• VS Code at C:\Users\R081094\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.84.0

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.4046]
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.129
• Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.92

[√] Network resources
• All expected network resources are available.

• No issues found!

Version

7.18.0

Steps to Reproduce

1. create a Flutter project using all available platforms (iOS, MacOS, Windows, Android) and Web
2. implement a Future<void> init() method wich is called in main() and initializes some stuff asynch.
3. Your main() should look like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await init(); // initializes the stuff asynch

  await SentryFlutter.init(
    (options) => options
      ..dsn = 'dsn'
      ..debug = kDebugMode
      ..attachViewHierarchy = true
      ..sampleRate = settings.general.acceptAnalysis == true ? 1 : 0, // Enables or disables error sending according to user settings

    appRunner: () => runApp(const ProviderScope(child: SchunkControlCenterApp())), // Riverpod should not care here
  );
}

4. run your app in debug mode

Expected Result

I expected that the app starts normally without throwing an exception.

Actual Result

Following Exception is thrown:

The following assertion was thrown during runApp:
Zone mismatch.
The Flutter bindings were initialized in a different zone than is now being used. This will likely
cause confusion and bugs as any zone-specific configuration will inconsistently use the
configuration of the original binding initialization zone or this zone based on hard-to-predict
factors such as which zone was active when a particular callback was set.
It is important to use the same zone when calling `ensureInitialized` on the binding as when calling
`runApp` later.
To make this warning fatal, set BindingBase.debugZoneErrorsAreFatal to true before the bindings are
initialized (i.e. as the first statement in `void main() { }`).

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 945:28  get current
packages/flutter/src/foundation/binding.dart 495:29                 <fn>
packages/flutter/src/foundation/binding.dart 499:14                 debugCheckZone
packages/flutter/src/widgets/binding.dart 1212:17                   runApp
packages/schunk_cc/main.dart 34:22                                  <fn>
packages/sentry/src/sentry.dart 136:26                              <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50  <fn>
dart-sdk/lib/async/zone.dart 1407:47                                _rootRunUnary
dart-sdk/lib/async/zone.dart 1308:19                                runUnary
dart-sdk/lib/async/future_impl.dart 162:18                          handleValue
dart-sdk/lib/async/future_impl.dart 838:44                          handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                          _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                           [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                           <fn>
dart-sdk/lib/async/zone.dart 1399:13                                _rootRun
dart-sdk/lib/async/zone.dart 1301:19                                run
dart-sdk/lib/async/zone.dart 1209:7                                 runGuarded
dart-sdk/lib/async/zone.dart 1249:23                                callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                    _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                     _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7  <fn>

Are you willing to submit a PR?

No

[kay4ik]

I also tried to wrap everythin inside main() with a runZoneGuarded() but that didn't work...

I think the problen is that The appRunner is initialized with a runZoneGuarded automatically on Web. There is no option to disable this ro run my own guarded zone on the web.

I cannot init my data inside the app runner because i need to give the user the option to diable Sentry (mandatory from my companys legal team). If there is a workaround by disabling Sentry programatically on another way, i'd be happy to use this.

[r-dev-limited]

Same here, all combinations result in that mismatch

[stefanosiano]

hi @kay4ik and @r-dev-limited
You can find the reason in the docs.

The SDK already runs your init callback on an error handler, such as runZonedGuarded on Flutter versions prior to 3.3, or PlatformDispatcher.onError on Flutter versions 3.3 and higher, so that errors are automatically captured.

This means that WidgetsFlutterBinding.ensureInitialized() should be called within the runZonedGuarded
Please, let me know if this works for you.

void main() async {

  await runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await init(); // initializes the stuff asynch

    await SentryFlutter.init(
      (options) => options
        ..dsn = 'dsn'
        ..debug = kDebugMode
        ..attachViewHierarchy = true
        ..sampleRate = settings.general.acceptAnalysis == true ? 1 : 0, // Enables or disables error sending according to user settings
  
      appRunner: () => runApp(const ProviderScope(child: SchunkControlCenterApp())), // Riverpod should not care here
    );
  }, (exception, stackTrace) async {
    await Sentry.captureException(exception, stackTrace: stackTrace);
  });
}

[stefanosiano]

As a workaround, you could use the beforeSend callback to drop all data sent to Sentry based on a flag reflecting users consent.
Something like

await SentryFlutter.init(
          (options) => options
        ..beforeSend = (event, {hint}) => userConsent ? event : null,
        ...

[kay4ik]

@stefanosiano

This means that WidgetsFlutterBinding.ensureInitialized() should be called within the runZonedGuarded
Please, let me know if this works for you.

No this is not working. The Zone missmatch occurs either way.

Thank you for the workaround idea! I will try it :)

[kay4ik]

So the workaround is working fine but i think it should be possible to initialize the app before sentry.

[stefanosiano]

Let's add the workaround to the troubleshooting section of the docs.
Let's also see how we can initialize the app before Sentry

[flodaniel]

I run into the same issue but for me it is not user consent that I run before await SentryFlutter.init but some other async initialization logic that determines the Sentry dsn property. Can I ignore the crash or is there another workaround available?