Merge pull request Expensify#75439 from callstack-internal/feat/sentry-search-modal-metric

[Sentry] Add telemetry spans for search router open event

Author: rlinoz

src/CONST/index.ts

@@ -1659,6 +1659,7 @@ const CONST = {
         TAG_ACTIVE_POLICY: 'active_policy_id',
         SPAN_OPEN_REPORT: 'ManualOpenReport',
         SPAN_APP_STARTUP: 'ManualAppStartup',
+        SPAN_OPEN_SEARCH_ROUTER: 'ManualOpenSearchRouter',
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/components/Search/SearchAutocompleteList.tsx

@@ -44,6 +44,7 @@ import {
 } from '@libs/SearchQueryUtils';
 import {getDatePresets, getHasOptions} from '@libs/SearchUIUtils';
 import StringUtils from '@libs/StringUtils';
+import {endSpan} from '@libs/telemetry/activeSpans';
 import Timing from '@userActions/Timing';
 import CONST, {CONTINUATION_DETECTION_SEARCH_FILTER_KEYS} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -120,6 +121,7 @@ const defaultListOptions = {
 const setPerformanceTimersEnd = () => {
     Timing.end(CONST.TIMING.OPEN_SEARCH);
     Performance.markEnd(CONST.TIMING.OPEN_SEARCH);
+    endSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER);
 };
 
 function isSearchQueryListItem(listItem: UserListItemProps<OptionData> | SearchQueryListItemProps): listItem is SearchQueryListItemProps {

src/components/Search/SearchRouter/SearchButton.tsx

@@ -8,6 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Performance from '@libs/Performance';
+import {startSpan} from '@libs/telemetry/activeSpans';
 import {callFunctionIfActionIsAllowed} from '@userActions/Session';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
@@ -39,6 +40,10 @@ function SearchButton({style, shouldUseAutoHitSlop = false}: SearchButtonProps)
 
                     Timing.start(CONST.TIMING.OPEN_SEARCH);
                     Performance.markStart(CONST.TIMING.OPEN_SEARCH);
+                    startSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER, {
+                        name: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
+                        op: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
+                    });
 
                     openSearchRouter();
                 })}

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -2,7 +2,9 @@ import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
 import {navigationRef} from '@libs/Navigation/Navigation';
+import {startSpan} from '@libs/telemetry/activeSpans';
 import {close} from '@userActions/Modal';
+import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
@@ -92,6 +94,16 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
             }
         };
 
+        const startSearchRouterOpenSpan = () => {
+            startSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER, {
+                name: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
+                op: CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER,
+                attributes: {
+                    trigger: 'keyboard',
+                },
+            });
+        };
+
         // There are callbacks that live outside of React render-loop and interact with SearchRouter
         // So we need a function that is based on ref to correctly open/close it
         // When user is on `/search` page we focus the Input instead of showing router
@@ -104,11 +116,13 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
                 if (searchPageInputRef.current.isFocused()) {
                     searchPageInputRef.current.blur();
                 } else {
+                    startSearchRouterOpenSpan();
                     searchPageInputRef.current.focus();
                 }
             } else if (searchRouterDisplayedRef.current) {
                 closeSearchRouter();
             } else {
+                startSearchRouterOpenSpan();
                 openSearchRouter();
             }
         };