fix(tracing): Support Expo Router 58 in expoRouterIntegration

CHANGELOG.md

@@ -33,6 +33,7 @@
 
 - Find `ios/.xcode.env` in the Expo plugin "Upload Debug Symbols to Sentry" phase when the iOS project uses Swift Package Manager instead of CocoaPods ([#6911](https://github.com/getsentry/sentry-react-native/pull/6911))
 - Fix HTTP timing listeners leaking on React Native below 0.83 and when `expo/fetch` is detected, and respect the `enableHTTPTimings` option ([#6912](https://github.com/getsentry/sentry-react-native/pull/6912))
+- Support Expo Router 58 in `expoRouterIntegration`. Metro no longer warns about the removed `expo-router/build/global-state/router-store` module, and the integration creates navigation spans again ([#6923](https://github.com/getsentry/sentry-react-native/pull/6923))
 - Remove the `@sentry/browser` feedback modules and the server-only `@sentry/core` modules from native bundles built on Windows. Before this fix, `includeWebFeedback: false` made these bundles fail at launch ([#6915](https://github.com/getsentry/sentry-react-native/pull/6915))
 - Stop wrapping the SDK's own `RNSentry` module in `turboModuleContextIntegration` by default. Each wrapped call wrote to the native scope several times, which added CPU time to every SDK call on iOS ([#6921](https://github.com/getsentry/sentry-react-native/pull/6921))
   - To wrap `RNSentry` again, add `{ name: 'RNSentry' }` to the `modules` option.

packages/core/etc/sentry-react-native.api.md

@@ -931,6 +931,7 @@ export interface ReactNativeWrapperOptions {
 export const reactNavigationIntegration: (input?: Partial<ReactNavigationIntegrationOptions>) => Integration & {
     registerNavigationContainer: (navigationContainerRef: unknown) => void;
     _setRouteOverrideProvider: (provider: RouteOverrideProvider | undefined) => void;
+    _startIdleNavigationSpan: (event: UnsafeAction) => void;
     options: ReactNavigationIntegrationOptions;
 };
 
@@ -1337,6 +1338,7 @@ export function wrapTurboModule<T extends object>(name: string, module: T | null
 //
 // src/js/tracing/reactnativetracing.ts:93:3 - (ae-forgotten-export) The symbol "ReactNativeTracingState" needs to be exported by the entry point index.d.ts
 // src/js/tracing/reactnavigation.ts:228:3 - (ae-forgotten-export) The symbol "RouteOverrideProvider" needs to be exported by the entry point index.d.ts
+// src/js/tracing/reactnavigation.ts:233:3 - (ae-forgotten-export) The symbol "UnsafeAction" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/core/src/js/tracing/expoRouterIntegration.ts

@@ -5,7 +5,11 @@ import { debug } from '@sentry/core';
 import type { ExpoRouterStore, ExpoRouterUrlObject } from './expoRouterStore';
 import type { RouteOverride } from './reactnavigation';
 
-import { buildExpoRouterTemplatedPath, tryGetExpoRouterStore } from './expoRouterStore';
+import {
+  buildExpoRouterTemplatedPath,
+  tryGetExpoRouterNavigationEvents,
+  tryGetExpoRouterStore,
+} from './expoRouterStore';
 import { getReactNavigationIntegration, reactNavigationIntegration } from './reactnavigation';
 
 export { buildExpoRouterTemplatedPath };
@@ -30,6 +34,7 @@ export type ExpoRouterIntegrationOptions = Parameters<typeof reactNavigationInte
  */
 export const expoRouterIntegration = (options: ExpoRouterIntegrationOptions = {}): Integration => {
   let pollTimer: ReturnType<typeof setTimeout> | undefined;
+  let removeActionListener: (() => void) | undefined;
 
   const afterAllSetup = (client: Client): void => {
     const store = tryGetExpoRouterStore();
@@ -58,14 +63,26 @@ export const expoRouterIntegration = (options: ExpoRouterIntegrationOptions = {}
         }
         reactNavigation._setRouteOverrideProvider?.(() => buildExpoRouterRouteOverride(store));
         reactNavigation.registerNavigationContainer(navigationRef);
+        removeActionListener = tryGetExpoRouterNavigationEvents()?.addListener('actionDispatched', event => {
+          if (!event.actionType) {
+            return;
+          }
+          reactNavigation._startIdleNavigationSpan?.({
+            data: {
+              action: { type: event.actionType, payload: event.payload as object | undefined },
+              noop: false,
+              stack: undefined,
+            },
+          });
+        });
         pollTimer = undefined;
         return;
       }
 
       if (Date.now() - startedAt >= POLL_MAX_DURATION_MS) {
         if (!navigationRef) {
           debug.warn(
-            `${INTEGRATION_NAME} Found expo-router router-store but it does not expose a \`navigationRef\`. ` +
+            `${INTEGRATION_NAME} Found expo-router but it does not expose a \`navigationRef\`. ` +
               `This likely means the installed expo-router version is incompatible with this integration.`,
           );
         } else {
@@ -85,6 +102,8 @@ export const expoRouterIntegration = (options: ExpoRouterIntegrationOptions = {}
         clearTimeout(pollTimer);
         pollTimer = undefined;
       }
+      removeActionListener?.();
+      removeActionListener = undefined;
     });
   };
 

packages/core/src/js/tracing/expoRouterStore.ts

@@ -10,6 +10,7 @@
 
 export interface ExpoRouterNavigationRef {
   current: unknown | null;
+  getRootState?: () => unknown;
 }
 
 export interface ExpoRouterUrlObject {
@@ -22,7 +23,7 @@ export interface ExpoRouterUrlObject {
 
 export interface ExpoRouterStore {
   navigationRef?: ExpoRouterNavigationRef;
-  getRouteInfo?: () => ExpoRouterUrlObject;
+  getRouteInfo?: () => ExpoRouterUrlObject | undefined;
 }
 
 export interface NormalizedExpoRouterRouteInfo {
@@ -42,17 +43,67 @@ export interface NormalizedExpoRouterRouteInfo {
   segments?: string[];
 }
 
+export interface ExpoRouterActionDispatchedEvent {
+  actionType?: string;
+  payload?: unknown;
+}
+
+export interface ExpoRouterInternalNavigationEvents {
+  addListener: (
+    name: 'actionDispatched',
+    callback: (event: ExpoRouterActionDispatchedEvent) => void,
+  ) => (() => void) | undefined;
+}
+
 /**
- * Returns Expo Router's internal router store, or `null` if `expo-router` is
- * not installed or the build does not expose the expected module path.
+ * Returns the navigation container ref and route info of Expo Router, or `null`
+ * if `expo-router` is not installed or does not expose the expected API.
+ *
+ * Only module paths that exist in every supported Expo Router version are
+ * required here. Expo Router 58 declares `exports`, so Metro warns about any
+ * deep path that is missing from the installed version.
  */
 export function tryGetExpoRouterStore(): ExpoRouterStore | null {
   try {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const mod = require('expo-router/build/global-state/router-store') as {
-      store?: ExpoRouterStore;
+    const expoRouter = require('expo-router') as {
+      useNavigationContainerRef?: () => ExpoRouterNavigationRef | undefined;
+    };
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const routeInfoModule = require('expo-router/build/global-state/getRouteInfoFromState') as {
+      getRouteInfoFromState?: (state: unknown) => ExpoRouterUrlObject;
+    };
+    // Not a React hook: it returns a module-level ref in Expo Router 57 and 58.
+    const getNavigationContainerRef = expoRouter?.useNavigationContainerRef;
+    const getRouteInfoFromState = routeInfoModule?.getRouteInfoFromState;
+    if (!getNavigationContainerRef || !getRouteInfoFromState) {
+      return null;
+    }
+    const navigationRef = getNavigationContainerRef();
+    return {
+      navigationRef,
+      getRouteInfo: () => {
+        const state = navigationRef?.current ? navigationRef.getRootState?.() : undefined;
+        return state ? getRouteInfoFromState(state) : undefined;
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Returns the internal navigation event emitter of Expo Router 58 and later, or
+ * `null` for older versions. Expo Router 58 does not emit React Navigation's
+ * `__unsafe_action__` event, so this is the only signal of a dispatched action.
+ */
+export function tryGetExpoRouterNavigationEvents(): ExpoRouterInternalNavigationEvents | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require('expo-router/build/global-state/internalNavigationEvents') as {
+      internalNavigationEvents?: ExpoRouterInternalNavigationEvents;
     };
-    return mod?.store ?? null;
+    return mod?.internalNavigationEvents ?? null;
   } catch {
     return null;
   }

packages/core/src/js/tracing/reactnavigation.ts

@@ -226,6 +226,11 @@ export const reactNavigationIntegration = ({
    * supply the canonical route info on every state change. Use `undefined` to clear.
    */
   _setRouteOverrideProvider: (provider: RouteOverrideProvider | undefined) => void;
+  /**
+   * @internal API: start a navigation span for a dispatched action, for navigators that do not
+   * emit `__unsafe_action__` (for example, Expo Router 58 and later).
+   */
+  _startIdleNavigationSpan: (event: UnsafeAction) => void;
   options: ReactNavigationIntegrationOptions;
 } => {
   let navigationContainer: NavigationContainer | undefined;
@@ -896,6 +901,7 @@ export const reactNavigationIntegration = ({
     afterAllSetup,
     registerNavigationContainer,
     _setRouteOverrideProvider,
+    _startIdleNavigationSpan: event => startIdleNavigationSpan(event),
     options: {
       routeChangeTimeoutMs,
       enableTimeToInitialDisplay,