Error Boundaries
Catch render-time failures at a boundary with a fallback and a reset path, instead of losing the whole application shell.
Example
Put the boundary around the smallest route or feature that can recover independently and keep the reset action inside its fallback.
import { ErrorBoundary } from '@askrjs/askr/components';
<ErrorBoundary fallback={(error, reset) => (
<ProjectError error={error} onRetry={reset} />
)}>
<ProjectWorkspace />
</ErrorBoundary>Failure ownership
`ErrorBoundary`, imported from `@askrjs/askr/components`, is an opt-in wrapper — nothing catches render errors unless you put a boundary around it. Wrap the subtree that's allowed to fail independently of the rest of the page: `<ErrorBoundary fallback={<div>Something went wrong</div>}><FlakyView /></ErrorBoundary>`.
Fallback UI
The `fallback` prop accepts either static content or a function, `(error, reset) => content`, so the fallback can display the actual error or offer a retry action instead of a generic message. `resetKey` lets you tie the boundary's reset to your own state — changing that key clears the caught error and re-renders the children fresh, which is useful when a boundary wraps content keyed by a route param or selected item.
Recovery
The `reset` function passed into a function-form `fallback` clears the boundary's error state and attempts to render the children again, which is how a "Try again" button in the fallback UI is wired up. Because the boundary still tracks `resetKey` internally, either an explicit `reset()` call or a change to `resetKey` from outside can bring the subtree back.
Reporting
`onError`, an optional prop on `ErrorBoundary`, fires with the caught error so you can send it to logging or monitoring without that concern living inside the fallback UI itself. The default fallback renders in every environment, not just development — what's development-specific is that its error-details `<details>` panel defaults to open instead of collapsed, so a production build still surfaces a visible fallback (with the raw error text one click away) rather than a blank subtree.