@planningcenter/chat-react-native 3.37.0-rc.1 → 3.37.0-rc.3

package/build/utils/native_adapters/log.js

@@ -2,10 +2,12 @@ export class LogAdapter {
     enabled;
     onError;
     onInfo;
+    onReportError;
     constructor(config = {}) {
         this.enabled = config.enabled ?? false;
         this.onError = config.error;
         this.onInfo = config.info;
+        this.onReportError = config.reportError;
     }
     error(message, ...args) {
         if (!this.enabled)
@@ -17,5 +19,12 @@ export class LogAdapter {
             return;
         this.onInfo?.(message, ...args);
     }
+    reportError(error, context) {
+        if (this.onReportError) {
+            this.onReportError(error, context);
+            return;
+        }
+        console.error(error, context);
+    }
 }
 //# sourceMappingURL=log.js.map

package/build/utils/native_adapters/log.js.map

@@ -1 +1 @@
-{"version":3,"file":"log.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/log.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,UAAU;IACrB,OAAO,CAAS;IAChB,OAAO,CAA4B;IACnC,MAAM,CAA2B;IAEjC,YAAY,SAAoC,EAAE;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,KAAK,CAAA;QACtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,OAAe,EAAE,GAAG,IAAW;QACnC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAA;IAClC,CAAC;IAED,IAAI,CAAC,OAAe,EAAE,GAAG,IAAW;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAA;IACjC,CAAC;CACF","sourcesContent":["interface LogAdapterConfig {\n  enabled: boolean\n  error: (message: string, ...args: any[]) => void\n  info: (message: string, ...args: any[]) => void\n}\n\nexport class LogAdapter {\n  enabled: boolean\n  onError?: LogAdapterConfig['error']\n  onInfo?: LogAdapterConfig['info']\n\n  constructor(config: Partial<LogAdapterConfig> = {}) {\n    this.enabled = config.enabled ?? false\n    this.onError = config.error\n    this.onInfo = config.info\n  }\n\n  error(message: string, ...args: any[]) {\n    if (!this.enabled) return\n\n    this.onError?.(message, ...args)\n  }\n\n  info(message: string, ...args: any[]) {\n    if (!this.enabled) return\n\n    this.onInfo?.(message, ...args)\n  }\n}\n"]}
+{"version":3,"file":"log.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/log.ts"],"names":[],"mappings":"AAiBA,MAAM,OAAO,UAAU;IACrB,OAAO,CAAS;IAChB,OAAO,CAA4B;IACnC,MAAM,CAA2B;IACjC,aAAa,CAAkC;IAE/C,YAAY,SAAoC,EAAE;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,KAAK,CAAA;QACtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;QACzB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,WAAW,CAAA;IACzC,CAAC;IAED,KAAK,CAAC,OAAe,EAAE,GAAG,IAAW;QACnC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAA;IAClC,CAAC;IAED,IAAI,CAAC,OAAe,EAAE,GAAG,IAAW;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAA;IACjC,CAAC;IAED,WAAW,CAAC,KAAY,EAAE,OAA4B;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;YAClC,OAAM;QACR,CAAC;QAED,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAC/B,CAAC;CACF","sourcesContent":["export type ReportErrorScope = 'screen' | 'component' | 'http'\n\nexport type ReportErrorContext = {\n  componentStack?: string\n  scope?: ReportErrorScope\n  screenName?: string\n  tags?: Record<string, string>\n  extra?: Record<string, unknown>\n}\n\ninterface LogAdapterConfig {\n  enabled: boolean\n  error: (message: string, ...args: any[]) => void\n  info: (message: string, ...args: any[]) => void\n  reportError: (error: Error, context?: ReportErrorContext) => void\n}\n\nexport class LogAdapter {\n  enabled: boolean\n  onError?: LogAdapterConfig['error']\n  onInfo?: LogAdapterConfig['info']\n  onReportError?: LogAdapterConfig['reportError']\n\n  constructor(config: Partial<LogAdapterConfig> = {}) {\n    this.enabled = config.enabled ?? false\n    this.onError = config.error\n    this.onInfo = config.info\n    this.onReportError = config.reportError\n  }\n\n  error(message: string, ...args: any[]) {\n    if (!this.enabled) return\n\n    this.onError?.(message, ...args)\n  }\n\n  info(message: string, ...args: any[]) {\n    if (!this.enabled) return\n\n    this.onInfo?.(message, ...args)\n  }\n\n  reportError(error: Error, context?: ReportErrorContext) {\n    if (this.onReportError) {\n      this.onReportError(error, context)\n      return\n    }\n\n    console.error(error, context)\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.37.0-rc.1",
+  "version": "3.37.0-rc.3",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "7c6773155a5b589fe9a58a28921ddaac1d134e86"
+  "gitHead": "0dbe10dae358e399f7fc130a434045c9aa6931e1"
 }

package/src/components/conversation/message.tsx

@@ -31,7 +31,7 @@ import {
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
   platformFontWeightMedium,
 } from '../../utils/styles'
-import ErrorBoundary from '../page/error_boundary'
+import { ComponentErrorBoundary } from '../page/component_error_boundary'
 import { MessageAttachments } from './message_attachments'
 import { MessageMarkdown } from './message_markdown'
 import { MessageReadReceipts } from './message_read_receipts'
@@ -103,7 +103,9 @@ export function Message({
   const messageIsReplyLabel = replyToReplyRootMessage ? 'Reply' : ''
   const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
   const replyCountLabel = isReplyRootMessage ? replyCountText : ''
-  const accessibilityLabel = `${author?.name || ''} ${messageIsReplyLabel} ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountLabel}`
+  const accessibilityLabel = `${author?.name || ''} ${messageIsReplyLabel} ${attachmentLabel} ${
+    messageText || ''
+  } ${timestamp} ${replyCountLabel}`
 
   useEffect(() => {
     if (pending) {
@@ -237,14 +239,14 @@ export function Message({
               </View>
             ) : (
               <>
-                <ErrorBoundary>
+                <ComponentErrorBoundary>
                   <MessageAttachments
                     attachments={attachments}
                     metaProps={metaProps}
                     onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
                     onMessageLongPress={handleMessageLongPress}
                   />
-                </ErrorBoundary>
+                </ComponentErrorBoundary>
                 {text && (
                   <View style={styles.messageText}>
                     <MessageMarkdown text={text} />

package/src/components/index.tsx

@@ -1,4 +1,6 @@
 export * from './conversations/conversations'
+export * from './page/component_error_boundary'
 export * from './page/error_boundary'
+export * from './page/page_error_boundary'
 export * from './display'
 export * from './group_conversation_list'

package/src/components/page/__tests__/component_error_boundary.test.tsx

@@ -0,0 +1,46 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { Log } from '../../../utils/native_adapters/configuration'
+import { ComponentErrorBoundary } from '../component_error_boundary'
+
+function Boom({ thrown }: { thrown: unknown }) {
+  throw thrown
+}
+
+describe('ComponentErrorBoundary', () => {
+  let reportError: jest.SpyInstance
+  let consoleError: jest.SpyInstance
+
+  beforeEach(() => {
+    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    reportError.mockRestore()
+    consoleError.mockRestore()
+  })
+
+  it('defaults the reporter scope to "component" and renders nothing on catch', () => {
+    const { toJSON } = render(
+      <ComponentErrorBoundary>
+        <Boom thrown={new Error('attachment boom')} />
+      </ComponentErrorBoundary>
+    )
+
+    expect(toJSON()).toBeNull()
+    expect(reportError.mock.calls[0][1]).toMatchObject({ scope: 'component' })
+  })
+
+  it('lets callers override the defaults', () => {
+    const { getByText } = render(
+      <ComponentErrorBoundary scope="screen" fallback={<Text>overridden</Text>}>
+        <Boom thrown={new Error('boom')} />
+      </ComponentErrorBoundary>
+    )
+
+    expect(getByText('overridden')).toBeTruthy()
+    expect(reportError.mock.calls[0][1]).toMatchObject({ scope: 'screen' })
+  })
+})

package/src/components/page/__tests__/error_boundary.test.tsx

@@ -0,0 +1,93 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { FailedResponse } from '../../../types/api_primitives'
+import { Log } from '../../../utils/native_adapters/configuration'
+import { ResponseError } from '../../../utils/response_error'
+import { ErrorBoundary } from '../error_boundary'
+
+function Boom({ thrown }: { thrown: unknown }) {
+  throw thrown
+}
+
+describe('ErrorBoundary', () => {
+  let reportError: jest.SpyInstance
+  let consoleError: jest.SpyInstance
+
+  beforeEach(() => {
+    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    reportError.mockRestore()
+    consoleError.mockRestore()
+  })
+
+  it('reports caught errors with the component stack and chat tags', () => {
+    const error = new TypeError('Invalid time value')
+
+    render(
+      <ErrorBoundary scope="screen" screenName="ConversationScreen" fallback={null}>
+        <Boom thrown={error} />
+      </ErrorBoundary>
+    )
+
+    expect(reportError).toHaveBeenCalledTimes(1)
+    const [reportedError, context] = reportError.mock.calls[0]
+    expect(reportedError).toBe(error)
+    expect(context).toMatchObject({
+      scope: 'screen',
+      screenName: 'ConversationScreen',
+      tags: { team: 'chat', package: 'chat-react-native' },
+    })
+    expect(typeof context.componentStack).toBe('string')
+    expect(context.componentStack.length).toBeGreaterThan(0)
+  })
+
+  it('does not report ResponseError — those are owned by the HTTP layer', () => {
+    const failure = { status: 500, statusText: 'Server Error', errors: [] } as FailedResponse
+
+    render(
+      <ErrorBoundary fallback={null}>
+        <Boom thrown={new ResponseError(failure)} />
+      </ErrorBoundary>
+    )
+
+    expect(reportError).not.toHaveBeenCalled()
+  })
+
+  it('renders the provided fallback element when a child throws', () => {
+    const { getByText } = render(
+      <ErrorBoundary fallback={<Text>custom fallback</Text>}>
+        <Boom thrown={new Error('boom')} />
+      </ErrorBoundary>
+    )
+
+    expect(getByText('custom fallback')).toBeTruthy()
+  })
+
+  it('renders nothing when no fallback is provided', () => {
+    const { toJSON } = render(
+      <ErrorBoundary>
+        <Boom thrown={new Error('boom')} />
+      </ErrorBoundary>
+    )
+
+    expect(toJSON()).toBeNull()
+  })
+
+  it('calls a fallback render function with the caught error and a reset handler', () => {
+    const fallback = jest.fn().mockReturnValue(<Text>fn fallback</Text>)
+    const error = new Error('boom')
+
+    const { getByText } = render(
+      <ErrorBoundary fallback={fallback}>
+        <Boom thrown={error} />
+      </ErrorBoundary>
+    )
+
+    expect(getByText('fn fallback')).toBeTruthy()
+    expect(fallback).toHaveBeenCalledWith(error, expect.any(Function))
+  })
+})

package/src/components/page/__tests__/page_error_boundary.test.tsx

@@ -0,0 +1,77 @@
+import { NavigationContainer } from '@react-navigation/native'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { Log } from '../../../utils/native_adapters/configuration'
+import { PageErrorBoundary } from '../page_error_boundary'
+
+jest.mock('../../primitive/blank_state_primitive', () => {
+  const { Text } = require('react-native')
+  const { createElement } = require('react')
+  const passthrough = ({ children }: { children?: unknown }) => children
+  const asText = ({ children }: { children?: unknown }) => createElement(Text, null, children)
+  const empty = () => null
+  return {
+    __esModule: true,
+    default: {
+      Root: passthrough,
+      Imagery: empty,
+      Content: passthrough,
+      Heading: asText,
+      Text: asText,
+      Button: empty,
+      TextButton: asText,
+    },
+  }
+})
+
+function Boom({ thrown }: { thrown: unknown }) {
+  throw thrown
+}
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <NavigationContainer>{ui}</NavigationContainer>
+    </QueryClientProvider>
+  )
+
+describe('PageErrorBoundary', () => {
+  let reportError: jest.SpyInstance
+  let consoleError: jest.SpyInstance
+
+  beforeEach(() => {
+    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    reportError.mockRestore()
+    consoleError.mockRestore()
+  })
+
+  it('defaults the reporter scope to "screen"', () => {
+    renderWithProviders(
+      <PageErrorBoundary screenName="ConversationScreen">
+        <Boom thrown={new Error('boom')} />
+      </PageErrorBoundary>
+    )
+
+    expect(reportError.mock.calls[0][1]).toMatchObject({
+      scope: 'screen',
+      screenName: 'ConversationScreen',
+    })
+  })
+
+  it('renders the full Oops fallback when no fallback is provided', () => {
+    const { getByText } = renderWithProviders(
+      <PageErrorBoundary>
+        <Boom thrown={new Error('boom')} />
+      </PageErrorBoundary>
+    )
+
+    expect(getByText('Oops!')).toBeTruthy()
+    expect(getByText('Something unexpected happened.')).toBeTruthy()
+  })
+})

package/src/components/page/component_error_boundary.tsx

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react'
+import { ErrorBoundary, ErrorBoundaryProps } from './error_boundary'
+
+export function ComponentErrorBoundary({
+  children,
+  ...props
+}: PropsWithChildren<ErrorBoundaryProps>) {
+  return (
+    <ErrorBoundary scope="component" fallback={null} {...props}>
+      {children}
+    </ErrorBoundary>
+  )
+}

package/src/components/page/error_boundary.tsx

@@ -1,137 +1,53 @@
-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 React, { PropsWithChildren } from 'react'
+import { Log } from '../../utils/native_adapters/configuration'
+import { ReportErrorScope } from '../../utils/native_adapters/log'
 import { ResponseError } from '../../utils/response_error'
-import BlankState from '../primitive/blank_state_primitive'
+
+export type ErrorBoundaryFallback =
+  | React.ReactNode
+  | ((error: Error, reset: () => void) => React.ReactNode)
+
+export type ErrorBoundaryProps = {
+  scope?: ReportErrorScope
+  screenName?: string
+  fallback?: ErrorBoundaryFallback
+}
 
 type ErrorBoundaryState = {
-  error: ResponseError | Error | TypeError | null
-  unsubscriber: () => void
+  error: Error | null
 }
 
-class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
-  state: ErrorBoundaryState = {
-    error: null,
-    unsubscriber: () => {},
-  }
+export class ErrorBoundary extends React.Component<
+  PropsWithChildren<ErrorBoundaryProps>,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { error: null }
 
-  componentDidCatch(error: any) {
-    this.handleError(error)
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error }
   }
 
-  handleError(error: any) {
-    this.setState({ error })
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    if (error instanceof ResponseError) return
+
+    Log.reportError(error, {
+      componentStack: errorInfo.componentStack ?? undefined,
+      scope: this.props.scope,
+      screenName: this.props.screenName,
+      tags: { team: 'chat', package: 'chat-react-native' },
+    })
   }
 
   handleReset = () => {
-    this.props.onReset?.()
     this.setState({ error: null })
   }
 
   render() {
-    if (this.state.error) {
-      return <ErrorView error={this.state.error} onReset={this.handleReset} />
-    } else {
-      return this.props.children
-    }
-  }
-}
+    if (!this.state.error) return this.props.children
 
-function ErrorView({ error, onReset }: { error: Error | ResponseError; onReset: () => void }) {
-  const { reset } = useQueryErrorResetBoundary()
+    const { fallback } = this.props
+    if (fallback === undefined) return null
 
-  const handleReset = useCallback(() => {
-    reset()
-    onReset()
-  }, [reset, onReset])
-
-  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 typeof fallback === 'function' ? fallback(this.state.error, this.handleReset) : fallback
   }
-
-  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
 }
-
-function isNetworkError(error: ResponseError | Error | TypeError | null) {
-  const isError = error instanceof Error
-  const networkFailedMessages = [
-    'Network request failed',
-    'Network request timed out',
-    'Failed to fetch',
-  ]
-
-  if (!isError) return false
-
-  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>
-  )
-}
-
-export default ErrorBoundary

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>
   )
 }