TP-71068 | logging screen load metrics (#11642)

Co-authored-by: Raaj Gopal <raaj.gopal@navi.com>

App/common/constants/AnalyticsEventsConstant.ts

@@ -41,11 +41,14 @@ export const AnalyticsGlobalErrorTypeConstant = {
 
 export const EVENT_NAMES = {
   CODEPUSH_FETCH_ERROR: "codepush_fetch_error",
+  SCREEN_LOAD_TIME: "screen_load_time",
 };
 
 export const EVENT_PROPERTY_KEYS = {
   STATUS: "status",
   BUNDLE_VERSION: "bundleVersion",
+  SCREEN_NAME: "screenName",
+  LOAD_TIME: "loadTime",
 };
 
 export const EVENT_PROPERTY_VALUES = {

App/common/hooks/useScreenLoadTime.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useAnalyticsEvent } from "./useAnalyticsEvent";
+import { AnalyticsEvent } from "../interface";
+import { EVENT_NAMES, EVENT_PROPERTY_KEYS } from "../constants";
+import { ScreenState } from "../screen/BaseScreen";
+
+const useScreenLoadTime = (
+  screenName: string | null,
+  screenState: ScreenState | null | undefined,
+) => {
+  const [startTime, setStartTime] = useState<number | null>(null);
+  const { sendAsAnalyticsEvent } = useAnalyticsEvent();
+
+  useEffect(() => {
+    if (screenState === ScreenState.LOADING && startTime === null) {
+      setStartTime(performance.now());
+    } else if (
+      (screenState === ScreenState.LOADED ||
+        screenState === ScreenState.ERROR) &&
+      startTime !== null
+    ) {
+      const endTime = performance.now();
+      const loadTime = (endTime - startTime) / 1000;
+      if (screenName) {
+        const analyticsEvent: AnalyticsEvent = {
+          name: EVENT_NAMES.SCREEN_LOAD_TIME,
+          properties: {
+            [EVENT_PROPERTY_KEYS.SCREEN_NAME]: screenName,
+            [EVENT_PROPERTY_KEYS.LOAD_TIME]: loadTime.toFixed(3),
+          },
+        };
+
+        sendAsAnalyticsEvent(analyticsEvent);
+      }
+      setStartTime(null);
+    }
+  }, [screenState]);
+};
+
+export default useScreenLoadTime;

App/common/screen/BaseScreen.tsx

@@ -25,6 +25,7 @@ import {
 } from "../utilities/MiscUtils";
 import { WidgetActionTypes } from "../widgets/widget-actions/WidgetActionTypes";
 import { ScreenMapper } from "./screen-mappers/ScreenMapper";
+import useScreenLoadTime from "../hooks/useScreenLoadTime";
 
 const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
   navigation,
@@ -105,6 +106,7 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
       dispatch(updateCtaData({ cta: ctaData, setScreenState: screenState }));
     }
   }, [route.params.ctaData, screenState]);
+  useScreenLoadTime(screenName, screenData?.screenState);
 
   const handleActions = (actionPayload?: GenericActionPayload) => {
     actionPayload?.metaData?.forEach(ActionMetaData => {