Error Boundary

Catches a render error in its subtree and shows a fallback. The one component here that must be a class — getDerivedStateFromError has no hook equivalent.

src/components/ui/error-boundary.tsx

About

From the component's own source, where it was written.

Catches a render error in its subtree and shows a fallback.

The one component here that must be a class: componentDidCatch and getDerivedStateFromError have no hook equivalent, and React has said they are not getting one.

resetKeys is what makes recovery work. Clearing the error alone re-renders the same children with the same props and throws again immediately — the boundary has to be told what changed. Pass whatever caused the failure (a route, a record id) and it resets when that changes.

It deliberately does not report anywhere. Wire onError to your own telemetry rather than having a UI component decide where errors go.

Install

npx astralyx-ui add error-boundary

Usage

import { ErrorBoundary } from '@/components/ui/error-boundary'

<ErrorBoundary resetKeys={[routeId]} onError={report}>
  <Page />
</ErrorBoundary>

Composer

Change the props and the source below follows.

Rendering normally.

Props

title

retryLabel

tsx

<ErrorBoundary resetKeys={[routeId]}>
  <Page />
</ErrorBoundary>

Examples

Throw and recover

tsx

<ErrorBoundary resetKeys={[explode]}><Boom /></ErrorBoundary>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

Functions

Function	Signature	Description
ErrorBoundary	ErrorBoundary	—

Types

`ErrorBoundaryProps`

Field	Type	Description
children	ReactNode	—
fallback?	(error: Error, reset: () => void) => ReactNode	Replaces the default panel.
onError?	(error: Error, info: ErrorInfo) => void	Wire your own telemetry. The component deliberately reports nowhere on its own.
resetKeys?	unknown[]	Clears the error when any entry changes. Without it, clearing re-renders the same children with the same props and throws again immediately.
title?	string	—
retryLabel?	ReactNode	Text on the reset button in the default fallback.