@planningcenter/chat-react-native 3.36.1 → 3.36.2-qa-726.0

package/src/hooks/use_jolt.ts

@@ -11,6 +11,7 @@ import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-quer
 import { useCallback, useEffect, useMemo } from 'react'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
+import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
 
 interface JoltResponse {
@@ -165,7 +166,7 @@ type UserCallbackFn<T> = (_event: T) => void
 
 export function useJoltEvent<T extends CustomMessage>(
   channel: JoltSubscription | undefined | null,
-  eventName: string,
+  eventName: JoltSubscriptionPattern,
   callback: UserCallbackFn<T>
 ) {
   useEffect(() => {

package/src/hooks/use_product_analytics.ts

@@ -9,6 +9,13 @@ export interface EventMetadata {
   [key: string]: string | number | boolean | null | undefined
 }
 
+export const analyticsEvents = {
+  conversation_index_opened: 'chat.mobile.conversations.index.opened',
+  conversation_show_opened: 'chat.mobile.conversations.show.opened',
+} as const satisfies Record<string, `chat.mobile.${string}`>
+
+type AnalyticsEventName = (typeof analyticsEvents)[keyof typeof analyticsEvents]
+
 interface AnalyticsEvent {
   name: string
   meta: EventMetadata
@@ -55,7 +62,7 @@ const useProductAnalytics = () => {
   )
 
   const publishEvent = useCallback(
-    (name: string, meta: EventMetadata = {}): Promise<Response[]> => {
+    (name: AnalyticsEventName, meta: EventMetadata = {}): Promise<Response[]> => {
       if (!productAnalyticsConfig) {
         if (__DEV__) {
           console.warn('Product Analytics not available')
@@ -71,7 +78,7 @@ const useProductAnalytics = () => {
   )
 
   const publishEvents = useCallback(
-    (events: Array<{ name: string; meta?: EventMetadata }>): Promise<Response[]> => {
+    (events: Array<{ name: AnalyticsEventName; meta?: EventMetadata }>): Promise<Response[]> => {
       if (!productAnalyticsConfig) {
         if (__DEV__) {
           console.warn('Product Analytics not available')
@@ -92,7 +99,10 @@ const useProductAnalytics = () => {
   return { publishEvent, publishEvents }
 }
 
-export function usePublishProductAnalyticsEvent(eventName: string, meta: EventMetadata = {}) {
+export function usePublishProductAnalyticsEvent(
+  eventName: AnalyticsEventName,
+  meta: EventMetadata = {}
+) {
   const { publishEvent } = useProductAnalytics()
   const hasPublishedEventRef = useRef(false)
 

package/src/index.tsx

@@ -1,6 +1,7 @@
 import './icons/font_awesome'
 
-export { GroupConversations } from './components'
+export * from './components'
+export * from './hooks'
 export { ApiProvider, chatQueryClient, useFocusManager } from './contexts/api_provider'
 export * from './contexts/chat_context'
 export * from './contexts/session_context'
@@ -11,7 +12,7 @@ export { default as Event } from './polyfills/events/Event'
 export * from './screens'
 export { AgeCheckUnderageScreen } from './screens/age_check/age_check_underage_screen' // TODO: add to barrel
 export * from './types'
-export { platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
+export { ENV, platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'
 export * from './utils/host_bridge'
 export * from './utils/native_adapters'

package/src/navigation/screenLayout.tsx

@@ -1,14 +1,17 @@
+import { useRoute } from '@react-navigation/native'
 import React from 'react'
 import { Suspense } from 'react'
-import ErrorBoundary from '../components/page/error_boundary'
 import { DefaultLoading } from '../components/page/loading'
+import { PageErrorBoundary } from '../components/page/page_error_boundary'
 import { ChatAccessGate } from './chat_access_gate'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {
+  const route = useRoute()
+
   return (
-    <ErrorBoundary>
+    <PageErrorBoundary screenName={route.name}>
       <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
-    </ErrorBoundary>
+    </PageErrorBoundary>
   )
 }
 

package/src/screens/conversation_details_screen.tsx

@@ -148,7 +148,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     const memberSectionStyle = memberSectionStyleMap[memberPosition]
 
     return {
-      type: data.child ? SectionTypes.hidden : SectionTypes.members,
+      type: SectionTypes.members,
       data,
       sectionInnerStyle: memberSectionStyle,
     }

package/src/screens/conversation_new/components/groups_form.tsx

@@ -5,6 +5,7 @@ import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
 import { KeyboardView } from '../../../components/display/keyboard_view'
 import { useApiClient, useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
+import { useGroupChatConversationPayload } from '../../../hooks/groups/use_group_chat_conversation_payload'
 import {
   GroupMembersForNewConversationResult,
   useGroupMembersForNewConversation,
@@ -14,6 +15,7 @@ import {
   type AvatarUpdatePayload,
   patchConversationAvatar,
 } from '../../../hooks/use_conversation_avatar_update'
+import { useConversationValidate } from '../../../hooks/use_conversation_validate'
 import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useMyGender } from '../../../hooks/use_my_gender'
 import { useUploadClient } from '../../../hooks/use_upload_client'
@@ -40,6 +42,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
   const [genderFilterEnabled, setGenderFilterEnabled] = useState(false)
   const { featureEnabled } = useFeatures()
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
+  const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const {
     isFeatureEnabled: genderFilterAvailable,
     genderId,
@@ -59,6 +62,18 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
   const activeGenderId = genderFilterEnabled ? genderId : null
   const activeGenderValue = genderFilterEnabled ? genderValue : null
 
+  const { payload, isLoading: isLoadingPayload } = useGroupChatConversationPayload({
+    groupId,
+    enabled: safetyLockEnabled,
+  })
+
+  const { warnings, validationPending } = useConversationValidate({
+    payload,
+    isLoadingPayload,
+    genderId: activeGenderId,
+    enabled: safetyLockEnabled,
+  })
+
   const groupMemberships = useGroupMembersForNewConversation({
     id: groupId,
     gender: activeGenderValue,
@@ -127,10 +142,11 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
         }
       />
       <ActionButton
-        disabled={!title || isPending}
+        disabled={!title || isPending || validationPending || warnings.length > 0}
         title="Start Conversation"
         onPress={() => handleSave()}
         infoText="Conversation will be automatically updated if any members are added or removed from this group."
+        warnings={warnings}
       />
     </KeyboardView>
   )

package/src/screens/conversation_new/components/services_form.tsx

@@ -6,12 +6,14 @@ import { Badge, Banner, ChildNotice, Heading, Switch, TextButton } from '../../.
 import { ActionButton } from '../../../components/display/action_button'
 import { useApiClient } from '../../../hooks'
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
+import { useServicesChatConversationPayload } from '../../../hooks/services/use_services_chat_conversation_payload'
 import { useServicesTeams } from '../../../hooks/services/use_services_team'
 import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
 import {
   type AvatarUpdatePayload,
   patchConversationAvatar,
 } from '../../../hooks/use_conversation_avatar_update'
+import { useConversationValidate } from '../../../hooks/use_conversation_validate'
 import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useUploadClient } from '../../../hooks/use_upload_client'
 import { MemberResource } from '../../../types'
@@ -41,6 +43,7 @@ export const ServicesForm = ({
   const uploadClient = useUploadClient()
   const { featureEnabled } = useFeatures()
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
+  const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
@@ -60,6 +63,20 @@ export const ServicesForm = ({
 
   const [filerByPlan, setFilterByPlan] = useState(false)
 
+  const activePlanId = filerByPlan ? selectedPlanId : undefined
+
+  const { payload, isLoading: isLoadingPayload } = useServicesChatConversationPayload({
+    teamIds: selectedTeamIds,
+    planId: activePlanId,
+    enabled: safetyLockEnabled,
+  })
+
+  const { warnings, validationPending } = useConversationValidate({
+    payload,
+    isLoadingPayload,
+    enabled: safetyLockEnabled,
+  })
+
   const { members, isError: isMemberError } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
     planId: selectedPlanId,
@@ -74,7 +91,7 @@ export const ServicesForm = ({
     isLoadingConversationCheck,
   } = useFindOrCreateServicesConversation({
     teamIds: selectedTeamIds,
-    planId: filerByPlan ? selectedPlanId : undefined,
+    planId: activePlanId,
     onSuccess: (conversation, { created }) => {
       navigation.getParent()?.goBack()
       navigation.dispatch(
@@ -113,11 +130,18 @@ export const ServicesForm = ({
         }
       />
       <ActionButton
-        disabled={!selectedTeamIds.length || isPending || isLoadingConversationCheck}
+        disabled={
+          !selectedTeamIds.length ||
+          isPending ||
+          isLoadingConversationCheck ||
+          validationPending ||
+          warnings.length > 0
+        }
         title={selectionHasConversation ? 'Open conversation' : 'Start conversation'}
         onPress={createConversation}
         infoText="Conversation will be automatically updated if any members are added or removed from included teams."
         loading={isLoadingConversationCheck}
+        warnings={warnings}
       />
     </View>
   )

package/src/screens/conversation_screen.tsx

@@ -44,6 +44,7 @@ import { useJumpToUnreadAnchor } from '../hooks/use_jump_to_unread_anchor'
 import { useJumpToUnreadGates } from '../hooks/use_jump_to_unread_gates'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
+  analyticsEvents,
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
@@ -93,7 +94,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { data: conversation } = useConversation({ conversation_id })
   const { featureEnabled } = useFeatures()
 
-  usePublishProductAnalyticsEvent('chat.mobile.conversations.show.opened', {
+  usePublishProductAnalyticsEvent(analyticsEvents.conversation_show_opened, {
     reply_root_id,
     ...normalizeAnalyticsMetadata(conversation),
   })

package/src/screens/conversations/conversations_screen.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
-import { usePublishProductAnalyticsEvent } from '../../hooks'
+import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
@@ -17,7 +17,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
 
-  usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened')
+  usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
   return (
     <View style={styles.container}>

package/src/screens/team_conversation_screen.tsx

@@ -3,10 +3,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
 import { DefaultLoading } from '../components/page/loading'
 import { useApiClient } from '../hooks'
-import {
-  buildTeamAndPlanParams,
-  findOrCreateServicesConversation,
-} from '../hooks/services/use_find_or_create_services_conversation'
+import { findOrCreateServicesConversation } from '../hooks/services/use_find_or_create_services_conversation'
 
 export type TeamConversationRouteProps = {
   plan_id?: number
@@ -19,11 +16,14 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const navigation = useNavigation()
-  const teamAndPlanParams = buildTeamAndPlanParams(route.params.team_ids, route.params.plan_id)
   const { data: conversation } = useQuery({
     queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
     queryFn: () =>
-      findOrCreateServicesConversation(apiClient, teamAndPlanParams).then(r => r.conversation),
+      findOrCreateServicesConversation({
+        apiClient,
+        teamIds: route.params.team_ids ?? [],
+        planId: route.params.plan_id,
+      }).then(r => r.conversation),
   })
 
   useEffect(() => {

package/src/types/jolt_events/index.ts

@@ -26,3 +26,6 @@ export type CustomJoltEvent =
   | JoltMessageEvent
   | JoltReactionEvent
   | JoltTypingEvent
+
+export type JoltEventName = CustomJoltEvent['event'] | 'STREAM_USER_UPDATED'
+export type JoltSubscriptionPattern = JoltEventName | 'reaction.*'

package/src/types/resources/conversation_validate.ts

@@ -0,0 +1,11 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface ConversationWarning {
+  attribute: string
+  fullMessage: string
+}
+
+export interface ConversationValidateResource extends ResourceObject {
+  type: 'ConversationValidate'
+  warnings: ConversationWarning[]
+}

package/src/types/resources/index.ts

@@ -1,6 +1,7 @@
 export * from './analytics_metadata'
 export * from './conversation'
 export * from './conversation_membership'
+export * from './conversation_validate'
 export * from './member'
 export * from './message'
 export * from './oauth_token'

package/src/utils/client/__tests__/instrumented_fetch.test.ts

@@ -0,0 +1,84 @@
+import { Log } from '../../native_adapters/configuration'
+import { instrumentedFetch } from '../instrumented_fetch'
+
+const buildResponse = (status: number) => new Response('', { status })
+
+describe('instrumentedFetch', () => {
+  let reportError: jest.SpyInstance
+  let fetchSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
+    fetchSpy = jest.spyOn(globalThis, 'fetch')
+  })
+
+  afterEach(() => {
+    reportError.mockRestore()
+    fetchSpy.mockRestore()
+  })
+
+  it('passes successful responses through without reporting', async () => {
+    const response = buildResponse(200)
+    fetchSpy.mockResolvedValueOnce(response)
+
+    const result = await instrumentedFetch('https://api.example.com/conversations', {
+      method: 'GET',
+    })
+
+    expect(result).toBe(response)
+    expect(reportError).not.toHaveBeenCalled()
+  })
+
+  it.each([400, 422, 500])(
+    'reports %d with method, status, and templated path tags',
+    async status => {
+      fetchSpy.mockResolvedValueOnce(buildResponse(status))
+
+      await instrumentedFetch('https://api.example.com/conversations/123/messages', {
+        method: 'POST',
+      })
+
+      expect(reportError).toHaveBeenCalledTimes(1)
+      const [error, context] = reportError.mock.calls[0]
+      expect(error.name).toBe(`HTTPError${status}`)
+      expect(error.message).toBe(`HTTP ${status} POST /conversations/:id/messages`)
+      expect(context).toMatchObject({
+        scope: 'http',
+        tags: {
+          team: 'chat',
+          package: 'chat-react-native',
+          'http.status': String(status),
+          'http.method': 'POST',
+          'http.path': '/conversations/:id/messages',
+        },
+      })
+    }
+  )
+
+  it.each([401, 403, 404])('does not report %d (expected user states)', async status => {
+    fetchSpy.mockResolvedValueOnce(buildResponse(status))
+
+    await instrumentedFetch('https://api.example.com/x', { method: 'GET' })
+
+    expect(reportError).not.toHaveBeenCalled()
+  })
+
+  it('reports network failures with http.error=network', async () => {
+    const networkError = new TypeError('Network request failed')
+    fetchSpy.mockRejectedValueOnce(networkError)
+
+    await expect(
+      instrumentedFetch('https://api.example.com/conversations/123', { method: 'GET' })
+    ).rejects.toBe(networkError)
+
+    expect(reportError).toHaveBeenCalledTimes(1)
+    const [error, context] = reportError.mock.calls[0]
+    expect(error.name).toBe('NetworkError')
+    expect(error.message).toContain('Network failure GET /conversations/:id')
+    expect(context.tags).toMatchObject({
+      'http.method': 'GET',
+      'http.path': '/conversations/:id',
+      'http.error': 'network',
+    })
+  })
+})

package/src/utils/client/instrumented_fetch.ts

@@ -0,0 +1,69 @@
+import { Log } from '../native_adapters/configuration'
+
+const SHARED_TAGS = {
+  team: 'chat',
+  package: 'chat-react-native',
+} as const
+
+const SKIPPED_STATUSES = new Set([401, 403, 404])
+
+export async function instrumentedFetch(url: string, init: RequestInit): Promise<Response> {
+  const method = init.method ?? 'GET'
+  try {
+    const response = await fetch(url, init)
+    if (!response.ok) reportHttpError(response, method, url)
+    return response
+  } catch (networkError) {
+    reportNetworkError(networkError as Error, method, url)
+    throw networkError
+  }
+}
+
+function reportHttpError(response: Response, method: string, url: string) {
+  const { status } = response
+  if (SKIPPED_STATUSES.has(status)) return
+
+  const path = templatePath(url)
+  const error = new Error(`HTTP ${status} ${method} ${path}`)
+  error.name = `HTTPError${status}`
+
+  Log.reportError(error, {
+    scope: 'http',
+    tags: {
+      ...SHARED_TAGS,
+      'http.status': String(status),
+      'http.method': method,
+      'http.path': path,
+    },
+  })
+}
+
+function reportNetworkError(networkError: Error, method: string, url: string) {
+  const path = templatePath(url)
+  const error = new Error(`Network failure ${method} ${path}: ${networkError.message}`)
+  error.name = 'NetworkError'
+
+  Log.reportError(error, {
+    scope: 'http',
+    tags: {
+      ...SHARED_TAGS,
+      'http.method': method,
+      'http.path': path,
+      'http.error': 'network',
+    },
+  })
+}
+
+function templatePath(url: string): string {
+  let path: string
+  try {
+    path = new URL(url).pathname
+  } catch {
+    path = url
+  }
+
+  return path
+    .split('/')
+    .map(segment => (/^\d+$/.test(segment) ? ':id' : segment))
+    .join('/')
+}

package/src/utils/client/request_helpers.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import URI from 'urijs'
+import { instrumentedFetch } from './instrumented_fetch'
 import { transformRequestData } from './transform_request_data'
 import transformResponse from './transform_response'
 import { Accumulator, GetRequest, PostRequest, RequestData, WalkRequest } from './types'
@@ -32,7 +33,7 @@ export const makeRequest = ({ action = 'GET', url, data = {}, headers = {} }: Ma
 
   const body = ['POST', 'PATCH'].includes(action) ? JSON.stringify(data) : undefined
 
-  return fetch(decodeURIComponent(uri.toString()), {
+  return instrumentedFetch(decodeURIComponent(uri.toString()), {
     method: action,
     headers,
     body,

package/src/utils/native_adapters/__tests__/log.test.ts

@@ -0,0 +1,62 @@
+import { LogAdapter } from '../log'
+
+describe('LogAdapter', () => {
+  describe('reportError', () => {
+    it('forwards the error and context to the host callback', () => {
+      const reportError = jest.fn()
+      const adapter = new LogAdapter({ reportError })
+      const error = new Error('boom')
+      const context = { scope: 'screen' as const, screenName: 'ConversationScreen' }
+
+      adapter.reportError(error, context)
+
+      expect(reportError).toHaveBeenCalledWith(error, context)
+    })
+
+    it('fires even when the adapter is disabled', () => {
+      const reportError = jest.fn()
+      const adapter = new LogAdapter({ enabled: false, reportError })
+
+      adapter.reportError(new Error('boom'))
+
+      expect(reportError).toHaveBeenCalledTimes(1)
+    })
+
+    it('falls back to console.error when no host callback is configured', () => {
+      const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      const adapter = new LogAdapter()
+      const error = new Error('boom')
+
+      adapter.reportError(error, { scope: 'http' })
+
+      expect(spy).toHaveBeenCalledWith(error, { scope: 'http' })
+      spy.mockRestore()
+    })
+  })
+
+  describe('info and error', () => {
+    it('drops info and error calls when disabled', () => {
+      const info = jest.fn()
+      const error = jest.fn()
+      const adapter = new LogAdapter({ enabled: false, info, error })
+
+      adapter.info('hi')
+      adapter.error('bye')
+
+      expect(info).not.toHaveBeenCalled()
+      expect(error).not.toHaveBeenCalled()
+    })
+
+    it('forwards info and error calls when enabled', () => {
+      const info = jest.fn()
+      const error = jest.fn()
+      const adapter = new LogAdapter({ enabled: true, info, error })
+
+      adapter.info('hi', { a: 1 })
+      adapter.error('bye', { b: 2 })
+
+      expect(info).toHaveBeenCalledWith('hi', { a: 1 })
+      expect(error).toHaveBeenCalledWith('bye', { b: 2 })
+    })
+  })
+})

package/src/utils/native_adapters/log.ts

@@ -1,18 +1,31 @@
+export type ReportErrorScope = 'screen' | 'component' | 'http'
+
+export type ReportErrorContext = {
+  componentStack?: string
+  scope?: ReportErrorScope
+  screenName?: string
+  tags?: Record<string, string>
+  extra?: Record<string, unknown>
+}
+
 interface LogAdapterConfig {
   enabled: boolean
   error: (message: string, ...args: any[]) => void
   info: (message: string, ...args: any[]) => void
+  reportError: (error: Error, context?: ReportErrorContext) => void
 }
 
 export class LogAdapter {
   enabled: boolean
   onError?: LogAdapterConfig['error']
   onInfo?: LogAdapterConfig['info']
+  onReportError?: LogAdapterConfig['reportError']
 
   constructor(config: Partial<LogAdapterConfig> = {}) {
     this.enabled = config.enabled ?? false
     this.onError = config.error
     this.onInfo = config.info
+    this.onReportError = config.reportError
   }
 
   error(message: string, ...args: any[]) {
@@ -26,4 +39,13 @@ export class LogAdapter {
 
     this.onInfo?.(message, ...args)
   }
+
+  reportError(error: Error, context?: ReportErrorContext) {
+    if (this.onReportError) {
+      this.onReportError(error, context)
+      return
+    }
+
+    console.error(error, context)
+  }
 }

package/src/utils/performance_tracking.ts

@@ -7,7 +7,7 @@
 
 import { Platform } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
-import { ApiClient } from '../hooks'
+import type { ApiClient } from '../hooks/use_api_client'
 const appName = DeviceInfo.getApplicationName()
 
 interface PerformanceMetric {