ErrorBoundary

Renders children. If they throw while being created, or any effect, memo or cleanup inside them throws later, the children are disposed and fallback is rendered instead. A function fallback receives the error and a reset that rebuilds the children from scratch.

Errors raised while the boundary is building or tearing down its children are captured and never write a signal, because writing inside a memo is an error. Late errors write the failure signal, which re-runs the boundary. After the boundary is disposed, late errors are dropped. Errors thrown by the fallback are not caught by this boundary; they reach the parent.

Import#

import { ErrorBoundary } from "@shadow-js/web";

Signature#

function ErrorBoundary(props: ErrorBoundaryProps): Accessor<unknown>

function ErrorBoundary(props: ErrorBoundaryLooseProps): Accessor<unknown>

Parameters#

Returns#

An accessor of the current content (children or fallback).

Throws#

• Nothing itself. An error from the children is shown through fallback, and an error thrown by a function fallback goes to the enclosing boundary or the root's error handler.

Examples#

import { ErrorBoundary } from "@shadow-js/web";

function Dashboard() {
  return <p>Dashboard</p>;
}

function Page() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <button onClick={reset}>Retry after: {String(error)}</button>
      )}
    >
      <Dashboard />
    </ErrorBoundary>
  );
}