Mobile Replay Making UI Thread FPS Lag 10-30 FPS Consistently

[ansh]

What React Native libraries do you use?

Expo Router, Expo Web, Expo (mobile only), Expo Application Services (EAS)

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

~6.3.0

How does your development environment look like?

  "expo": "~52.0.26",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.6",
    
newArchEnabled: false

Sentry.init()

Sentry.init({
  dsn: REDACTED_URL,
  debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
  enabled: !__DEV__,
  // enableNativeFramesTracking: Constants.executionEnvironment === ExecutionEnvironment.StoreClient,
  // integrations: [
  //   navigationIntegration,
  //   Sentry.mobileReplayIntegration({
  //     maskAllImages: false,
  //     maskAllText: false,
  //     maskAllVectors: false,
  //   }),
  // ],
  // _experiments: {
  //   replaysSessionSampleRate: 0.1,
  //   replaysOnErrorSampleRate: 1.0,
  // },
});

Steps to Reproduce

1. Create a new project using create-expo-app with expo-dev-client and Expo SDK 52
2. Install Sentry as shown in Expo docs
3. Notice how UI thread FPS using built-in FPS monitor on device in dev mode is 60 FPS on the UI thread
4. Enable enableNativeFramesTracking, and mobileReplayIntegration
5. Look at UI thread FPS using built-in FPS monitor as being 10-30 FPS lower than normal
6. This issue is fixed by commenting out the mobile replay stuff shown above

Expected Result

Sentry doesn't impact UI thread even on simple screens rendering nothing but a text component

Actual Result

UI thread under 60 consistently. Often times, under 30 FPS on a simple Hello World screen.

[romtsn]

hi @ansh thanks for the report! Are you experiencing the problem when running the app on iOS or Android? Do you use simulator/emulator or a real device (if so, which one)? Also have you tried keeping enableNativeFramesTracking and just disabling replay? Thanks!

[ansh]

I see the issue both in development and production.

I can obviously see that is the case in development since I see a FPS tracker, but it's also evident in production just scrolling in lists and seeing dropped frames. The lists are pretty basic and memoized so it's definitely this library that's causing the issue, it's just easier to view on a list in production vs. a static screen when you don't have a FPS measurement to go off of.

@romtsn

I will try keeping enableNativeFramesTracking and disabling other things and share a reproduction.

[romtsn]

@ansh can you please specify the platform (android/ios) you're testing on? and what devices exactly? If it's iOS it's expected to drop frames on older devices. if it's Android I'd suggest updating the SDK version to the latest one (6.6.0 as of now) and try it out - we've made some performance improvements since 6.3.0

[ansh]

@romtsn Its iOS

I'm testing on an iPhone 15 Pro. That's a very powerful device.

This is definitely an issue that's not normal.

A View with a single Text component shouldn't be dropping multiple frames consistently.

I'll provide screenshots and a reproduction Github repo very soon. You can try to reproduce with my instructions too, it's a pretty straightforward reproduction.

[krystofwoldrich]

@ansh Thank you.

[ansh]

Here you can see the example app running on two different devices.

On both, there is a consistent drop in the UI Thread FPS. It is a lot more evident on on the iPad due the iPad being a slightly older device (it's an iPad Air 2)

But, nevertheless, it is evident that there is an issue.

This issue is fixed by commenting out the code like I did in my original post.

iPhone 15 Pro (commented code, fast):

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-02-04.at.14.50.30.mp4

iPhone 15 Pro (uncommented code, slow):

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-02-04.at.19.17.27.mp4

iPad Air 2 (commented code, fast):

RPReplay_Final1738726118.MP4

iPad Air 2 (uncommented code, slow):

RPReplay_Final1738725998.MP4

@krystofwoldrich @romtsn You can test this out yourself. Here is the repro repo: https://github.com/ansh/sentry-ui-thread-lag-bug-repro

Make sure to put the appropriate values in app.json and the root _layout.tsx file

[romtsn]

@ansh thanks for taking the time to set up a reproducible sample, that's very much appreciated ❤ I understand your frustration, we'll look into ways to improve this!

[krystofwoldrich]

• SessionReplay causes user-visible frame drop sentry-cocoa#4000 tracks the undelaying issue in sentry-cococa

[ansh]

Thanks! All the best!@romtsn @krystofwoldrich

[ansh]

Another thing I will add is once you make changes like commenting or uncommenting the parts of code I commented out, you need to fully restart the app. That is, swipe up & close the app, and fully reload the bundle on device. If you don't do this, it might look like the issue is gone when it's not, or that it is still there when it's not because the Sentry part didn't reload.

[kahest]

Closing this as duplicate of getsentry/sentry-cocoa#4000. Please add relevant information to the other issue as needed and track the progress there