Merge pull request #89871 from software-mansion-labs/kuba_nowakowski/fix/manual-tab-switch-span-metrics

Adjust sentry tab switching spans to tab navigator

Author: mountiny

src/CONST/index.ts

@@ -2094,6 +2094,7 @@ const CONST = {
         ATTRIBUTE_MIN_DURATION: 'min_duration',
         ATTRIBUTE_FINISHED_MANUALLY: 'finished_manually',
         ATTRIBUTE_IS_WARM: 'is_warm',
+        ATTRIBUTE_LAZY_TAB_FALLBACK_SHOWN: 'lazy_tab_fallback_shown',
         ATTRIBUTE_WAS_LIST_EMPTY: 'was_list_empty',
         ATTRIBUTE_SKELETON_PREFIX: 'skeleton.',
         ATTRIBUTE_SCENARIO: 'scenario',

src/components/Search/index.tsx

@@ -1575,6 +1575,15 @@ function Search({
         onContentReady?.();
     }, [sortedData, onContentReady]);
 
+    // Empty deps so this fires only on blur — merging with the body would cancel the span on every shouldShowLoadingState flip.
+    useFocusEffect(
+        useCallback(() => {
+            return () => {
+                cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS);
+            };
+        }, []),
+    );
+
     // Reset before conditional returns. Only cancelNavigationSpans (error/empty paths)
     // sets it to true. Must happen during render since it coordinates with the
     // dep-free useEffect above — see comment on didBailToFallbackState.

src/libs/Navigation/AppNavigator/Navigators/TabNavigator.tsx

@@ -11,6 +11,8 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {TabNavigatorParamList} from '@libs/Navigation/types';
+import {getSpan} from '@libs/telemetry/activeSpans';
+import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import TabNavigatorBar from './TabNavigatorBar';
@@ -21,20 +23,36 @@ const LazySearchFullscreenNavigator = lazy(() => import('./SearchFullscreenNavig
 const LazySettingsSplitNavigator = lazy(() => import('./SettingsSplitNavigator'));
 const LazyWorkspaceNavigator = lazy(() => import('./WorkspaceNavigator'));
 
-function withSuspense<P extends Record<string, unknown>>(LazyComponent: React.LazyExoticComponent<React.ComponentType<P>>) {
+type LazyFallbackProps = {
+    /** Sentry span to tag when this fallback renders. */
+    tabSpanName?: string;
+};
+
+function LazyFallback({tabSpanName}: LazyFallbackProps) {
+    const styles = useThemeStyles();
+
+    // Lets Sentry split slow tab navigations into "lazy chunk fetch" vs "screen render" buckets.
+    useEffect(() => {
+        if (!tabSpanName) {
+            return;
+        }
+        getSpan(tabSpanName)?.setAttribute(CONST.TELEMETRY.ATTRIBUTE_LAZY_TAB_FALLBACK_SHOWN, true);
+    }, [tabSpanName]);
+
+    return (
+        <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.appBG]}>
+            <ActivityIndicator
+                size="large"
+                reasonAttributes={{context: 'TabNavigator.LazyTab'}}
+            />
+        </View>
+    );
+}
+
+function withSuspense<P extends Record<string, unknown>>(LazyComponent: React.LazyExoticComponent<React.ComponentType<P>>, tabSpanName?: string) {
     function SuspenseWrapper(props: P) {
-        const styles = useThemeStyles();
         return (
-            <Suspense
-                fallback={
-                    <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.appBG]}>
-                        <ActivityIndicator
-                            size="large"
-                            reasonAttributes={{context: 'TabNavigator.LazyTab'}}
-                        />
-                    </View>
-                }
-            >
+            <Suspense fallback={<LazyFallback tabSpanName={tabSpanName} />}>
                 {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                 <LazyComponent {...props} />
             </Suspense>
@@ -44,8 +62,8 @@ function withSuspense<P extends Record<string, unknown>>(LazyComponent: React.La
 }
 
 const HomePageScreen = withSuspense(LazyHomePage);
-const ReportsSplitNavigatorScreen = withSuspense(LazyReportsSplitNavigator);
-const SearchFullscreenNavigatorScreen = withSuspense(LazySearchFullscreenNavigator);
+const ReportsSplitNavigatorScreen = withSuspense(LazyReportsSplitNavigator, CONST.TELEMETRY.SPAN_NAVIGATE_TO_INBOX_TAB);
+const SearchFullscreenNavigatorScreen = withSuspense(LazySearchFullscreenNavigator, CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS);
 const SettingsSplitNavigatorScreen = withSuspense(LazySettingsSplitNavigator);
 const WorkspaceNavigatorScreen = withSuspense(LazyWorkspaceNavigator);
 

src/libs/Navigation/AppNavigator/Navigators/TabNavigatorBar.tsx

@@ -11,6 +11,8 @@ import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getFocusedLeafScreenName from '@libs/Navigation/helpers/getFocusedLeafScreenName';
+import cancelTabNavigationSpans from '@libs/telemetry/cancelTabNavigationSpans';
+import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 
@@ -22,6 +24,11 @@ const ROUTE_TO_NAVIGATION_TAB: Record<string, ValueOf<typeof NAVIGATION_TABS>> =
     [NAVIGATORS.WORKSPACE_NAVIGATOR]: NAVIGATION_TABS.WORKSPACES,
 };
 
+const NAVIGATION_TAB_TO_SPAN: Partial<Record<ValueOf<typeof NAVIGATION_TABS>, string>> = {
+    [NAVIGATION_TABS.INBOX]: CONST.TELEMETRY.SPAN_NAVIGATE_TO_INBOX_TAB,
+    [NAVIGATION_TABS.SEARCH]: CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS,
+};
+
 // Count as tab-root when they surface as the resolved leaf.
 const TAB_WRAPPER_NAVIGATORS = new Set<string>([
     NAVIGATORS.REPORTS_SPLIT_NAVIGATOR,
@@ -95,6 +102,12 @@ function TabNavigatorBar({state}: Pick<BottomTabBarProps, 'state'>) {
         return () => cancelAnimationFrame(frameId);
     }, [stateKey]);
 
+    // Cancel any in-flight tab-navigation span that doesn't match the new focused tab.
+    // The span for the new tab is started by the tab button before navigation, so we keep it via `except`.
+    useEffect(() => {
+        cancelTabNavigationSpans(NAVIGATION_TAB_TO_SPAN[selectedTab]);
+    }, [selectedTab]);
+
     const isHidden = shouldHide || (shouldApplyDelay && animationDoneKey !== stateKey);
 
     if (shouldUseNarrowLayout) {

src/libs/telemetry/cancelTabNavigationSpans.ts

@@ -0,0 +1,19 @@
+import CONST from '@src/CONST';
+import {cancelSpan} from './activeSpans';
+
+const TAB_NAVIGATION_SPAN_IDS = [CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS, CONST.TELEMETRY.SPAN_NAVIGATE_TO_INBOX_TAB] as const;
+
+/**
+ * Cancels in-flight tab-navigation spans so an abandoned tap doesn't leave one ticking until the user returns.
+ * Pass `except` to preserve the span for the tab the user is now on.
+ */
+function cancelTabNavigationSpans(except?: string) {
+    for (const id of TAB_NAVIGATION_SPAN_IDS) {
+        if (id === except) {
+            continue;
+        }
+        cancelSpan(id);
+    }
+}
+
+export default cancelTabNavigationSpans;