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.