chore: enable sentry performance metrics

app.json

@@ -1,6 +1,6 @@
 {
   "appName": "eigen",
-  "version": "8.50.0",
+  "version": "8.51.0",
   "isAndroidBeta": false,
   "codePushReleaseName": "none",
   "codePushDist": "none"

index-common.js

@@ -17,7 +17,7 @@ if (__DEV__) {
   } catch {}
 }
 
-require("./src/app/system/errorReporting/sentrySetup").setupSentry({ environment: "bootstrap" })
+require("./src/app/system/errorReporting/setupSentry").setupSentry({ environment: "bootstrap" })
 import "react-native-url-polyfill/auto"
 const { AppRegistry } = require("react-native")
 

src/app/App.tsx

@@ -1,11 +1,12 @@
 import { GoogleSignin } from "@react-native-google-signin/google-signin"
+import * as Sentry from "@sentry/react-native"
 import { GlobalStore } from "app/store/GlobalStore"
 import { codePushOptions } from "app/system/codepush"
 import { AsyncStorageDevtools } from "app/system/devTools/AsyncStorageDevTools"
 import { DevMenuWrapper } from "app/system/devTools/DevMenu/DevMenuWrapper"
 import { setupFlipper } from "app/system/devTools/flipper"
 import { useRageShakeDevMenu } from "app/system/devTools/useRageShakeDevMenu"
-import { useErrorReporting } from "app/system/errorReporting/hooks"
+import { SentrySetup } from "app/system/errorReporting/Components/SentrySetup"
 import { ModalStack } from "app/system/navigation/ModalStack"
 import { usePurgeCacheOnAppUpdate } from "app/system/relay/usePurgeCacheOnAppUpdate"
 import { useDevToggle } from "app/utils/hooks/useDevToggle"
@@ -85,7 +86,6 @@ const Main = () => {
 
   const fpsCounter = useDevToggle("DTFPSCounter")
 
-  useErrorReporting()
   useStripeConfig()
   useSiftConfig()
   useWebViewCookies()
@@ -154,6 +154,7 @@ const Main = () => {
 const InnerApp = () => (
   <Providers>
     <AsyncStorageDevtools />
+    <SentrySetup />
 
     <DevMenuWrapper>
       <Main />
@@ -163,4 +164,5 @@ const InnerApp = () => (
   </Providers>
 )
 
-export const App = codePush(codePushOptions)(InnerApp)
+const SentryApp = Sentry.wrap(InnerApp)
+export const App = codePush(codePushOptions)(SentryApp)

src/app/Components/AutosuggestResults/AutosuggestResults.tests.tsx

@@ -112,8 +112,6 @@ const TestWrapper: typeof AutosuggestResults = (props) => (
 
 jest.mock("lodash/throttle", () => (f: any) => f)
 
-jest.mock("@sentry/react-native", () => ({ init() {}, captureMessage() {} }))
-
 // app/Scenes/Search/RecentSearches.tsx
 jest.mock("app/Scenes/Search/RecentSearches", () => {
   const notifyRecentSearch = jest.fn()

src/app/Scenes/Home/HomeContainer.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/react-native"
 import { HomeQueryRenderer } from "app/Scenes/Home/Home"
 import { HomeViewScreen } from "app/Scenes/HomeView/HomeView"
 import { Playground } from "app/Scenes/Playground/Playground"
@@ -7,7 +8,7 @@ import { useDevToggle } from "app/utils/hooks/useDevToggle"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { useEffect } from "react"
 
-export const HomeContainer = () => {
+export const InnerHomeContainer = () => {
   const artQuizState = GlobalStore.useAppState((state) => state.auth.onboardingArtQuizState)
   const isNavigationReady = GlobalStore.useAppState((state) => state.sessionState.isNavigationReady)
   const showPlayground = useDevToggle("DTShowPlayground")
@@ -38,3 +39,5 @@ export const HomeContainer = () => {
 
   return <HomeQueryRenderer />
 }
+
+export const HomeContainer = Sentry.withProfiler(InnerHomeContainer)

src/app/system/devTools/DevMenu/Components/DevTools.tsx

@@ -10,7 +10,7 @@ import { DevToggleName, devToggles } from "app/store/config/features"
 import { Versions } from "app/store/migration"
 import { DevMenuButtonItem } from "app/system/devTools/DevMenu/Components/DevMenuButtonItem"
 import { DevToggleItem } from "app/system/devTools/DevMenu/Components/DevToggleItem"
-import { eigenSentryReleaseName } from "app/system/errorReporting/sentrySetup"
+import { eigenSentryReleaseName } from "app/system/errorReporting/setupSentry"
 import { dismissModal, navigate } from "app/system/navigation/navigate"
 import { RelayCache } from "app/system/relay/RelayCache"
 import { useUnleashEnvironment } from "app/utils/experiments/hooks"

src/app/system/errorReporting/hooks.ts → src/app/system/errorReporting/Components/SentrySetup.tsx

@@ -1,16 +1,17 @@
 import { GlobalStore } from "app/store/GlobalStore"
+import { setupSentry } from "app/system/errorReporting/setupSentry"
 import { useDevToggle } from "app/utils/hooks/useDevToggle"
 import { useEffect } from "react"
-import { setupSentry } from "./sentrySetup"
 
-export function useErrorReporting() {
+export const SentrySetup = () => {
   const environment = GlobalStore.useAppState((store) => store.devicePrefs.environment.env)
   const captureExceptionsInSentryOnDev = useDevToggle("DTCaptureExceptionsInSentryOnDev")
   const captureExceptions = !__DEV__ ? true : captureExceptionsInSentryOnDev
-
   useEffect(() => {
-    if (captureExceptions) {
-      setupSentry({ environment, captureExceptionsInSentryOnDev })
-    }
-  }, [environment, captureExceptions])
+    setupSentry({
+      environment,
+      captureExceptionsInSentryOnDev: captureExceptions,
+    })
+  }, [environment, captureExceptionsInSentryOnDev])
+  return null
 }

src/app/system/errorReporting/sentrySetup.ts → src/app/system/errorReporting/setupSentry.ts

@@ -1,9 +1,17 @@
+import { findFocusedRoute } from "@react-navigation/native"
 import * as Sentry from "@sentry/react-native"
+import { TransactionContext } from "@sentry/types"
+import { __unsafe_mainModalStackRef } from "app/NativeModules/ARScreenPresenterModule"
+import { BottomTabOption } from "app/Scenes/BottomTabs/BottomTabType"
 import { appJson } from "app/utils/jsonFiles"
 import { Platform } from "react-native"
 import Config from "react-native-config"
 import DeviceInfo from "react-native-device-info"
 
+export const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
+  enableTimeToInitialDisplay: true,
+})
+
 // important! this must match the release version specified
 // in fastfile in order for sourcemaps/sentry stacktraces to work
 export const eigenSentryReleaseName = () => {
@@ -59,6 +67,37 @@ export function setupSentry(props: SetupSentryProps = {}) {
     autoSessionTracking: true,
     enableWatchdogTerminationTracking: false,
     attachStacktrace: true,
+    tracesSampleRate: 1.0,
+    integrations: [
+      new Sentry.ReactNativeTracing({
+        enableUserInteractionTracing: true,
+        routingInstrumentation,
+        beforeNavigate: (context: TransactionContext) => {
+          /**
+           * This is a hack because our navigation setup is weird.
+           * We have a main modal stack at the root and then every screen presented
+           * in a tab gets its own stack. Sentry is registering every screen in a tab as
+           * a screen transaction for the root screen. For example, tapping on an
+           * artwork in the home screen will fire as `screen:home` instead of `screen:artwork`.
+           * To fix it we find the focused route and update the context name to the correct screen name.
+           * This should be updated if we change our navigation setup.
+           */
+          if (__unsafe_mainModalStackRef.current) {
+            const mainNavState = __unsafe_mainModalStackRef.current?.getState()
+            const focusedRoute = findFocusedRoute(mainNavState)
+            const routeParams = focusedRoute?.params as { moduleName?: string }
+            if (routeParams?.moduleName && !(routeParams?.moduleName in BottomTabOption)) {
+              context.name = `screen:${routeParams.moduleName.toLowerCase()}`
+            }
+            context.sampled = true
+          } else {
+            // for now not sampling off main modal stack to avoid noise
+            context.sampled = false
+          }
+          return context
+        },
+      }),
+    ],
     ...props,
   })
 }

src/app/system/navigation/ModalStack.tsx

@@ -10,6 +10,7 @@ import { LoadingSpinner } from "app/Components/Modals/LoadingModal"
 import { __unsafe_mainModalStackRef } from "app/NativeModules/ARScreenPresenterModule"
 import { LegacyNativeModules } from "app/NativeModules/LegacyNativeModules"
 import { GlobalStore } from "app/store/GlobalStore"
+import { routingInstrumentation } from "app/system/errorReporting/setupSentry"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { logNavigation } from "app/utils/loggers"
 import { Platform } from "react-native"
@@ -48,6 +49,8 @@ export const ModalStack: React.FC = ({ children }) => {
       ref={__unsafe_mainModalStackRef}
       initialState={initialState}
       onReady={() => {
+        routingInstrumentation.registerNavigationContainer(__unsafe_mainModalStackRef)
+
         setNavigationReady({ isNavigationReady: true })
 
         if (trackSiftAndroid) {

src/app/utils/AboveTheFoldQueryRenderer.tsx

@@ -6,7 +6,7 @@ import { renderWithPlaceholder } from "./renderWithPlaceholder"
 
 interface AboveTheFoldQueryRendererProps<
   AboveQuery extends OperationType,
-  BelowQuery extends OperationType
+  BelowQuery extends OperationType,
 > {
   environment: Environment | MockEnvironment
   above: {
@@ -50,7 +50,7 @@ interface RenderArgs<Response> {
  */
 export function AboveTheFoldQueryRenderer<
   AboveQuery extends OperationType,
-  BelowQuery extends OperationType
+  BelowQuery extends OperationType,
 >(props: AboveTheFoldQueryRendererProps<AboveQuery, BelowQuery>) {
   const [aboveArgs, setAboveArgs] = useState<null | RenderArgs<AboveQuery["response"]>>(null)
   const [belowArgs, setBelowArgs] = useState<null | RenderArgs<BelowQuery["response"]>>(null)

src/setupJest.tsx

@@ -227,6 +227,12 @@ jest.mock("@sentry/react-native", () => ({
   addBreadcrumb() {},
   withScope() {},
   Severity: "info",
+  ReactNavigationInstrumentation: jest.fn().mockImplementation(() => ({
+    registerNavigationContainer: jest.fn(),
+  })),
+  wrap: jest.fn().mockImplementation((component) => component),
+  withProfiler: jest.fn().mockImplementation((component) => component),
+  TimeToFullDisplay: () => null,
 }))
 
 jest.mock("@react-native-mapbox-gl/maps", () => ({