chore: enable sentry performance metrics

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 { GlobalStore } from "app/store/GlobalStore"
+import * as Sentry from "@sentry/react-native"
+import { GlobalStore, unsafe__getEnvironment, unsafe_getDevToggle } 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 { setupSentry } from "app/system/errorReporting/setupSentry"
 import { ModalStack } from "app/system/navigation/ModalStack"
 import { usePurgeCacheOnAppUpdate } from "app/system/relay/usePurgeCacheOnAppUpdate"
 import { useDevToggle } from "app/utils/hooks/useDevToggle"
@@ -54,6 +55,14 @@ if (__DEV__) {
 
 setupFlipper()
 
+// Sentry must be setup early in the app lifecycle to hook into navigation
+const debugSentry = unsafe_getDevToggle("DTDebugSentry")
+const environment = unsafe__getEnvironment()
+setupSentry({
+  environment: environment.env,
+  debug: debugSentry,
+})
+
 addTrackingProvider(SEGMENT_TRACKING_PROVIDER, SegmentTrackingProvider)
 addTrackingProvider("console", ConsoleTrackingProvider)
 
@@ -85,7 +94,6 @@ const Main = () => {
 
   const fpsCounter = useDevToggle("DTFPSCounter")
 
-  useErrorReporting()
   useStripeConfig()
   useSiftConfig()
   useWebViewCookies()
@@ -163,4 +171,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 { ArtsyNativeModule } from "app/NativeModules/ArtsyNativeModule"
 import { HomeQueryRenderer } from "app/Scenes/Home/Home"
 import { HomeViewScreen } from "app/Scenes/HomeView/HomeView"
@@ -8,7 +9,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")
@@ -42,3 +43,5 @@ export const HomeContainer = () => {
     return <HomeQueryRenderer />
   }
 }
+
+export const HomeContainer = Sentry.withProfiler(InnerHomeContainer)

src/app/Scenes/MyProfile/__tests__/MyProfileEditForm.tests.tsx

@@ -16,10 +16,6 @@ jest.mock("@react-navigation/native", () => {
   }
 })
 
-jest.mock("@sentry/react-native", () => ({
-  captureMessage: jest.fn(),
-}))
-
 describe("MyProfileEditForm", () => {
   const { renderWithRelay } = setupTestWrapper<MyProfileEditFormTestsQuery>({
     Component: (props) => {

src/app/store/config/features.ts

@@ -1,6 +1,8 @@
 import { useToast } from "app/Components/Toast/toastHook"
-import { GlobalStore } from "app/store/GlobalStore"
+import { GlobalStore, unsafe__getEnvironment } from "app/store/GlobalStore"
+import { setupSentry } from "app/system/errorReporting/setupSentry"
 import { echoLaunchJson } from "app/utils/jsonFiles"
+import Config from "react-native-config"
 
 interface FeatureDescriptorCommonTypes {
   /** Provide a short description for the Dev Menu. */
@@ -330,8 +332,29 @@ export const devToggles: { [key: string]: DevToggleDescriptor } = {
   DTShowInstagramShot: {
     description: "Instagram viewshot debug",
   },
-  DTCaptureExceptionsInSentryOnDev: {
-    description: "Capture exceptions in Sentry on DEV",
+  DTDebugSentry: {
+    description: "Enable sentry debug mode and send exceptions to sentry",
+    onChange: (value, { toast }) => {
+      if (!Config.SENTRY_DSN) {
+        toast.show(
+          `No Sentry DSN available ${__DEV__ ? "Set it in .env.shared and re-build the app." : ""}`,
+          "middle"
+        )
+        return
+      }
+
+      const environment = unsafe__getEnvironment()
+      setupSentry({
+        environment: environment.env,
+        debug: value,
+      })
+
+      if (value) {
+        toast.show("Sentry debugging enabled", "middle")
+      } else {
+        toast.show("Sentry debugging disabled", "middle")
+      }
+    },
   },
   DTFPSCounter: {
     description: "FPS counter",

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/setupSentry.ts

@@ -0,0 +1,105 @@
+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 = () => {
+  const codePushReleaseName = appJson().codePushReleaseName
+  if (codePushReleaseName && codePushReleaseName !== "none") {
+    return codePushReleaseName
+  } else {
+    const prefix = Platform.OS === "ios" ? "ios" : "android"
+    const buildNumber = DeviceInfo.getBuildNumber()
+    const version = DeviceInfo.getVersion()
+    return prefix + "-" + version + "-" + buildNumber
+  }
+}
+
+const eigenSentryDist = () => {
+  const codePushDist = appJson().codePushDist
+  if (codePushDist && codePushDist !== "none") {
+    return codePushDist
+  } else {
+    return DeviceInfo.getBuildNumber()
+  }
+}
+
+interface SetupSentryProps extends Partial<Sentry.ReactNativeOptions> {
+  debug?: boolean
+}
+
+export function setupSentry(props: SetupSentryProps = { debug: false }) {
+  const sentryDSN = Config.SENTRY_DSN
+  const ossUser = Config.OSS === "true"
+
+  // In DEV, enabling this will clober stack traces in errors and logs, obscuring
+  // the source of the error. So we disable it in dev mode.
+  if (__DEV__ && !props.debug) {
+    console.log("[dev] Sentry disabled in dev mode.")
+    return
+  }
+
+  if (ossUser) {
+    console.log("[oss] Sentry disabled in for oss user.")
+    return
+  }
+
+  if (!sentryDSN) {
+    console.error("Sentry DSN not set!!")
+    return
+  }
+
+  Sentry.init({
+    dsn: sentryDSN,
+    release: eigenSentryReleaseName(),
+    dist: eigenSentryDist(),
+    enableAutoSessionTracking: true,
+    autoSessionTracking: true,
+    enableWatchdogTerminationTracking: false,
+    attachStacktrace: true,
+    tracesSampleRate: props.debug ? 1.0 : 0.1,
+    debug: props.debug,
+    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/system/relay/middlewares/errorMiddleware.tests.ts

@@ -2,12 +2,6 @@ import { MiddlewareNextFn, RelayNetworkLayerResponse } from "react-relay-network
 import { errorMiddleware } from "./errorMiddleware"
 import { GraphQLRequest } from "./types"
 
-jest.mock("@sentry/react-native", () => ({
-  init: jest.requireActual("@sentry/react-native").init,
-  withScope: jest.requireActual("@sentry/react-native").withScope,
-  captureException: jest.fn(),
-}))
-
 describe(errorMiddleware, () => {
   const middleware = errorMiddleware()
 

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/app/utils/volleyClient.tests.ts

@@ -9,10 +9,6 @@ jest.mock("lodash/throttle", () => (fn: any, ms: any) => {
   }
 })
 
-jest.mock("@sentry/react-native", () => ({
-  captureMessage: jest.fn(),
-}))
-
 jest.useFakeTimers({
   legacyFakeTimers: true,
 })