Unable to get replay session when integrating both reactNavigationIntegration() & mobileReplayIntegration()

[InterstellarStella]

What React Native libraries do you use?

React Navigation

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

6.19.0

How does your development environment look like?

"dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@sentry/react-native": "^6.19.0",
    "react": "19.0.0",
    "react-native": "0.78.2"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.78.2",
    "@react-native/eslint-config": "0.78.2",
    "@react-native/metro-config": "0.78.2",
    "@react-native/typescript-config": "0.78.2",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }

Sentry.init()

import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import * as Sentry from '@sentry/react-native';
import {NavigationContainer} from '@react-navigation/native';

export const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true,
});

const configureSentry = () => {
  Sentry.init({
    dsn: 'YOUR_DSN',
    tracesSampleRate: 0.2,
    environment: 'development',
    appHangTimeoutInterval: 10,
    enableUserInteractionTracing: true,
    replaysSessionSampleRate: 0.0, // No need to record full session
    replaysOnErrorSampleRate: 1.0, // Record a replay for 100% of error sessions
    integrations: [
      Sentry.mobileReplayIntegration({
        maskAllText: false,
        maskAllImages: false,
        maskAllVectors: false,
      }),
      Sentry.reactNativeTracingIntegration(),
      navigationIntegration,
    ],
  });
};

configureSentry();

function App(): React.JSX.Element {
  const containerRef = useRef(null);

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {
        navigationIntegration.registerNavigationContainer(containerRef);
      }}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Button
          title="Test Crash"
          // Having sentry-label will affect the sentry replay session
          // with sentry-label, iOS not able to record replay session
          // Android totally not able to record replay session
          sentry-label="DISABLE_REPLAY"
          onPress={() => {
            throw new Error('Test Crash New App Replay');
          }}
        />
      </View>
    </NavigationContainer>
  );
}

export default Sentry.wrap(App);

Steps to Reproduce

If we remove reactNavigationIntegration in integrations array or remove the navigationIntegration.registerNavigationContainer(ref); function call in NavigationContainer onReady(), all the force crash test will be recorded successfully & consistently. We have tested that it is the navigationIntegration.registerNavigationContainer(ref); that caused the error replay session not show up in Dashboard. This happens in iOS. Android replay session somehow doesn't work at all.

Expected Result

Replays are recorded normally.

Actual Result

By adding sentry-label prop to React Native Button component, the replay session will not be recorded and uploaded to Sentry dashboard. This breaks iOS & Android all together. even when replaysOnErrorSampleRate: 1.0

This is an escalation from Zendesk. Debug logs and ticket history can be found in the linked Linear issue.

[linear[bot]]

RN-297 Unable to get replay session when integrating both reactNavigationIntegration() & mobileReplayIntegration()

[InterstellarStella]

An updated version of the reproducible example and repro steps has been shared in the shadow ticket.

[kahest]

Thanks @InterstellarStella for the details, we'll investigate and follow up here

[antonis]

Thank you for the report and the provided data. We were able to reproduce the issue and investigating possible fixes.

Edit: The issue is reproduced with the latest SDK (7.0.1) too when the reactNavigationIntegration is used and the replaysSessionSampleRate: 0.0.

[antonis]

The fix is now shipped with sentry-react-native 7.3.0 please let us know if the problem persists.

[InterstellarStella]

Reopening as the issue seems to persist. Updates sent in the internal Linear ticket.

[InterstellarStella]

Hi @antonis could we get an update for the customer?

[antonis]

Thank you for bumping this @InterstellarStella 🙇 I haven't been able to reproduce this after 7.3.0. Is the client still able to reproduce this consistently on both platforms with the same replication steps?

[antonis]

@InterstellarStella I've spent some time on this today but don't have any progress.

Is the client still able to reproduce this consistently on both platforms with the same replication steps?

Let me know if there is any update from the client 🙇

[InterstellarStella]

@antonis I have extended their Replay trial so that they can test this out again, and will let you know as soon as we have updates. Thanks for looking into this 🙏

[adrian-bowtie]

hi @antonis, we are still able to reproduce the issue

We can consistently replicate the issue with:

• Test crash WITH passing the sentry-label prop to the component - Replay session WON'T BE uploaded.
• Test crash WITHOUT passing the sentry-label prop to the component - Replay session WILL BE uploaded.

I have attached the exact code used to test below, please let us know if its reproducible on your end. Many thanks.

1. package.json

{
  "name": "SentryReplayNew",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native/new-app-screen": "0.82.0",
    "@react-navigation/native": "^7.1.18",
    "@react-navigation/native-stack": "^7.3.28",
    "@sentry/react-native": "^7.3.0",
    "react": "19.1.1",
    "react-native": "0.82.0",
    "react-native-safe-area-context": "^5.5.2",
    "react-native-screens": "^4.16.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "20.0.0",
    "@react-native-community/cli-platform-android": "20.0.0",
    "@react-native-community/cli-platform-ios": "20.0.0",
    "@react-native/babel-preset": "0.82.0",
    "@react-native/eslint-config": "0.82.0",
    "@react-native/metro-config": "0.82.0",
    "@react-native/typescript-config": "0.82.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.1.1",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.1.1",
    "typescript": "^5.8.3"
  },
  "engines": {
    "node": ">=20"
  }
}

2. DummyStack.tsx

import React from 'react';
import {Button, View} from 'react-native';

const DummyStack = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button
        title="Test Crash - WITH sentry-label"
        onPress={() => {
          throw new Error('Test Crash - WITH sentry-label');
        }}
        // Passing "sentry-label" prop will make the Replay not uploaded to Sentry Issue
        // Given the condition:
        // 1. reactNavigationIntegration() & mobileReplayIntegration() are both integrated
        // 2. this Button component that throws the Error is in a Stack Navigator
        sentry-label="DISABLE_REPLAY_BUG"
      />
    </View>
  );
};

export default DummyStack;

3. App.tsx

import React, {useRef} from 'react';
import * as Sentry from '@sentry/react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import DummyStack from './DummyStack';

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true,
});

const configureSentry = () => {
  Sentry.init({
    dsn: 'YOUR_DSN', // replace with your actual DSN
    debug: true,
    tracesSampleRate: 0.2,
    environment: 'development',
    appHangTimeoutInterval: 10,
    enableUserInteractionTracing: true,
    replaysSessionSampleRate: 0.0,
    replaysOnErrorSampleRate: 1.0, // Record a replay for 100% of error sessions
    integrations: [
      Sentry.mobileReplayIntegration({
        maskAllText: false,
        maskAllImages: false,
        maskAllVectors: false,
      }),
      navigationIntegration,
    ],
  });
};

configureSentry();

export const MainStack = createNativeStackNavigator();

function App(): React.JSX.Element {
  const containerRef = useRef(null);

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {
        navigationIntegration.registerNavigationContainer(containerRef);
      }}>
      <MainStack.Navigator>
        <MainStack.Screen
          name="DummyStack"
          component={DummyStack}
          options={{headerShown: false, animation: 'none'}}
        />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

export default Sentry.wrap(App);

[antonis]

I have attached the exact code used to test below, please let us know if its reproducible on your end. Many thanks.

Thank you for the detailed steps @adrian-bowtie. We will investigate and iterate back 🙇

[antonis]

Thanks again for your patience @adrian-bowtie 🙇 Heads up that we were able to replicate the reported behavior with the latest SDK, though not consistently. We are looking to understand the root of it and possible fixes.

[antonis]

@adrian-bowtie I was wondering if you could try with a custom labelName instead of sentry-label? Does the issue persist in this case for you?

[adrian-bowtie]

@antonis did not work on my current project that is using

"react-native": "0.78.2"
"@sentry/react-native": "^6.16.0"

We have also tested with "@sentry/react-native": "^7.6.0", and not working too

[antonis]

Thank you for the feedback 🙇 We are working on a fix with https://github.com/getsentry/sentry-react-native/pull/5386 I'll post an update here when this is shipped.

[antonis]

Heads up that a fix for this has been shipped with 7.7.0

[adrian-bowtie]

@antonis thanks for the update. however, somehow we are still able to reproduce the same issue if there's a label (sentry-label / custom label) included in the component.

Our project is using these versions:

"react-native": "0.78.2",
"@sentry/react-native": "^7.7.0",

[antonis]

@adrian-bowtie Thank you for iterating on this. We will look at this again.

[adrian-bowtie]

@antonis may i know if theres any update for this? thanks a lot

[antonis]

Our project is using these versions:

"react-native": "0.78.2",
"@sentry/react-native": "^7.7.0",

Thank you for the ping @adrian-bowtie. I've retested with this configuration on a fresh project and wasn't able to reproduce the issue with the latest version. We will keep looking into this. If you are able to reproduce it on a new project it would be helpful 🙇

[sregg]

@antonis have you tried enabling this annotateReactComponents param in the metro config?

[antonis]

I've tested this too but haven't managed to reproduce the issue.