<Errored .../>
Error boundary. Catches errors thrown by descendants and renders a fallback in their place. It protects its subtree from both synchronous throws during render and reactive throws inside descendant effect, memo and derived.
# Attributes
| name | type | description |
|---|---|---|
| fallback? | any | (err, reset) => JSX.Element | what to render when a descendant throws. When the fallback is a function it receives the thrown value and a reset function that clears the error and re-runs the subtree. |
| children | any | the protected subtree |
# Snippet
# Async errors
A component can return a promise — pota awaits it and renders the resolved value. If the promise rejects, the rejection is thrown back into the reactive scope and <Errored/> catches it the same way it catches synchronous throws. Clicking reset re-creates the protected subtree: AsyncBoom is called again and a fresh promise is created.
# Notes
- fallback is optional. Without it, the subtree is replaced with nothing when an error is caught.
- Calling reset re-renders the protected children, so the error must have been resolved (for example, stale state replaced) or it will throw again.
- Errors that occur outside the reactive graph (detached setTimeout, microtasks, external event listeners) are not caught — keep async work reactive (return a promise from a component, use an effect, or wrap callbacks with owned) so the error flows through the boundary.