test basic perf setup

src/app/system/errorReporting/sentrySetup.ts

@@ -4,6 +4,10 @@ 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 +63,8 @@ export function setupSentry(props: SetupSentryProps = {}) {
     autoSessionTracking: true,
     enableWatchdogTerminationTracking: false,
     attachStacktrace: true,
+    tracesSampleRate: 1.0, // TODO: Set this lower before production
+    integrations: [new Sentry.ReactNativeTracing({ routingInstrumentation })],
     ...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/sentrySetup"
 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

@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/react-native"
 import React, { useEffect, useMemo, useState } from "react"
 import { QueryRenderer, Environment, GraphQLTaggedNode } from "react-relay"
 import { CacheConfig, FetchPolicy, OperationType } from "relay-runtime"
@@ -6,7 +7,7 @@ import { renderWithPlaceholder } from "./renderWithPlaceholder"
 
 interface AboveTheFoldQueryRendererProps<
   AboveQuery extends OperationType,
-  BelowQuery extends OperationType
+  BelowQuery extends OperationType,
 > {
   environment: Environment | MockEnvironment
   above: {
@@ -50,7 +51,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)
@@ -68,6 +69,8 @@ export function AboveTheFoldQueryRenderer<
   // we should also call render if we are no longer waiting for a debounce
   const shouldCallRender = (aboveArgs?.props && belowArgs?.props) || hasFinishedDebouncing
 
+  const shouldRecordFullDisplay = aboveArgs !== null
+
   const render = useMemo(
     () =>
       typeof props.render === "function"
@@ -99,6 +102,7 @@ export function AboveTheFoldQueryRenderer<
 
   return (
     <>
+      <Sentry.TimeToFullDisplay record={shouldRecordFullDisplay} />
       <QueryRenderer
         environment={props.environment}
         query={props.above.query}