[ReactNativeTracing]: Log a breadcrumb on route chnage

Environment

Sentry SaaS Sentry React Native with ReactNavigation v5 Integration

"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"@sentry/react-native": "^2.6.1",
"react-native": "0.64.2",

Steps to Reproduce

Run the iOS simulator.

Expected Result

I expect breadcrumbs to be reported for navigation events.

Actual Result

No breadcrumbs get reported to Sentry, but I can see that the navigation events happening in the beforeNavigate callback.

Startup logs here:

Initializing Sentry
Sentry Logger [Log]: Integration installed: ReactNativeErrorHandlers
Sentry Logger [Log]: Integration installed: Release
Sentry Logger [Log]: Integration installed: InboundFilters
Sentry Logger [Log]: Integration installed: FunctionToString
Sentry Logger [Log]: Integration installed: Breadcrumbs
Sentry Logger [Log]: Integration installed: LinkedErrors
Sentry Logger [Log]: Integration installed: UserAgent
Sentry Logger [Log]: Integration installed: DebugSymbolicator
Sentry Logger [Log]: Integration installed: RewriteFrames
Sentry Logger [Log]: Integration installed: DeviceContext
Sentry Logger [Log]: Setting idle transaction on scope. Span ID: 95d3aaf39e0a5283
Sentry Logger [Log]: [Tracing] starting navigation transaction - Route Change
Sentry Logger [Log]: Starting heartbeat
Sentry Logger [Log]: pinging Heartbeat -> current counter: 0
Sentry Logger [Log]: [ReactNativeTracing] Starting navigation transaction "Route Change" on scope
Sentry Logger [Log]: Integration installed: ReactNativeTracing
instrument.js:111 Running application Sona ({
    initialProps =     {
    };
    rootTag = 11;
})
instrument.js:111 Running "Sona" with {"rootTag":11,"initialProps":{}}
Sentry Logger [Log]: [Tracing] finishing IdleTransaction 2021-07-29T10:39:13.522Z navigation
Sentry Logger [Log]: [Tracing] flushing IdleTransaction
Sentry Logger [Log]: [Tracing] Finishing navigation transaction: Route Change.
Sentry Logger [Log]: [Tracing] finishing IdleTransaction 2021-07-29T10:39:13.526Z navigation
Sentry Logger [Log]: [Tracing] flushing IdleTransaction
Sentry Logger [Log]: [ReactNavigationV5Instrumentation] Navigation container registered, but integration has not been setup yet.

This is the Sentry / ReactNavigation setup. This is the first component rendered inside App.js

const routingInstrumentation = new Sentry.ReactNavigationV5Instrumentation()
const navigationRef = React.createRef<NavigationContainerRef>()

Sentry.init({
  debug: true,
  tracesSampleRate: 1.0,
  dsn: 'https://[e-mail]/5883228',
  integrations: [
    new Sentry.ReactNativeTracing({
      routingInstrumentation,
      beforeNavigate: context => {
        console.log({ context })
        return context
      },
    }),
  ],
})

export function RootContainer() {
  const { data, loading } = useRouterQuery({ fetchFromNetwork: true })
  const user = data?.user

  useSplashScreen(loading)

  return (
    <SafeAreaProvider style={styles.container}>
      <StatusBar />
      <NavigationContainer
        ref={navigationRef}
        onReady={() => routingInstrumentation.registerNavigationContainer(navigationRef)}>
        <RootRouter user={user} />
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

[james2m]

Hey @jennmueng you nailed it, I just realised the same thing. I was expecting breadcrumbs, yes. I’ve done a hokey version for the moment that seems to work by hooking into the instrumentation. Can you see any issues with this (ignoring style etc 😃

        beforeNavigate: context => {
          Sentry.addBreadcrumb({
            category: 'navigation',
            message: 'Navigated to ' + context.name,
            data: { params: context?.data?.route?.params },
            timestamp: context.startTimestamp,
            level: Sentry.Severity.Info,
          })
          return context
        },

[james2m]

thanks @jennmueng