Send route name with Statsig events (#3194)

* Add types to Statsig events

* Send route name with events

src/Navigation.tsx

@@ -78,7 +78,7 @@ import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStack
 import {msg} from '@lingui/macro'
 import {i18n, MessageDescriptor} from '@lingui/core'
 import HashtagScreen from '#/screens/Hashtag'
-import {logEvent} from './lib/statsig/statsig'
+import {logEvent, attachRouteToLogEvents} from './lib/statsig/statsig'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -543,6 +543,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onReady={() => {
+        attachRouteToLogEvents(getCurrentRouteName)
         logModuleInitTime()
         onReady()
       }}>
@@ -551,6 +552,10 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
   )
 }
 
+function getCurrentRouteName() {
+  return navigationRef.getCurrentRoute()?.name
+}
+
 /**
  * These helpers can be used from outside of the RoutesContainer
  * (eg in the state models).
@@ -656,7 +661,9 @@ function logModuleInitTime() {
     performance.now() - global.__BUNDLE_START_TIME__,
   )
   console.log(`Time to first paint: ${initMs} ms`)
-  logEvent('init', initMs)
+  logEvent('init', {
+    initMs,
+  })
 
   if (__DEV__) {
     // This log is noisy, so keep false committed

src/lib/statsig/events.ts

@@ -0,0 +1,5 @@
+export type Events = {
+  init: {
+    initMs: number
+  }
+}

src/lib/statsig/statsig.tsx

@@ -6,6 +6,7 @@ import {
 } from 'statsig-react-native-expo'
 import {useSession} from '../../state/session'
 import {sha256} from 'js-sha256'
+import {Events} from './events'
 
 const statsigOptions = {
   environment: {
@@ -17,12 +18,28 @@ const statsigOptions = {
   initTimeoutMs: 1,
 }
 
-export function logEvent(
-  eventName: string,
-  value?: string | number | null,
-  metadata?: Record<string, string> | null,
+type FlatJSONRecord = Record<
+  string,
+  string | number | boolean | null | undefined
+>
+
+let getCurrentRouteName: () => string | null | undefined = () => null
+
+export function attachRouteToLogEvents(
+  getRouteName: () => string | null | undefined,
 ) {
-  Statsig.logEvent(eventName, value, metadata)
+  getCurrentRouteName = getRouteName
+}
+
+export function logEvent<E extends keyof Events>(
+  eventName: E & string,
+  rawMetadata?: Events[E] & FlatJSONRecord,
+) {
+  const fullMetadata = {
+    ...rawMetadata,
+  } as Record<string, string> // Statsig typings are unnecessarily strict here.
+  fullMetadata.routeName = getCurrentRouteName() ?? '(Uninitialized)'
+  Statsig.logEvent(eventName, null, fullMetadata)
 }
 
 export function useGate(gateName: string) {