App performance critically impacted by mobileReplayIntegration on iOS (iPhone X)

[falk-stefan]

OS:

• [ ] Windows
• [ ] MacOS
• [x] Linux (Ubuntu)

Platform:

• [x] iOS
• [x] Android

SDK:

• [x] @sentry/react-native (>= 1.0.0)
• [ ] react-native-sentry (<= 0.43.2)

SDK version: 5.26.0

react-native version: 0.74.3

Are you using Expo?

• [x] Yes
• [ ] No

Are you using sentry.io or on-premise?

• [x] sentry.io (SaaS)
• [ ] on-premise

Configuration:

(@sentry/react-native)

Sentry.init({
  environment: environment.env,
  dsn: environment.sentry.dsn,
  sampleRate: environment.env === 'production' ? 0.05 : 1.0,
  tracePropagationTargets: [environment.apiUrl],
  _experiments: {
    // Currently under _experiments for 5.26.0-alpha releases
    replaysSessionSampleRate: 0.01,
    replaysOnErrorSampleRate: 1.0,
  },
  defaultIntegrations: [
    Sentry.mobileReplayIntegration({
      maskAllText: false,
      maskAllImages: false,
    }),
  ],
});

---

I have the following issue:

For testing, I have two phones available. One Galaxy A33 5G and an iPhone X.

After making my first iOS build I noticed that the application way really slow. Scrolling would sometimes completely getting stuck on the iOS device. However, I didn't have any issues on the Android device.

Long story short: After some thinking what the issue might be, I removed the Sentry.mobileReplayIntegration and noticed that the iPhone X was able to perform normally.

I am not sure if this is due to the device being comparatively old. However, the iPhone X isn't terribly weak. Not sure if this can be improved but I thought I'd just bring it up here just in case this isn't a known issue.

Expected result:

No significant performance impact.

[brustolin]

Hello @falk-stefan Thanks for reaching out.

We will investigate the impact on performance. Were you testing this on debug alone, or did you try a release build?

I removed the Sentry.mobileReplayIntegration and noticed that the iPhone X was able to perform normally.

You mean, when the redact was enabled, there were no performance issues?

[falk-stefan]

Hi!

Were you testing this on debug alone, or did you try a release build?

I used an internal ad-hoc build on a physical iPhone X.

You mean, when the redact was enabled, there were no performance issues?

Essentially, I just commented out the entire section in order to remove the integration like so:

Sentry.init({
  environment: environment.env,
  dsn: environment.sentry.dsn,
  sampleRate: environment.env === 'production' ? 0.05 : 1.0,
  tracePropagationTargets: [environment.apiUrl],
  // _experiments: {
  //   // Currently under _experiments for 5.26.0-alpha releases
  //   replaysSessionSampleRate: 0.01,
  //   replaysOnErrorSampleRate: 1.0,
  // },
  // defaultIntegrations: [
  //   Sentry.mobileReplayIntegration({
  //     maskAllText: false,
  //     maskAllImages: false,
  //   }),
  // ],
});

After installing a new ad-hoc build on the device, the performance was back to normal.

[brustolin]

Essentially, I just commented out the entire section in order to remove the integration like so

Ok, so you disabled session replay completely. Thanks for the answers!

[krystofwoldrich]

From the older Apple devices we have iP 6 and 8 (the same chip as X) available, have we tested any of the recent SDK builds on them?

[yefim]

We've narrowed it down to @sentry/integrations version 7.114.0. We're running @sentry/react-native 5.26.0. I posted video and workaround at https://github.com/getsentry/sentry-react-native/issues/3963#issuecomment-2265966871

[krystofwoldrich]

@yefim Thank you for the message and the video, just to confirm, your app was slow when using the captureConsoleIntegration and when removing it, it worked correctly?

Were you also using the Mobile Replay feature?

[yefim]

@krystofwoldrich yes, it was the captureConsoleIntegration causing the slowness. I had not enabled the Mobile Replay feature. I filed https://github.com/getsentry/sentry-react-native/issues/3992

[LMakshow]

It's reproducible on the @sentry/react-native 5.33.2 and on newer phones as well. Scrolling gets stuck for a couple of frames once per second. I'm not using Expo, react-native version is 0.75.4. The scroll component is FlashList. No such issue on Android, it's smooth there.

Screen recording from iPhone 15, iOS 18: https://github.com/user-attachments/assets/5051eb27-882c-45bd-b7ec-712271096121

Screen recording from iPhone 12, iOS 17 (it's much worse there): https://github.com/user-attachments/assets/e65f72c6-4ce2-42a6-907d-5c5c86a99e30

When I removed the mobile replay integration, the issue was gone.

[Ryabchikus]

Hello We have same problem on iPhone X iOS 16.7.8 only! But we haven't problems on iPhone 11 iOS 17.6.1, iPhone 12 iOS 17.5.1, iPhone 7 15.8.3

"react-native": "0.73.6", "@sentry/react-native": "^5.33.2",

const sentryInitParams: Sentry.ReactNativeOptions = {
  enabled: isTrackEnabled,
  dsn: 'xxxxxxxxxxxxxxxxxxxxxxxx',
  environment: isDev ? 'dev' : bundleType,
  enableNdkScopeSync: true,
  integrations: [
    Sentry.reactNativeTracingIntegration({ routingInstrumentation }),
    Sentry.mobileReplayIntegration({
      maskAllText: isProdBundle,
      maskAllImages: isProdBundle,
      maskAllVectors: false,
    }),
  ],
  _experiments: {
    replaysSessionSampleRate: isProdBundle ? 0.2 : 1,
    replaysOnErrorSampleRate: 1.0,
  },
  beforeSend,
  beforeBreadcrumb,
};

After disable Sentry.mobileReplayIntegration performance on iPhone X returns to normal

[krystofwoldrich]

Thank you @LMakshow and @Ryabchikus, we are currently working on Replay improvements. We will post updates in this issue soon.

[1forh]

I'm having the same issue with "@sentry/react-native": "~5.33.1". We enabled Sentry. mobileReplayIntegration and the app starts lagging/is janky when scrolling up and down pages.

[krystofwoldrich]

Thank you for the message @1forh,

could you share your Sentry.init?

[1forh]

We've since removed the mobileReplayIntegration and sample rates from the config.

  Sentry.init({
    dsn: ClientEnv.SENTRY_DSN,
    enabled: isProd,

    enableAppStartTracking: true,
    enableNativeFramesTracking: true,
    enableStallTracking: true,
    enableUserInteractionTracing: true,
    enableAutoSessionTracking: true,

    tracesSampleRate: tracesSampleRateFromFeatureFlag || tracesSampleRate,

    integrations: [reactNavigationIntegration],
    _experiments: {
      profilesSampleRate: profilesSampleRateFromFeatureFlag || profilesSampleRate,
    },
  });

[krystofwoldrich]

@1forh Thank you.