[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:
@@ -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(() => {
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
}}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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
@@ -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,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user