track 404 page

src/CONST/index.ts

@@ -1685,6 +1685,7 @@ const CONST = {
         SPAN_OPEN_SEARCH_ROUTER: 'ManualOpenSearchRouter',
         SPAN_OPEN_CREATE_EXPENSE: 'ManualOpenCreateExpense',
         SPAN_SEND_MESSAGE: 'ManualSendMessage',
+        SPAN_NOT_FOUND_PAGE: 'ManualNotFoundPage',
         SPAN_SKELETON: 'ManualSkeleton',
         SPAN_BOOTSPLASH: {
             ROOT: 'BootsplashVisible',

src/components/BlockingViews/BlockingView.tsx

@@ -12,6 +12,7 @@ import Text from '@components/Text';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import useAbsentPageSpan from '@libs/telemetry/useAbsentPageSpan';
 import variables from '@styles/variables';
 import type {TranslationPaths} from '@src/languages/types';
 import BlockingViewSubtitle from './BlockingViewSubtitle';
@@ -124,6 +125,8 @@ function BlockingView({
     );
     const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: containerStyleProp});
 
+    useAbsentPageSpan();
+
     return (
         <View
             style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10, containerStyle]}

src/libs/telemetry/useAbsentPageSpan.ts

@@ -0,0 +1,36 @@
+import {useContext, useEffect} from 'react';
+import {Platform} from 'react-native';
+import {InitialURLContext} from '@components/InitialURLContextProvider';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import {endSpan, startSpan} from './activeSpans';
+
+export default function useAbsentPageSpan() {
+    const {initialURL} = useContext(InitialURLContext);
+
+    useEffect(() => {
+        let isDeeplink = false;
+        let currentUrl = '';
+
+        if (Platform.OS === 'web') {
+            currentUrl = window.location.href;
+            isDeeplink = currentUrl === initialURL;
+        } else {
+            isDeeplink = !!initialURL;
+            currentUrl = Navigation.getActiveRoute() || '';
+        }
+
+        const NAVIGATION_SOURCE = isDeeplink ? 'deeplink' : 'button';
+
+        startSpan(CONST.TELEMETRY.SPAN_NOT_FOUND_PAGE, {
+            name: CONST.TELEMETRY.SPAN_NOT_FOUND_PAGE,
+            op: CONST.TELEMETRY.SPAN_NOT_FOUND_PAGE,
+            attributes: {
+                url: currentUrl,
+                navigationSource: NAVIGATION_SOURCE,
+            },
+        });
+
+        endSpan(CONST.TELEMETRY.SPAN_NOT_FOUND_PAGE);
+    }, [initialURL]);
+}

src/pages/ErrorPage/NotFoundPage.tsx

@@ -5,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import Navigation from '@libs/Navigation/Navigation';
+import useAbsentPageSpan from '@libs/telemetry/useAbsentPageSpan';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type NotFoundPageProps = {
@@ -19,7 +20,9 @@ function NotFoundPage({onBackButtonPress = () => Navigation.goBack(), isReportRe
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
     const topmostReportId = Navigation.getTopmostReportId();
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${topmostReportId}`);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${topmostReportId}`, {canBeMissing: true});
+
+    useAbsentPageSpan();
 
     return (
         <ScreenWrapper