[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

src/screens/PostThread/components/GrowthHack.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react'
 import {View} from 'react-native'
 import {PrivacySensitive} from 'expo-privacy-sensitive'
 
-import {useAppState} from '#/lib/hooks/useAppState'
+import {useAppState} from '#/lib/appState'
 import {atoms as a, useTheme} from '#/alf'
 import {sizes as iconSizes} from '#/components/icons/common'
 import {Mark as Logo} from '#/components/icons/Logo'

src/screens/PostThread/components/HeaderDropdown.tsx

@@ -2,11 +2,11 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
-import {logger} from '#/logger'
 import {type ThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'
 import {Button, ButtonIcon} from '#/components/Button'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import * as Menu from '#/components/Menu'
+import {useAnalytics} from '#/analytics'
 
 export function HeaderDropdown({
   sort,
@@ -17,6 +17,7 @@ export function HeaderDropdown({
   ThreadPreferences,
   'sort' | 'setSort' | 'view' | 'setView'
 >): React.ReactNode {
+  const ax = useAnalytics()
   const {_} = useLingui()
   return (
     <Menu.Root>
@@ -30,7 +31,7 @@ export function HeaderDropdown({
             shape="round"
             hitSlop={HITSLOP_10}
             onPress={() => {
-              logger.metric('thread:click:headerMenuOpen', {})
+              ax.metric('thread:click:headerMenuOpen', {})
               onPress()
             }}
             {...props}>

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -18,7 +18,6 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {niceDate} from '#/lib/strings/time'
 import {getTranslatorLink, isPostInLanguage} from '#/locale/helpers'
-import {logger} from '#/logger'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -60,6 +59,7 @@ import * as Skele from '#/components/Skeleton'
 import {Text} from '#/components/Typography'
 import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
 import {WhoCanReply} from '#/components/WhoCanReply'
+import {useAnalytics} from '#/analytics'
 import * as bsky from '#/types/bsky'
 
 export function ThreadItemAnchor({
@@ -177,6 +177,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
   postSource?: PostSource
 }) {
   const t = useTheme()
+  const ax = useAnalytics()
   const {_} = useLingui()
   const {openComposer} = useOpenComposer()
   const {currentAccount, hasSession} = useSession()
@@ -281,7 +282,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
   ])
 
   const onOpenAuthor = () => {
-    logger.metric('post:clickthroughAuthor', {
+    ax.metric('post:clickthroughAuthor', {
       uri: post.uri,
       authorDid: post.author.did,
       logContext: 'PostThreadItem',
@@ -298,7 +299,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
   }
 
   const onOpenEmbed = () => {
-    logger.metric('post:clickthroughEmbed', {
+    ax.metric('post:clickthroughEmbed', {
       uri: post.uri,
       authorDid: post.author.did,
       logContext: 'PostThreadItem',
@@ -540,6 +541,7 @@ function ExpandedPostDetails({
   isThreadAuthor: boolean
 }) {
   const t = useTheme()
+  const ax = useAnalytics()
   const {_, i18n} = useLingui()
   const translate = useTranslate()
   const isRootPost = !('reply' in post.record)
@@ -565,7 +567,7 @@ function ExpandedPostDetails({
           AppBskyFeedPost.isRecord,
         )
       ) {
-        logger.metric('translate', {
+        ax.metric('translate', {
           sourceLanguages: post.record.langs ?? [],
           targetLanguage: langPrefs.primaryLanguage,
           textLength: post.record.text.length,
@@ -574,7 +576,7 @@ function ExpandedPostDetails({
 
       return false
     },
-    [translate, langPrefs, post],
+    [ax, translate, langPrefs, post],
   )
 
   return (

src/screens/PostThread/components/ThreadItemShowOtherReplies.tsx

@@ -2,22 +2,23 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {logger} from '#/logger'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
 
 export function ThreadItemShowOtherReplies({onPress}: {onPress: () => void}) {
-  const {_} = useLingui()
   const t = useTheme()
+  const ax = useAnalytics()
+  const {_} = useLingui()
   const label = _(msg`Show more replies`)
 
   return (
     <Button
       onPress={() => {
         onPress()
-        logger.metric('thread:click:showOtherReplies', {})
+        ax.metric('thread:click:showOtherReplies', {})
       }}
       label={label}>
       {({hovered, pressed}) => (