[APP-1782] Analytics migration (#9734)

* WIP

* Clean up growthbook code, integrate into init and sessions

* Move everything out of React

* Add metrics client

* Move to separate file

* Shared metadata cache

* Ensure we update metadata when session ID changes

* Ensure userMetadata is cleared when logging out

* WIP revamp

* Integrate feature gates into analytics context

* Clean up old code

* Fix useMeta util

* Some comments and cleanup

* Add logger to base analytics context

* Refactor current route handling

* Rip out LogEvent from navigation

* Update tracking endpoint

* Migrate toClout

* Clear out statsig client

* Add todo, reset logger readme

* Ope fix statsig noop

* Refactor logging in feed-feedback, add debug logging to metrics client

* Remove LogEvents alias for Metrics

* Prefer root package export

* Remove Metrics alias from logger

* [APP-1782] Migrate to new analytics APIs (#9735)

* Migrate logEvent to useAnalytics

* Migrate logger.metric to useAnalytics

* Migrate tricky spot, fix types

* Migrate remaining tricky spot

* Missed one

* Remove metric() from logger

* Migrate useGate to useAnalytics

* Remove all other StatSig mentions

* Update event payload

* Update logger tests

* Mock expo method

* Fix session ID bug

* Add session ID test

* Add test for metrics client

* Clarify intent

* Clean up core analytics file

* Clean up the call once utils

* Fix TODO

* Fix TODO

* Fix TODO

* Fix TODO

* Fix TODO

* Remove debug code

* Fix navigation context

* OK nav context is not working, todo

* Checkpoint: works but feels hacky

* Fix navigation context issue

* Improve feature API

* Improve metric logging

* Update logger tests
This commit is contained in:
Eric Bailey
2026-01-22 15:33:45 -06:00
committed by GitHub
parent 8614e5e105
commit 25a1ed1209
190 changed files with 2358 additions and 1689 deletions
+7 -6
View File
@@ -11,8 +11,8 @@ import {useSignupContext} from '#/screens/Signup/state'
import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
import {atoms as a, useTheme} from '#/alf'
import {FormError} from '#/components/forms/FormError'
import {IS_ANDROID, IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
import {GCP_PROJECT_ID} from '#/env'
import {useAnalytics} from '#/analytics'
import {GCP_PROJECT_ID, IS_ANDROID, IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
import {BackNextButtons} from '../BackNextButtons'
const CAPTCHA_PATH =
@@ -71,6 +71,7 @@ function StepCaptchaInner({
payload?: string
}) {
const {_} = useLingui()
const ax = useAnalytics()
const theme = useTheme()
const {state, dispatch} = useSignupContext()
@@ -109,13 +110,13 @@ function StepCaptchaInner({
const onSuccess = React.useCallback(
(code: string) => {
setCompleted(true)
logger.metric('signup:captchaSuccess', {}, {statsig: true})
ax.metric('signup:captchaSuccess', {})
dispatch({
type: 'submit',
task: {verificationCode: code, mutableProcessed: false},
})
},
[dispatch],
[ax, dispatch],
)
const onError = React.useCallback(
@@ -124,13 +125,13 @@ function StepCaptchaInner({
type: 'setError',
value: _(msg`Error receiving captcha response.`),
})
logger.metric('signup:captchaFailure', {}, {statsig: true})
ax.metric('signup:captchaFailure', {})
logger.error('Signup Flow Error', {
registrationHandle: state.handle,
error,
})
},
[_, dispatch, state.handle],
[_, ax, dispatch, state.handle],
)
const onBackPress = React.useCallback(() => {
+13 -16
View File
@@ -26,11 +26,13 @@ import {useThrottledValue} from '#/components/hooks/useThrottledValue'
import {At_Stroke2_Corner0_Rounded as AtIcon} from '#/components/icons/At'
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import {BackNextButtons} from '../BackNextButtons'
import {HandleSuggestions} from './HandleSuggestions'
export function StepHandle() {
const {_} = useLingui()
const ax = useAnalytics()
const t = useTheme()
const {state, dispatch} = useSignupContext()
const [draftValue, setDraftValue] = useState(state.handle)
@@ -68,16 +70,19 @@ export function StepHandle() {
const {available: handleAvailable} = await checkHandleAvailability(
createFullHandle(handle, state.userDomain),
state.serviceDescription?.did ?? 'UNKNOWN',
{typeahead: false},
{},
)
if (!handleAvailable) {
ax.metric('signup:handleTaken', {typeahead: false})
dispatch({
type: 'setError',
value: _(msg`That username is already taken`),
field: 'handle',
})
return
} else {
ax.metric('signup:handleAvailable', {typeahead: false})
}
} catch (error) {
logger.error('Failed to check handle availability on next press', {
@@ -88,15 +93,11 @@ export function StepHandle() {
dispatch({type: 'setIsLoading', value: false})
}
logger.metric(
'signup:nextPressed',
{
activeStep: state.activeStep,
phoneVerificationRequired:
state.serviceDescription?.phoneVerificationRequired,
},
{statsig: true},
)
ax.metric('signup:nextPressed', {
activeStep: state.activeStep,
phoneVerificationRequired:
state.serviceDescription?.phoneVerificationRequired,
})
// phoneVerificationRequired is actually whether a captcha is required
if (!state.serviceDescription?.phoneVerificationRequired) {
dispatch({
@@ -115,11 +116,7 @@ export function StepHandle() {
value: handle,
})
dispatch({type: 'prev'})
logger.metric(
'signup:backPressed',
{activeStep: state.activeStep},
{statsig: true},
)
ax.metric('signup:backPressed', {activeStep: state.activeStep})
}
const hasDebounceSettled = draftValue === debouncedDraftValue
@@ -202,7 +199,7 @@ export function StepHandle() {
state.userDomain.length * -1,
),
)
logger.metric('signup:handleSuggestionSelected', {
ax.metric('signup:handleSuggestionSelected', {
method: suggestion.method,
})
}}
+5 -7
View File
@@ -30,6 +30,7 @@ import {
MIN_ACCESS_AGE,
useAgeAssuranceRegionConfigWithFallback,
} from '#/ageAssurance/util'
import {useAnalytics} from '#/analytics'
import {IS_NATIVE} from '#/env'
import {
useDeviceGeolocationApi,
@@ -59,6 +60,7 @@ export function StepInfo({
isLoadingStarterPack: boolean
}) {
const {_} = useLingui()
const ax = useAnalytics()
const {state, dispatch} = useSignupContext()
const preemptivelyCompleteActivePolicyUpdate =
usePreemptivelyCompleteActivePolicyUpdate()
@@ -165,13 +167,9 @@ export function StepInfo({
dispatch({type: 'setEmail', value: email})
dispatch({type: 'setPassword', value: password})
dispatch({type: 'next'})
logger.metric(
'signup:nextPressed',
{
activeStep: state.activeStep,
},
{statsig: true},
)
ax.metric('signup:nextPressed', {
activeStep: state.activeStep,
})
}
return (
+14 -3
View File
@@ -29,17 +29,28 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground'
import {InlineLinkText} from '#/components/Link'
import {ScreenTransition} from '#/components/ScreenTransition'
import {Text} from '#/components/Typography'
import {IS_ANDROID} from '#/env'
import {GCP_PROJECT_ID} from '#/env'
import {useAnalytics} from '#/analytics'
import {GCP_PROJECT_ID, IS_ANDROID} from '#/env'
import * as bsky from '#/types/bsky'
export function Signup({onPressBack}: {onPressBack: () => void}) {
const ax = useAnalytics()
const {_} = useLingui()
const t = useTheme()
const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, {
...initialState,
analytics: ax,
})
const {gtMobile} = useBreakpoints()
const submit = useSubmitSignup()
useEffect(() => {
dispatch({
type: 'setAnalytics',
value: ax,
})
}, [ax])
const activeStarterPack = useActiveStarterPack()
const {
data: starterPack,
+27 -23
View File
@@ -12,9 +12,9 @@ import {DEFAULT_SERVICE} from '#/lib/constants'
import {cleanError} from '#/lib/strings/errors'
import {createFullHandle} from '#/lib/strings/handles'
import {getAge} from '#/lib/strings/time'
import {logger} from '#/logger'
import {useSessionApi} from '#/state/session'
import {useOnboardingDispatch} from '#/state/shell'
import {type AnalyticsContextType, useAnalytics} from '#/analytics'
export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
@@ -39,6 +39,8 @@ type ErrorField =
| 'date-of-birth'
export type SignupState = {
analytics?: AnalyticsContextType
hasPrev: boolean
activeStep: SignupStep
screenTransitionDirection: 'Forward' | 'Backward'
@@ -65,6 +67,7 @@ export type SignupState = {
}
export type SignupAction =
| {type: 'setAnalytics'; value: AnalyticsContextType}
| {type: 'prev'}
| {type: 'next'}
| {type: 'finish'}
@@ -83,6 +86,8 @@ export type SignupAction =
| {type: 'incrementBackgroundCount'}
export const initialState: SignupState = {
analytics: undefined,
hasPrev: false,
activeStep: SignupStep.INFO,
screenTransitionDirection: 'Forward',
@@ -126,6 +131,10 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
let next = {...s}
switch (a.type) {
case 'setAnalytics': {
next.analytics = a.value
break
}
case 'prev': {
if (s.activeStep !== SignupStep.INFO) {
next.screenTransitionDirection = 'Backward'
@@ -194,16 +203,12 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
next.fieldErrors[a.field] = (next.fieldErrors[a.field] || 0) + 1
// Log the field error
logger.metric(
'signup:fieldError',
{
field: a.field,
errorCount: next.fieldErrors[a.field],
errorMessage: a.value,
activeStep: next.activeStep,
},
{statsig: true},
)
s.analytics?.metric('signup:fieldError', {
field: a.field,
errorCount: next.fieldErrors[a.field],
errorMessage: a.value,
activeStep: next.activeStep,
})
}
break
}
@@ -220,24 +225,22 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
next.backgroundCount = s.backgroundCount + 1
// Log background/foreground event during signup
logger.metric(
'signup:backgrounded',
{
activeStep: next.activeStep,
backgroundCount: next.backgroundCount,
},
{statsig: true},
)
s.analytics?.metric('signup:backgrounded', {
activeStep: next.activeStep,
backgroundCount: next.backgroundCount,
})
break
}
}
next.hasPrev = next.activeStep !== SignupStep.INFO
logger.debug('signup', next)
s.analytics?.logger.debug('signup', next)
if (s.activeStep !== next.activeStep) {
logger.debug('signup: step changed', {activeStep: next.activeStep})
s.analytics?.logger.debug('signup: step changed', {
activeStep: next.activeStep,
})
}
return next
@@ -252,6 +255,7 @@ SignupContext.displayName = 'SignupContext'
export const useSignupContext = () => React.useContext(SignupContext)
export function useSubmitSignup() {
const ax = useAnalytics()
const {_} = useLingui()
const {createAccount} = useSessionApi()
const onboardingDispatch = useOnboardingDispatch()
@@ -295,7 +299,7 @@ export function useSubmitSignup() {
!state.pendingSubmit?.verificationCode
) {
dispatch({type: 'setStep', value: SignupStep.CAPTCHA})
logger.error('Signup Flow Error', {
ax.logger.error('Signup Flow Error', {
errorMessage: 'Verification captcha code was not set.',
registrationHandle: state.handle,
})
@@ -358,7 +362,7 @@ export function useSubmitSignup() {
})
dispatch({type: 'setStep', value: isHandleError ? 2 : 1})
logger.error('Signup Flow Error', {
ax.logger.error('Signup Flow Error', {
errorMessage: error,
registrationHandle: state.handle,
})