React to ShadowJS: Error boundaries

Error boundaries

ErrorBoundary replaces class components with componentDidCatch.

For agentsUpdated 2026-10-20

ErrorBoundary replaces class components with componentDidCatch. It catches errors thrown while its children are created and errors thrown later by their effects, memos and cleanups. fallback is content or a function (error, reset); reset rebuilds the children from scratch. An error thrown by the fallback itself goes to the parent boundary. Errors thrown inside an event handler are not caught by a boundary.

src/safe.tsxtsx

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

export function Risky(props: { fail: () => boolean }) {
  if (props.fail()) throw new Error("boom");
  return <p>fine</p>;
}

export function Safe(props: { fail: () => boolean }) {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <button type="button" onClick={reset}>
          {error instanceof Error ? error.message : "failed"}, retry
        </button>
      )}
    >
      <Risky fail={props.fail} />
    </ErrorBoundary>
  );
}