Improve type checking for metrics events (#2632)

src/lib/analytics/analytics.tsx

@@ -6,7 +6,7 @@ import {sha256} from 'js-sha256'
 import {Native} from 'sentry-expo'
 
 import {useSession, SessionAccount} from '#/state/session'
-import {TrackEvent, AnalyticsMethods} from './types'
+import {ScreenPropertiesMap, TrackPropertiesMap} from './types'
 import {logger} from '#/logger'
 
 type AppInfo = {
@@ -29,20 +29,30 @@ function getClient(): SegmentClient {
   return segmentClient
 }
 
-export const track: TrackEvent = async (...args) => {
-  await getClient().track(...args)
+export const track = async <E extends keyof TrackPropertiesMap>(
+  event: E,
+  properties?: TrackPropertiesMap[E],
+) => {
+  await getClient().track(event, properties)
 }
 
-export function useAnalytics(): AnalyticsMethods {
+export function useAnalytics() {
   const {hasSession} = useSession()
+
   return React.useMemo(() => {
     if (hasSession) {
       return {
-        async screen(...args) {
-          await getClient().screen(...args)
+        async screen<E extends keyof ScreenPropertiesMap>(
+          event: E,
+          properties?: ScreenPropertiesMap[E],
+        ) {
+          await getClient().screen(event, properties)
         },
-        async track(...args) {
-          await getClient().track(...args)
+        async track<E extends keyof TrackPropertiesMap>(
+          event: E,
+          properties?: TrackPropertiesMap[E],
+        ) {
+          await getClient().track(event, properties)
         },
       }
     }

src/lib/analytics/analytics.web.tsx

@@ -3,7 +3,7 @@ import {createClient} from '@segment/analytics-react'
 import {sha256} from 'js-sha256'
 import {Browser} from 'sentry-expo'
 
-import {TrackEvent, AnalyticsMethods} from './types'
+import {ScreenPropertiesMap, TrackPropertiesMap} from './types'
 import {useSession, SessionAccount} from '#/state/session'
 import {logger} from '#/logger'
 
@@ -29,20 +29,30 @@ function getClient(): SegmentClient {
   return segmentClient
 }
 
-export const track: TrackEvent = async (...args) => {
-  await getClient().track(...args)
+export const track = async <E extends keyof TrackPropertiesMap>(
+  event: E,
+  properties?: TrackPropertiesMap[E],
+) => {
+  await getClient().track(event, properties)
 }
 
-export function useAnalytics(): AnalyticsMethods {
+export function useAnalytics() {
   const {hasSession} = useSession()
+
   return React.useMemo(() => {
     if (hasSession) {
       return {
-        async screen(...args) {
-          await getClient().screen(...args)
+        async screen<E extends keyof ScreenPropertiesMap>(
+          event: E,
+          properties?: ScreenPropertiesMap[E],
+        ) {
+          await getClient().screen(event, properties)
         },
-        async track(...args) {
-          await getClient().track(...args)
+        async track<E extends keyof TrackPropertiesMap>(
+          event: E,
+          properties?: TrackPropertiesMap[E],
+        ) {
+          await getClient().track(event, properties)
         },
       }
     }

src/lib/analytics/types.ts

@@ -1,14 +1,4 @@
-export type TrackEvent = (
-  event: keyof TrackPropertiesMap,
-  properties?: TrackPropertiesMap[keyof TrackPropertiesMap],
-) => Promise<void>
-
-export type ScreenEvent = (
-  name: keyof ScreenPropertiesMap,
-  properties?: ScreenPropertiesMap[keyof ScreenPropertiesMap],
-) => Promise<void>
-
-interface TrackPropertiesMap {
+export type TrackPropertiesMap = {
   // LOGIN / SIGN UP events
   'Sign In': {resumedSession: boolean} // CAN BE SERVER
   'Create Account': {} // CAN BE SERVER
@@ -16,7 +6,7 @@ interface TrackPropertiesMap {
   'Signin:PressedForgotPassword': {}
   'Signin:PressedSelectService': {}
   // COMPOSER / CREATE POST events
-  'Create Post': {imageCount: string} // CAN BE SERVER
+  'Create Post': {imageCount: string | number} // CAN BE SERVER
   'Composer:PastedPhotos': {}
   'Composer:CameraOpened': {}
   'Composer:GalleryOpened': {}
@@ -108,15 +98,15 @@ interface TrackPropertiesMap {
   'CustomFeed:Share': {}
   'CustomFeed:Pin': {
     uri: string
-    name: string
+    name?: string
   }
   'CustomFeed:Unpin': {
     uri: string
-    name: string
+    name?: string
   }
   'CustomFeed:Reorder': {
     uri: string
-    name: string
+    name?: string
     index: number
   }
   'CustomFeed:LoadMore': {}
@@ -165,7 +155,7 @@ interface TrackPropertiesMap {
   'OnboardingV2:Skip': {}
 }
 
-interface ScreenPropertiesMap {
+export type ScreenPropertiesMap = {
   Login: {}
   CreateAccount: {}
   'Choose Account': {}
@@ -184,8 +174,3 @@ interface ScreenPropertiesMap {
   MutedAccounts: {}
   SavedFeeds: {}
 }
-
-export type AnalyticsMethods = {
-  screen: ScreenEvent
-  track: TrackEvent
-}