Unexpected scroll glitches when using mobileReplayIntegration

[csath]

What React Native libraries do you use?

React Navigation, Expo (mobile only), Hermes

Are you using sentry.io or on-premise?

on-premise (Self-Hosted)

@sentry/react-native SDK Version

6.19.0

How does your development environment look like?

System:
  OS: macOS 15.6.1
  CPU: (14) arm64 Apple M3 Max
  Memory: 390.69 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.17.1
    path: ~/.nvm/versions/node/v22.17.1/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.5.2
    path: ~/.nvm/versions/node/v22.17.1/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "31"
      - "32"
      - "33"
      - "34"
      - "35"
      - "35"
      - "36"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-29 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13991807
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.2
    wanted: ~0.77.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Sentry.init()

Sentry.init({
  dsn: SENTRY_DNS,
  environment: 'custom',
  release: "******",
  dist: '***',
  tracesSampleRate: 0.1,
  patchGlobalPromise: false,
  integrations: [
        Sentry.reactNavigationIntegration(),
        Sentry.reactNativeTracingIntegration(),
        Sentry.mobileReplayIntegration({
                maskAllImages: false,
                maskAllText: false,
                maskAllVectors: false,
       }),
  ],
  enableAppStartTracking: false,
  enableAutoPerformanceTracing: true,
  replaysOnErrorSampleRate: 0.001,
  replaysSessionQuality: 'low',
});
```

Steps to Reproduce

1. Install the app on iOS device (Test device used > iPhone 12, 18.6.2 iOS version)
2. Start monitoring iOS app "Animation hitches" using Xcode instruments
3. In the app all the scroll views, even including react native web view component starts to show animation glitches when scrolling. Once the replaysOnErrorSampleRate is set to 0, these glitches are gone.

Expected Result

When session replay is enabled, it should not introduce animation glitches while scrolling.

Actual Result

[linear]

RN-316 Unexpected ScrollView glitches when using mobileReplayIntegration

[philprime]

Hi @csath, thanks for reporting this.

Looking at your init code I can see that you are not using the option enableViewRendererV2 yet, which should improve performance especially on older devices:

sentry-react-native/packages/core/src/js/replay/mobilereplay.ts

Lines 48 to 59 in 92039ac

	* Enables up to 5x faster new view renderer used by the Session Replay integration on iOS.
	*
	* Enabling this flag will reduce the amount of time it takes to render each frame of the session replay on the main thread, therefore reducing
	* interruptions and visual lag. [Our benchmarks](https://github.com/getsentry/sentry-cocoa/pull/4940) have shown a significant improvement of
	* **up to 4-5x faster rendering** (reducing `~160ms` to `~36ms` per frame) on older devices.
	*
	* - Experiment: In case you are noticing issues with the new view renderer, please report the issue on [GitHub](https://github.com/getsentry/sentry-cocoa).
	* Eventually, we will remove this feature flag and use the new view renderer by default.
	*
	* @default true
	*/
	enableViewRendererV2?: boolean;

We are aware that session replay still requires additional performance monitoring for certain scenarios and we are using getsentry/sentry-cocoa#5155 to track the progress.

In case you are interested in more detail on what's happening behind the scenes, feel free to read this post in the Sentry blog.

Please let us know if the view renderer V2 solves the problem for you.

[csath]

Thanks @philprime! 🙏

From the docs, it looks like enableViewRendererV2 is on by default, but I tried explicitly enabling it (along with enableFastViewRendering). That reduced hitch duration a bit, but not fully.

Our app renders many product images (using expo-image + @shopify/flash-list), and we’re not yet on the new RN architecture, so that might add to the overhead, I believe.

@philprime could you confirm if there's a significant performance difference in using session replay with the new and old react native architecture?

Since session replay already does graphics-heavy work, we decided to disable it for now to prioritize UX. But we are eager to enable this cool feature as soon as the performance issues are fixed.

Really impressive progress on performance though—great work! 👏