Contain each crash to its panel

How to do it

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 describes. In a server-rendered app, render each panel in its own try block, so one failure returns a fallback partial.

Examples

TypeScript example

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

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)

How to 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.

Sources

• React docs on catching rendering errors with an error boundary

Related rules

• WEB-228 Collect script errors from visitors' browsers in Website