<ErrorBoundary>: Reactive Owner Scope Error Capture and Fallback Swaps
- Last updated
- Prerequisites:
- SolidJS Owner Hierarchy
- SolidJS Components Run Once
- solidjs
- error-boundary
- errors
- owner-tree
- catchError
- reactivity
Read at your depth
The practical view
`<ErrorBoundary fallback={(err, reset) => <ErrorUI error={err} retry={reset} />}>` is a built-in Solid component that catches JavaScript errors thrown in its child component hierarchy. When an error occurs in a child computation, render block, or resource, the error boundary catches it, prevents the app from crashing, and renders the fallback function with a `reset()` callback to retry.
The same idea in other frameworks
React Class Component with `componentDidCatch` and `getDerivedStateFromError`.Angular `ErrorHandler` global provider or custom error boundary directives.`onErrorCaptured()` component lifecycle hook.SvelteKit `+error.svelte` boundary or custom try/catch snippet wrappers.Legacy vs modern
Uncaught Application Crash vs <ErrorBoundary> Isolation
Uncaught errors in child components break the whole page; `<ErrorBoundary>` isolates failures and offers retry mechanisms.
<BuggyWidget /> // ❌ An error here crashes the entire application view<ErrorBoundary fallback={(err, reset) => <Fallback error={err} onReset={reset} />}><BuggyWidget /></ErrorBoundary> // ✅ NEWInterview gotchas
Context
Interviewers test your knowledge of how async errors propagate through the reactive graph.
The mechanical answer
Yes. When a `createResource` fetcher promise rejects, the error is stored in `data.error`. When the resource is read inside an `<ErrorBoundary>` under `<Suspense>`, the error is thrown directly to the nearest `catchError` owner, triggering the `<ErrorBoundary fallback={...}>`.
Trap
Errors thrown inside un-tracked detached asynchronous callbacks (like a raw `setTimeout(() => { throw new Error(); })`) cannot be caught by `<ErrorBoundary>` because they execute outside the Owner tracking scope.
Context
Checks understanding of error boundary state recovery.
The mechanical answer
The `reset()` function clears the internal error signal on the ErrorBoundary Owner and attempts to re-create and re-mount the child component hierarchy. If the underlying condition causing the crash (e.g. invalid server data) has been corrected, the child mounts successfully.
Trap
If the error condition is still present when calling `reset()`, the child will throw again immediately and the error boundary will catch it again.