ReliableErrorBoundary

Why you need this#

React's window.error handler does not catch render-phase errors — those are absorbed by the React reconciler and silently unmount the tree. You need a class-based error boundary to catch them.

<ReliableErrorBoundary> is that boundary. It calls captureException with the React component stack so the dashboard can show you exactly which component crashed, and it renders a fallback so the rest of your app keeps working.

Basic usage#

import { ReliableErrorBoundary } from '@reliableapp/react';

<ReliableErrorBoundary fallback={<p>Something went wrong.</p>}>
  <Dashboard />
</ReliableErrorBoundary>

Render-prop fallback with reset#

For a fallback that lets the user retry, use a render-prop fallback. The second argument is a reset function that clears the boundary's error state — children re-mount on the next render.

<ReliableErrorBoundary
  fallback={(error, reset) => (
    <div className="p-6 text-center">
      <h2>Something broke.</h2>
      <p className="text-sm text-gray-500">{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <CheckoutFlow />
</ReliableErrorBoundary>

Side effects on catch#

Pass an onError callback to run side effects when the boundary catches — local logging, telemetry, displaying a toast, etc. This runs after the error has already been reported to Reliable.

<ReliableErrorBoundary
  onError={(error, info) => {
    console.error('Boundary caught:', error);
    if (info.componentStack) console.error(info.componentStack);
  }}
  fallback={<ErrorPage />}
>
  <App />
</ReliableErrorBoundary>

Per-boundary tags#

Tag every error caught by a boundary with the section it was guarding. Useful for filtering in the dashboard.

<ReliableErrorBoundary
  tags={{ section: 'checkout', critical: true }}
  fallback={<CheckoutErrorPage />}
>
  <CheckoutFlow />
</ReliableErrorBoundary>

Props#

Where to place boundaries#

A single boundary at the root of your app is enough to prevent white-screen crashes. But finer-grained boundaries are usually better:

• Root boundary — catches anything that escapes the others; renders a "fatal error" page.
• Per-route boundary — keeps a crash in one route from blanking the whole app.
• Per-section boundary — wrap risky subtrees (a chart that depends on third-party data, a payment iframe, an experimental feature) so a crash there doesn't take down the surrounding page.

What it catches (and doesn't)#

Catches: errors thrown during render, in lifecycle methods, and in constructors of components below it.

Does not catch (caught elsewhere by Reliable):

• Errors in event handlers — the window.error listener catches these.
• Errors in async code (setTimeout, fetch.then) — the unhandledrejection listener catches these if uncaught.
• Errors thrown in the boundary itself — these bubble up to the parent boundary.
• SSR errors — error boundaries only run on the client.