@planningcenter/chat-react-native 3.37.0-rc.2 → 3.37.0-rc.4

package/src/components/page/page_error_boundary.tsx

@@ -0,0 +1,112 @@
+import { useNavigation } from '@react-navigation/native'
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'
+import { onAuthRefresh } from '../../utils/auth_events'
+import { ResponseError } from '../../utils/response_error'
+import BlankState from '../primitive/blank_state_primitive'
+import { ErrorBoundary, ErrorBoundaryFallback, ErrorBoundaryProps } from './error_boundary'
+
+const renderPageFallback: ErrorBoundaryFallback = (error, reset) => (
+  <ErrorView error={error} reset={reset} />
+)
+
+export function PageErrorBoundary({ children, ...props }: PropsWithChildren<ErrorBoundaryProps>) {
+  return (
+    <ErrorBoundary scope="screen" fallback={renderPageFallback} {...props}>
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+function ErrorView({ error, reset }: { error: Error; reset: () => void }) {
+  const { reset: resetQueries } = useQueryErrorResetBoundary()
+
+  const handleReset = useCallback(() => {
+    resetQueries()
+    reset()
+  }, [resetQueries, reset])
+
+  useEffect(() => handleReset, [handleReset])
+
+  if (error instanceof ResponseError) {
+    return <ResponseErrorView response={error.response} onReset={handleReset} />
+  }
+
+  if (isNetworkError(error)) {
+    return (
+      <ErrorContent
+        heading={'Problem connecting!'}
+        body={'Check your internet connection and try again.'}
+      />
+    )
+  }
+
+  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
+}
+
+function isNetworkError(error: Error) {
+  const networkFailedMessages = [
+    'Network request failed',
+    'Network request timed out',
+    'Failed to fetch',
+  ]
+
+  return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)
+}
+
+function ResponseErrorView({ response, onReset }: { response: Response; onReset: () => void }) {
+  const { status } = response
+
+  const heading = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Permission required'
+      case 404:
+        return 'Content not found'
+      default:
+        return 'Oops!'
+    }
+  }, [status])
+
+  const body = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Contact your administrator for access.'
+      case 404:
+        return 'If you believe something should be here, please reach out to your administrator.'
+      default:
+        return 'Something unexpected happened.'
+    }
+  }, [status])
+
+  useEffect(() => {
+    if (status !== 401) return
+
+    return onAuthRefresh(onReset)
+  }, [status, onReset])
+
+  return <ErrorContent heading={heading} body={body} />
+}
+
+function ErrorContent({ heading, body }: { heading: string; body: string }) {
+  const navigation = useNavigation()
+
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="people.noTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>{heading}</BlankState.Heading>
+        <BlankState.Text>{body}</BlankState.Text>
+      </BlankState.Content>
+      <BlankState.Button
+        title="Go back"
+        onPress={navigation.goBack}
+        size="md"
+        accessibilityRole="link"
+      />
+      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
+        Report a bug
+      </BlankState.TextButton>
+    </BlankState.Root>
+  )
+}

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/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 = [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.includes(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/log.ts

@@ -1,4 +1,4 @@
-export type ReportErrorScope = 'screen' | 'message' | 'http'
+export type ReportErrorScope = 'screen' | 'component' | 'http'
 
 export type ReportErrorContext = {
   componentStack?: string