Skip to content

Support fallback UI for non-rendering JS errors (GlobalErrorBoundary) #5930

@alwx

Description

@alwx

React's error boundaries (and our Sentry.ErrorBoundary) only catch errors during the rendering phase — errors thrown in render(), lifecycle methods, and constructors. They do not catch errors in:

  • Event handlers (onPress, onChange, etc.)
  • Async code (setTimeout, fetch, promises)
  • Errors thrown outside the React component tree

Customers who want to show a fallback UI for these non-rendering errors currently have to build their own solution by overriding ErrorUtils.setGlobalHandler, disabling our onerror integration, and bridging to React state manually. This is fragile, bypasses our error processing pipeline (flush, fatal deduplication, proper mechanism tagging), and risks running the app in a corrupted state.

Proposed Solution

Provide a Sentry.GlobalErrorBoundary component (or extend Sentry.ErrorBoundary with a global prop) that also catches fatal non-rendering JS errors and renders a fallback UI.

  // Option A: Dedicated component
  <Sentry.GlobalErrorBoundary fallback={({ error, resetError }) => <MyFallback />}>
    <App />
  </Sentry.GlobalErrorBoundary>
  // Option B: Extend existing ErrorBoundary
  <Sentry.ErrorBoundary fallback={...} global>
    <App />
  </Sentry.ErrorBoundary>

Metadata

Metadata

Assignees

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions