[No QA] fix: telemetry outliers

src/CONST/index.ts

@@ -1454,12 +1454,12 @@ const CONST = {
     TIMING: {
         GET_ORDERED_REPORT_IDS: 'get_ordered_report_ids',
         CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
-        OPEN_APP: 'open_app',
         SPLASH_SCREEN: 'splash_screen',
         OPEN_SEARCH: 'open_search',
         OPEN_REPORT: 'open_report',
         OPEN_REPORT_FROM_PREVIEW: 'open_report_from_preview',
         OPEN_REPORT_THREAD: 'open_report_thread',
+        OPEN_REPORT_SEARCH: 'open_report_search',
         SIDEBAR_LOADED: 'sidebar_loaded',
         LOAD_SEARCH_OPTIONS: 'load_search_options',
         SEND_MESSAGE: 'send_message',

src/SplashScreenStateContext.tsx

@@ -1,7 +1,6 @@
-import React, {useContext, useEffect, useMemo, useState} from 'react';
+import React, {useContext, useMemo, useState} from 'react';
 import type {ValueOf} from 'type-fest';
 import CONST from './CONST';
-import Timing from './libs/actions/Timing';
 import type ChildrenProps from './types/utils/ChildrenProps';
 
 type SplashScreenStateContextType = {
@@ -24,14 +23,6 @@ function SplashScreenStateContextProvider({children}: ChildrenProps) {
         [splashScreenState],
     );
 
-    useEffect(() => {
-        if (splashScreenState !== 'hidden') {
-            return;
-        }
-
-        Timing.end(CONST.TIMING.SPLASH_SCREEN);
-    }, [splashScreenState]);
-
     return <SplashScreenStateContext.Provider value={splashScreenStateContext}>{children}</SplashScreenStateContext.Provider>;
 }
 

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -45,6 +45,7 @@ import {
     wasMessageReceivedWhileOffline,
 } from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction, chatIncludesChronosWithID, getReportLastVisibleActionCreated, isUnread} from '@libs/ReportUtils';
+import markOpenReportEnd from '@libs/Telemetry/markOpenReportEnd';
 import {isTransactionPendingDelete} from '@libs/TransactionUtils';
 import Visibility from '@libs/Visibility';
 import isSearchTopmostFullScreenRoute from '@navigation/helpers/isSearchTopmostFullScreenRoute';
@@ -121,6 +122,7 @@ function MoneyRequestReportActionsList({
     const {isOffline, lastOfflineAt, lastOnlineAt} = useNetworkWithOfflineStatus();
     const reportScrollManager = useReportScrollManager();
     const lastMessageTime = useRef<string | null>(null);
+    const didLayout = useRef(false);
     const [isVisible, setIsVisible] = useState(Visibility.isVisible);
     const isFocused = useIsFocused();
     const route = useRoute<PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>>();
@@ -532,6 +534,19 @@ function MoneyRequestReportActionsList({
     // Parse Fullstory attributes on initial render
     useLayoutEffect(parseFSAttributes, []);
 
+    /**
+     * Runs when the FlatList finishes laying out
+     */
+    const recordTimeToMeasureItemLayout = useCallback(() => {
+        if (didLayout.current) {
+            return;
+        }
+
+        didLayout.current = true;
+
+        markOpenReportEnd();
+    }, []);
+
     const isSelectAllChecked = selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length;
 
     return (
@@ -614,6 +629,7 @@ function MoneyRequestReportActionsList({
                         data={visibleReportActions}
                         renderItem={renderItem}
                         keyExtractor={(item) => item.reportActionID}
+                        onLayout={recordTimeToMeasureItemLayout}
                         onEndReached={onEndReached}
                         onEndReachedThreshold={0.75}
                         onStartReached={onStartReached}

src/components/Search/index.tsx

@@ -17,10 +17,12 @@ import useSearchHighlightAndScroll from '@hooks/useSearchHighlightAndScroll';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOffMobileSelectionMode, turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import {openSearch, updateSearchResultsWithTransactionThreadReportID} from '@libs/actions/Search';
+import Timing from '@libs/actions/Timing';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
+import Performance from '@libs/Performance';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
 import {canEditFieldOfMoneyRequest, generateReportID} from '@libs/ReportUtils';
 import {buildSearchQueryString} from '@libs/SearchQueryUtils';
@@ -416,6 +418,9 @@ function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onS
                 return;
             }
 
+            Performance.markStart(CONST.TIMING.OPEN_REPORT_SEARCH);
+            Timing.start(CONST.TIMING.OPEN_REPORT_SEARCH);
+
             const backTo = Navigation.getActiveRoute();
 
             if (isTransactionGroupListItemType(item)) {

src/libs/BootSplash/index.native.ts

@@ -1,11 +1,18 @@
-import {NativeModules} from 'react-native';
+import {InteractionManager, NativeModules} from 'react-native';
+import Timing from '@libs/actions/Timing';
 import Log from '@libs/Log';
+import CONST from '@src/CONST';
 
 const BootSplash = NativeModules.BootSplash;
 
 function hide(): Promise<void> {
     Log.info('[BootSplash] hiding splash screen', false);
-    return BootSplash.hide();
+
+    return BootSplash.hide().finally(() => {
+        InteractionManager.runAfterInteractions(() => {
+            Timing.end(CONST.TIMING.SPLASH_SCREEN);
+        });
+    });
 }
 
 export default {

src/libs/BootSplash/index.ts

@@ -1,4 +1,7 @@
+import {InteractionManager} from 'react-native';
+import Timing from '@libs/actions/Timing';
 import Log from '@libs/Log';
+import CONST from '@src/CONST';
 
 function resolveAfter(delay: number): Promise<void> {
     return new Promise<void>((resolve) => {
@@ -15,6 +18,10 @@ function hide(): Promise<void> {
             splash.style.opacity = '0';
         }
 
+        InteractionManager.runAfterInteractions(() => {
+            Timing.end(CONST.TIMING.SPLASH_SCREEN);
+        });
+
         return resolveAfter(250).then(() => {
             if (!splash?.parentNode) {
                 return;

src/libs/Telemetry/markOpenReportEnd.ts

@@ -0,0 +1,22 @@
+import Timing from '@libs/actions/Timing';
+import Performance from '@libs/Performance';
+import CONST from '@src/CONST';
+
+/**
+ * Mark all 'open_report*' performance events as finished using both Performance (local) and Timing (remote) tracking.
+ */
+function markOpenReportEnd() {
+    Performance.markEnd(CONST.TIMING.OPEN_REPORT);
+    Timing.end(CONST.TIMING.OPEN_REPORT);
+
+    Performance.markEnd(CONST.TIMING.OPEN_REPORT_THREAD);
+    Timing.end(CONST.TIMING.OPEN_REPORT_THREAD);
+
+    Performance.markEnd(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW);
+    Timing.end(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW);
+
+    Performance.markEnd(CONST.TIMING.OPEN_REPORT_SEARCH);
+    Timing.end(CONST.TIMING.OPEN_REPORT_SEARCH);
+}
+
+export default markOpenReportEnd;

src/libs/actions/App.ts

@@ -35,7 +35,6 @@
 import {createDraftInitialWorkspace, createWorkspace, generatePolicyID} from './Policy/Policy';
 import {resolveDuplicationConflictAction} from './RequestConflictUtils';
 import {isAnonymousUser} from './Session';
-import Timing from './Timing';
 
 type PolicyParamsForOpenOrReconnect = {
     policyIDList: string[];
@@ -43,7 +42,7 @@
 
 let currentUserAccountID: number | undefined;
 let currentUserEmail: string;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         currentUserAccountID = val?.accountID;
@@ -52,14 +51,14 @@
 });
 
 let isSidebarLoaded: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.IS_SIDEBAR_LOADED,
     callback: (val) => (isSidebarLoaded = val),
     initWithStoredValues: false,
 });
 
 let preferredLocale: Locale | undefined;
 Onyx.connect({
     key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     callback: (val) => {
         if (!val || !isSupportedLocale(val)) {
@@ -79,7 +78,7 @@
 });
 
 let priorityMode: ValueOf<typeof CONST.PRIORITY_MODE> | undefined;
 Onyx.connect({
     key: ONYXKEYS.NVP_PRIORITY_MODE,
     callback: (nextPriorityMode) => {
         // When someone switches their priority mode we need to fetch all their chats because only #focus mode works with a subset of a user's chats. This is only possible via the OpenApp command.
@@ -92,7 +91,7 @@
 });
 
 let isUsingImportedState: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.IS_USING_IMPORTED_STATE,
     callback: (value) => {
         isUsingImportedState = value ?? false;
@@ -100,7 +99,7 @@
 });
 
 let preservedUserSession: OnyxTypes.Session | undefined;
 Onyx.connect({
     key: ONYXKEYS.PRESERVED_USER_SESSION,
     callback: (value) => {
         preservedUserSession = value;
@@ -108,7 +107,7 @@
 });
 
 let preservedShouldUseStagingServer: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.ACCOUNT,
     callback: (value) => {
         preservedShouldUseStagingServer = value?.shouldUseStagingServer;
@@ -121,7 +120,7 @@
 });
 
 let hasLoadedApp: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.HAS_LOADED_APP,
     callback: (value) => {
         hasLoadedApp = value;
@@ -130,7 +129,7 @@
 });
 
 let allReports: OnyxCollection<OnyxTypes.Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -154,7 +153,7 @@
     ONYXKEYS.PRESERVED_USER_SESSION,
 ];
 
 Onyx.connect({
     key: ONYXKEYS.RESET_REQUIRED,
     callback: (isResetRequired) => {
         if (!isResetRequired) {
@@ -177,7 +176,6 @@
 });
 
 function confirmReadyToOpenApp() {
-    Timing.end(CONST.TIMING.OPEN_APP);
     resolveIsReadyPromise();
 }
 

src/pages/home/report/ReportActionsView.tsx

@@ -10,7 +10,6 @@ import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {updateLoadingInitialReportAction} from '@libs/actions/Report';
-import Timing from '@libs/actions/Timing';
 import DateUtils from '@libs/DateUtils';
 import getIsReportFullyVisible from '@libs/getIsReportFullyVisible';
 import {selectAllTransactionsForReport} from '@libs/MoneyRequestReportUtils';
@@ -31,6 +30,7 @@ import {
     shouldReportActionBeVisible,
 } from '@libs/ReportActionsUtils';
 import {buildOptimisticCreatedReportAction, buildOptimisticIOUReportAction, canUserPerformWriteAction, isMoneyRequestReport} from '@libs/ReportUtils';
+import markOpenReportEnd from '@libs/Telemetry/markOpenReportEnd';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -247,14 +247,7 @@ function ReportActionsView({
 
         didLayout.current = true;
 
-        Performance.markEnd(CONST.TIMING.OPEN_REPORT);
-        Timing.end(CONST.TIMING.OPEN_REPORT);
-
-        Performance.markEnd(CONST.TIMING.OPEN_REPORT_THREAD);
-        Timing.end(CONST.TIMING.OPEN_REPORT_THREAD);
-
-        Performance.markEnd(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW);
-        Timing.end(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW);
+        markOpenReportEnd();
     }, []);
 
     // Check if the first report action in the list is the one we're currently linked to

src/pages/signin/SignInPage.tsx

@@ -184,6 +184,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
     const shouldShowAnotherLoginPageOpenedMessage = Visibility.isVisible() && !isClientTheLeader;
 
     useEffect(() => Performance.measureTTI(), []);
+
     useEffect(() => {
         if (preferredLocale) {
             return;

src/setup/telemetry/index.native.ts

@@ -4,9 +4,12 @@ import CONST from '@src/CONST';
 
 export default function () {
     Timing.start(CONST.TIMING.SPLASH_SCREEN);
-    Timing.start(CONST.TIMING.OPEN_APP);
 
-    AppState.addEventListener('change', () => {
+    AppState.addEventListener('change', (state) => {
+        if (state === 'active') {
+            return;
+        }
+
         Timing.clearData();
     });
 }

src/setup/telemetry/index.ts

@@ -3,7 +3,6 @@ import CONST from '@src/CONST';
 
 export default function () {
     Timing.start(CONST.TIMING.SPLASH_SCREEN);
-    Timing.start(CONST.TIMING.OPEN_APP);
 
     document.addEventListener('visibilitychange', () => {
         Timing.clearData();