Enabling Sentry.ReactNativeTracing results in Cannot read properties of undefined (reading 'remove') when sending error.

[the-simian]

OS:

• Windows
• Linux

Platform:

• iOS
• Android

SDK:

• @sentry/react-native (>= 1.0.0)

SDK version: 5.19.1

react-native version: 0.73.6

Are you using Expo?

• Yes

Are you using sentry.io or on-premise?

• sentry.io (SaaS)

If you are using sentry.io, please post a link to your issue so we can take a look:
The issue is logged but breaks the dev server.

[Link to issue]

Configuration:

(@sentry/react-native)

import * as Sentry from '@sentry/react-native';
import { Slot, useNavigationContainerRef } from 'expo-router';

const routingInstrumentation = new Sentry.ReactNavigationInstrumentation();

Sentry.init({
  dsn: 'My-DSN',
  debug: true,
  tracesSampleRate: 1.0,
  integrations: [
    new Sentry.ReactNativeTracing({
        enableNativeFramesTracking: Constants.appOwnership !== 'expo',
      enableUserInteractionTracing: true,
      routingInstrumentation,
    }),
  ],
});

export function RootLayout() {
  useEffect(() => {
    if (navRef) {
      routingInstrumentation.registerNavigationContainer(navRef);
    }
  }, [navRef]);

   return <Slot />
}



export default Sentry.wrap(RootLayout);

---

I have the following issue:

When I willfully throw a test error via Sentry, with the above configuration, the dev server is halted with an error emitting from sentry itself. Here is the trace:

TypeError: Cannot read properties of undefined (reading 'remove')
    at callback (/home/the-simian/<app>/node_modules/@sentry/react-native/dist/js/tracing/transaction.js:28:22)
    at IdleTransaction.end (/home/the-simian/<app>/node_modules/@sentry/core/cjs/tracing/idletransaction.js:160:9)
    at IdleTransaction.finish (/home/the-simian/<app>/node_modules/@sentry/core/cjs/tracing/span.js:475:17)
    at ReactNavigationInstrumentation.apply [as _discardLatestTransaction] (/home/the-simian/<app>/node_modules/@sentry/react-native/dist/js/tracing/reactnavigation.js:174:37)
    at Timeout.sentryWrapped [as _onTimeout] (/home/the-simian/<app>/node_modules/@sentry/browser/cjs/helpers.js:93:17)
    at listOnTimeout (node:internal/timers:573:17)
    at processTimers (node:internal/timers:514:7)

Node.js v21.6.2

Steps to reproduce:

• Step 1: Configure Sentry as seen above.
• Step 2: Add a 'Test' Button and Press it like:

      <Pressable
        onPress={() => {
          Sentry.captureException(
            new Error(
              `[Test Error] | 💥💥 Kaboom!!! 💥💥 at ${new Date().toISOString()}`,
            ),
          );
        }}
      >
        <View>
          <Text>
            Kaboom!
          </Text>
        </View>
      </Pressable>

Actual result:

See trace

Expected result:

No Error

[daehyeonmun2021]

I have the same issue.

[krystofwoldrich]

Hi,
thank you for the message @the-simian and @daehyeonmun2021.

I was able to reproduce this with react-native-web. Can you confirm it happens on the web or do you experience it also on Android or iOS with or without Expo Go?

[the-simian]

This happens in Android on Expo Go as well as the Dev Client Build; both break.
I've not tested the web build, @krystofwoldrich

[the-simian]

I tested the web build, and I get the same error. The trace is slightly different, here is the web build:

/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/react-native/dist/js/tracing/transaction.js:28
        subscription.remove();
                     ^
TypeError: Cannot read properties of undefined (reading 'remove')
    at callback (/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/react-native/dist/js/tracing/transaction.js:28:22)
    at IdleTransaction.end (/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/core/cjs/tracing/idletransaction.js:160:9)
    at IdleTransaction.finish (/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/core/cjs/tracing/span.js:475:17)
    at ReactNavigationInstrumentation.apply [as _discardLatestTransaction] (/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/react-native/dist/js/tracing/reactnavigation.js:174:37)
    at Timeout.sentryWrapped [as _onTimeout] (/home/the-simian/<app>/apps/lifeguides-mobile/node_modules/@sentry/browser/cjs/helpers.js:93:17)
    at listOnTimeout (node:internal/timers:573:17)
    at processTimers (node:internal/timers:514:7)

this points to the tracing/transaction.js file.