---
title: "Contain each crash to its panel · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/resilience/error-boundaries
id: APP-50
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 878
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Contain each crash to its panel

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-50
- Level: Recommended
- Chapter: [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)
- Rule: Wrap each route and each independent panel in an error boundary. One broken part then shows a fallback, and the rest keeps working. Report every caught error.
- Check: A test makes one panel throw during render. The other panels and the navigation still render, the fallback shows a retry button, and one error report is sent.
- How: Use the framework's boundary, such as `ErrorBoundary` in React, `onErrorCaptured` in Vue, `<svelte:boundary>` in Svelte, or `@boundary` in Angular (developer preview from 22.2). In older Angular, catch errors in each panel's data stream and keep a global `ErrorHandler` for the rest. The fallback names the part that failed, offers a retry and shows a reference. Send the error to your collector, as [browser error reports](https://agentwranglers.se/playbook/website/errors-and-outages/browser-error-reports.md) describes. In a server-rendered app, render each panel in its own `try` block, so one failure returns a fallback partial.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```tsx
export class PanelBoundary extends React.Component<{ name: string; children: React.ReactNode }, { reference?: string }> {
  state: { reference?: string } = {};
  static getDerivedStateFromError() { return { reference: crypto.randomUUID().slice(0, 8) }; }
  componentDidCatch(error: Error) { reportError({ error, panel: this.props.name, reference: this.state.reference }); }
  render() {
    if (!this.state.reference) return this.props.children;
    return <PanelFallback name={this.props.name} reference={this.state.reference} onRetry={() => this.setState({ reference: undefined })} />;
  }
}
```

### Python example

```python
def render_panel(name: str, render) -> str:
    try:
        return render()
    except Exception:
        reference = uuid.uuid4().hex[:8]
        log.exception("panel.render_failed", panel=name, reference=reference)
        return render_template("panels/_fallback.html", name=name, reference=reference)
```

## Sources

- [React docs on catching rendering errors with an error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)

## Related rules

- WEB-228 [Collect script errors from visitors' browsers](https://agentwranglers.se/playbook/website/errors-and-outages/browser-error-reports.md) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/resilience/error-boundaries">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Next: [Give every request a time limit](https://agentwranglers.se/playbook/app-ui/resilience/request-timeouts.md)
- [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)