App lags when navigating to different screen

[zhenhao-ola]

Platform

Flutter Mobile

Obfuscation

Enabled

Debug Info

Enabled

Doctor

➜  ~ flutter doctor -v
[!] Flutter (Channel main, 3.7.13-0.0.pre.2, on macOS 14.4 23E214 darwin-arm64, locale en-MY)
    • Flutter version 3.7.13-0.0.pre.2 on channel main at /Users/zhenhao.ng/OlaProjects/flutter
    ! Upstream repository git@github.com:olachat/flutter.git is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to git@github.com:olachat/flutter.git to dismiss this error.
    • Framework revision 1a4884310c (12 months ago), 2023-10-04 12:28:33 +0800
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/zhenhao.ng/Library/Android/sdk
    • Platform android-35, build-tools 34.0.0
    • Java binary at: /Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (Zulu 8.74.0.17-CA-macos-aarch64) (build 1.8.0_392-b08)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode 15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

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

[!] Android Studio (version 2024.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 14 (API 34) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 14.4 23E214 darwin-arm64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 129.0.6668.58
    ! Error: Browsing on the local area network for Flamy's iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

Version

8.6.0

Steps to Reproduce

• Use the app for more than approximately 20 minutes.
• App will start to lag when navigating to other screen.

This issue only starts happening when we enabled Sentry in our new version of app.

When checking with CPU profiler, it seems Sentry is using much of the time. I'm wondering if SentryNavigatorObserver is causing our app to lag?

Looks related to this PR comment with span_frame_metrics_collector.dart: https://github.com/getsentry/sentry-dart/pull/2106#discussion_r1762199270

Thanks in advance.

Expected Result

The app should not lag when navigating to other screen.

Actual Result

After using the app for more than approximately 20 minutes, the app will start lagging when navigating to other screen,

Are you willing to submit a PR?

None

[buenaflor]

could you try disabling enableFramesTracking in the initializet

[zhenhao-ola]

@buenaflor do we have expected ETA for this fix?

[buenaflor]

I'll look at it asap so that we can get a fix out this

Does it only happen after using the app continuously for a long time?

[zhenhao-ola]

It only happens after using app for long time. The app becomes smooth back after restarting.

[martinhaintz]

@zhenhao-ola I tried to replicate this issue but wasn't able.

I created this sample project and tried it on my Pixel 7 Pro (latest Android 14) and Emulator (Android 13) both in debug mode.

I left the application open for more than 20 minutes and navigated between the screens at the beginning and after 20 minutes without a significant impact on the performance.

Please provide us with a minimal sample code, where this error occurs.

Here is my Flutter doctor.

fvm flutter doctor -v

[✓] Flutter (Channel stable, 3.7.12, on macOS 14.6.1 23G93 darwin-arm64, locale en-AT)
    • Flutter version 3.7.12 on channel stable at /fvm/versions/3.7.12
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (1 year, 5 months ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/martin/Library/Android/sdk
    • Platform android-34, build-tools 35.0.0
    • Java binary at: /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_331-b09)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16A242d
    • CocoaPods version 1.15.2

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

[!] Android Studio (version 2024.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 14.6.1 23G93 darwin-arm64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 128.0.6613.138

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[buenaflor]

@martinhaintz maybe it could be that for some reason we keep adding frames (for example a long running span which shouldn't happen in normal cases)

afaik we don't have a cut off where we say at this point we will drop the frame tracking because the number of frames captured limit has been reached.

That's my hunch why this is happening

at 60fps a 20 minute long span should have around 72000 frames captured which I imagine would slow down the calculation speed enough to cause delays

[martinhaintz]

@buenaflor makes sense, but I tried adding

final transaction = Sentry.startTransaction('startUnlimitedSpan()', 'task');

in the build method of my root Widget above the MaterialApp Widget with no difference after 20 minutes. Or did you mean something different?

I updated my previous sample code project.

[buenaflor]

@martinhaintz maybe you could try adding 72000 entries manually to the data structure that holds the frame data and see how the UI behaves when scrolling, navigating and so on

[martinhaintz]

@buenaflor I updated my sample code and added 72k custom data entries to the span(and did not send it), and the app still works quite well.

here is a screenshot of the cpu profiler

[buenaflor]

As far as I can tell from testing this does happen because we are processing too many frames in onSpanFinished.

But inherently the issue is: a span is running for too long. Frame tracking only activates when a span is started.

@zhenhao-ola do you have any long running span in the background? I suspect you have a span running in background without finishing it so it's either a user error or some integration is faulty. Do you use any specific integrations by us such as SentryNavigatorObserver?

[buenaflor]

Nonetheless, we should add a guard in which after a certain amount of number of frames it will reject the frame capture.

[zhenhao-ola]

Not sure what long running span means.

Does bottom navigation tabs and their screens with AutomaticKeepAliveClientMixin count?

Do you use any specific integrations by us such as SentryNavigatorObserver?

To answer your question, yes.

[buenaflor]

long running span meaning something like Sentry.startTransaction that never finishes. I'm asking if you're using sentry integrations because many of them create those spans automatically which might lead to this.

We do frame tracking per span which means if it is running in the background for too long e.g 20 minutes, it just keeps accumulating frames over and over again without removing them from memory. that's why at some point it lags when we try to process them.

We are now going to add a limit so this 'overflow' won't happen.

[jinchengwu-ola]

long running span meaning something like Sentry.startTransaction that never finishes. I'm asking if you're using sentry integrations because many of them create those spans automatically which might lead to this.

We do frame tracking per span which means if it is running in the background for too long e.g 20 minutes, it just keeps accumulating frames over and over again without removing them from memory. that's why at some point it lags when we try to process them.

We are now going to add a limit so this 'overflow' won't happen.

I found that, It happens after integrated SentryAssetBundle. Your demo sample didn't integrate SentryAssetBundle, so that is why the scenario is not happened in it.

Maybe some reason cause the first span in activeSpans is not removed, so no frame will be removed in frames .

line 87 in span_frame_metrics_collector.dart

      frames.removeWhere((frameTimestamp, _) =>
          frameTimestamp.isBefore(activeSpans.first.startTimestamp));

I observed that frames accumulating from app start up. Hope that helps.

[buenaflor]

Thanks for the info, in the sentry dashboard do you see any long transactions that are around 20 minutes?

[jinchengwu-ola]

Thanks for the info, in the sentry dashboard do you see any long transactions that are around 20 minutes? I found several cases, like "Global Key#xxxx" which are long transactions without detail info in its detail screen

[jinchengwu-ola]

Below one looks like a suspended case, but not sure

[zhenhao-ola]

Hi @buenaflor Can we know the release date for the next version of SDK that includes this fix?

CMIIW, the newest SDK version 8.9.0 at the time of writing, still does not contain this fix yet. https://github.com/getsentry/sentry-dart/releases

[buenaflor]

@zhenhao-ola hey we're running some final tests and will release a pre-release this week which will include the fix

[marcinFDT]

Waiting for that fix as well. Not sure if that is the same issue, but Sentry causes enormous lagging/performance issues after couple hours of alive app (tested with turn on/off Sentry, without it all is good after even 24h)

[buenaflor]

@marcinFDT pls read this comment for more context why this might happen: https://github.com/getsentry/sentry-dart/issues/2298#issuecomment-2373770916

[buenaflor]

We just released Sentry Flutter 8.10.0-beta.1 which includes the fix, please give it a try

[marcinFDT]

@buenaflor I was testing that version since last week and it looks like it no longer affects the app performance, good job :)

[marcinFDT]

Or I'm not 100% sure if that is fixed. I have user who had app opened for 4 days and he complains about the lags. It's really difficult to investigate that. I'm quite sure it's caused by Sentry.

[buenaflor]

@marcinFDT is there any more info on what exactly lags? navigating to a new screen?

If you like you can also test it by setting options.enableFramesTracking = false and see if it still lags after long usage