Use new Sentry tracing

src/Screens.tsx

@@ -9,7 +9,6 @@ import ScreenAnnouncements from '@screens/Announcements'
 import ScreenCompose from '@screens/Compose'
 import ScreenImagesViewer from '@screens/ImagesViewer'
 import ScreenTabs from '@screens/Tabs'
-import * as Sentry from '@sentry/react-native'
 import initQuery from '@utils/initQuery'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import pushUseConnect from '@utils/push/useConnect'
@@ -25,11 +24,12 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { themes } from '@utils/styles/themes'
 import * as Linking from 'expo-linking'
 import { addScreenshotListener } from 'expo-screen-capture'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
 import ShareMenu from 'react-native-share-menu'
 import { useSelector } from 'react-redux'
+import { routingInstrumentation } from './startup/sentry'
 import { useAppDispatch } from './store'
 
 const Stack = createNativeStackNavigator<RootStackParamList>()
@@ -49,8 +49,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   const instanceActive = useSelector(getInstanceActive)
   const { colors, theme } = useTheme()
 
-  const routeRef = useRef<{ name?: string; params?: {} }>()
-
   // Push hooks
   const instances = useSelector(getInstances, (prev, next) => prev.length === next.length)
   pushUseConnect()
@@ -97,15 +95,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   }, [instanceActive])
 
   // Callbacks
-  const navigationContainerOnReady = useCallback(() => {
-    const currentRoute = navigationRef.getCurrentRoute()
-    routeRef.current = {
-      name: currentRoute?.name,
-      params: currentRoute?.params ? JSON.stringify(currentRoute.params) : undefined
-    }
-  }, [])
   const navigationContainerOnStateChange = useCallback(() => {
-    const previousRoute = routeRef.current
     const currentRoute = navigationRef.getCurrentRoute()
 
     const matchTabName = currentRoute?.name?.match(/(Tab-.*)-Root/)
@@ -113,15 +103,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
       //@ts-ignore
       dispatch(updatePreviousTab(matchTabName[1]))
     }
-
-    if (previousRoute?.name !== currentRoute?.name) {
-      Sentry.setContext('page', {
-        previous: previousRoute,
-        current: currentRoute
-      })
-    }
-
-    routeRef.current = currentRoute
   }, [])
 
   // Deep linking for compose
@@ -279,7 +260,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
       <NavigationContainer
         ref={navigationRef}
         theme={themes[theme]}
-        onReady={navigationContainerOnReady}
+        onReady={() => routingInstrumentation.registerNavigationContainer(navigationRef)}
         onStateChange={navigationContainerOnStateChange}
       >
         <Stack.Navigator initialRouteName='Screen-Tabs'>

src/startup/sentry.ts

@@ -2,15 +2,19 @@ import * as Sentry from '@sentry/react-native'
 import { isDevelopment } from '@utils/checkEnvironment'
 import log from './log'
 
+export const routingInstrumentation = new Sentry.ReactNavigationInstrumentation()
+
 const sentry = () => {
   log('log', 'Sentry', 'initializing')
+
   Sentry.init({
     enabled: !isDevelopment,
     dsn: 'https://53348b60ff844d52886e90251b3a5f41@o917354.ingest.sentry.io/6410576',
     tracesSampleRate: 0.35,
     integrations: [
       new Sentry.ReactNativeTracing({
-        tracingOrigins: ['api.tooot.app']
+        routingInstrumentation,
+        tracingOrigins: ['tooot.app']
       })
     ],
     autoSessionTracking: true