Using SentryAssetBundle causes images to flash when navigating between pages

[stx]

Platform

Flutter Web

Obfuscation

Disabled

Debug Info

Disabled

Doctor

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E772610a darwin-arm64, locale en-US)
• Flutter version 3.10.0 on channel stable at /Users/james/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 84a1e904f4 (7 days ago), 2023-05-09 07:41:44 -0700
• Engine revision d44b5a94c9
• Dart version 3.0.0
• DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at /Users/james/Library/Android/sdk
• Platform android-33, build-tools 32.1.0-rc1
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.12.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• 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 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.78.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.64.0

[✓] Connected device (3 available)
• Apollo (mobile) • 00008110-0004752E3AB8801E • ios • iOS 16.2 20C65
• macOS (desktop) • macos • darwin-arm64 • macOS 13.3.1 22E772610a darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137
! Error: James’s Apple Watch has not finished loading development services. Please select a different device, or wait for the device to load development services and try again. (code 8)

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

• No issues found!

Version

7.5.2

Steps to Reproduce

We upgraded from Flutter 3.7.5 -> 3.10 and Sentry 6.20.1 -> 7.5.2 and our web app's PNG images (called via Image.asset()) are flashing on every page change, which essentially breaks the app, as we have a lot of images and no page transitions. Changing enableStructuredDataTracing has no effect. Happens in both debug and release mode. Tested on Chrome 112.0.5615.137.

The only fix is to disable DefaultAssetBundle():

Change:

      runApp(
        DefaultAssetBundle(
          bundle: SentryAssetBundle(),
          child: const App(),
        ),
      );

To:

      runApp(
        const App(),
      );

Expected Result

Seamless images with no blip between routes.

Actual Result

CleanShot.2023-05-16.at.16.32.18.mp4

Are you willing to submit a PR?

None

[marandaneto]

@stx thanks for reporting.
Is this web-only? or Android and iOS as well?

[marandaneto]

@ueman could it be that we have to wrap the methods in inner functions that just return a future? I guess what's happening is that is trying to execute everything right away. I can't reproduce it locally as of now.

@stx can you provide the full code snippet of Image.asset()? where is the image placed? the type of image? how you load and display the image, maybe it's specific to your use case.

[stx]

@marandaneto I think it's web only, but not totally sure.

Image.asset('images/bluebox.png')

[marandaneto]

@stx just to be clear, are both pages the very same layout or is it breaking the transition (not moving to the next page)?
Can you provide a minimal reproducible example?
I see that the image can flash sometimes, but it's because it's loading the image most of the time, this happens even before.

Can you try this PR and see if it improves? #1462
I'm returning the Future by default rather than executing right away, this could also be a reason.

[stx]

@marandaneto It's the same layout. It's not affecting the transition. It's just that the images aren't displayed on first frame render.

The PR has no effect. Repro:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:sentry_flutter/sentry_flutter.dart';

void main() async {
  runApp(
    DefaultAssetBundle(
      bundle: SentryAssetBundle(),
      child: MaterialApp.router(
        routerConfig: router,
      ),
    ),
  );
}

GoRouter router = GoRouter(
  observers: <NavigatorObserver>[
    SentryNavigatorObserver(),
  ],
  routes: <GoRoute>[
    GoRoute(
      path: '/1',
      pageBuilder: (_, GoRouterState state) => NoTransitionPage(
        key: ValueKey('1'),
        name: state.fullPath,
        child: GestureDetector(
          onTap: () => router.go('/2'),
          child: Image.asset('assets/images/bluebox.png'),
        ),
      ),
    ),
    GoRoute(
      path: '/2',
      pageBuilder: (_, GoRouterState state) => NoTransitionPage(
        key: ValueKey('2'),
        name: state.fullPath,
        child: GestureDetector(
          onTap: () => router.go('/1'),
          child: Image.asset('assets/images/bluebox.png'),
        ),
      ),
    ),
  ],
  initialLocation: '/1',
);

[stx]

Happens on mobile as well. iPhone 13 Pro:

RPReplay_Final1684801235.MP4

[stx]

Verified it reproduces on Flutter 3.7 just to make sure Flutter didn't break something in 3.10.

[marandaneto]

@stx can you try to do: SentryAssetBundle(enableStructuredDataTracing: false)

I tried myself again, and even without SentryAssetBundle, it blinks a bit, it depends on the size/quality of the image as well.
SentryAssetBundle only adds a span and some metadata to it, it does not take more than 16ms to drop a frame or so.

Ps: using Navigator and not GoRouter, but I don't think it's related to that.

[stx]

@marandaneto enableStructuredDataTracing: true/false has no effect.

I don't get blinking without SentryAssetBundle on any device so no idea what's going on there. Either way, we've had to stop using it.

[marandaneto]

@stx I understand, sadly, so for some reason, as I told you, if I do use high-resolution images, I still see the blinking, sometimes more sometimes less.
My last PR was actually not that useful since there was a bug in it, more context in the issue.
Would you be able to try again using the latest version of the main branch? (not published in pub.dev yet).
Maybe that was the reason but I'd love confirmation.

[stx]

@marandaneto Sure thing. Tried on the latest (86d4841) and it persists.

[marandaneto]

@stx can you provide a minimal reproducible example on GH (so I can just flutter run)? I copied your examples from your comment but as mentioned, could not reproduce the way you did.
Just need to be sure that it's not an environmental/config issue.
Thanks and sorry for the back and forth, sometimes reproducing issues is tricky.

[marandaneto]

@stx any news here? otherwise, I will close it as non-reproducible.

[marandaneto]

Closing the issue as a part of large repository cleanup, due to it being inactive and/or outdated.
Please do not hesitate to ping me if it is still relevant, and I will happily reopen and work on it.
Cheers!