<ErrorBoundary>

<ErrorBoundary> catches errors thrown while rendering or updating its children.

Import

import { ErrorBoundary } from "solid-js";

Type

function ErrorBoundary(props: {
  fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
  children: JSX.Element;
}): JSX.Element;

Props

fallback

• Type: JSX.Element | ((err: any, reset: () => void) => JSX.Element)

Fallback content. Function fallbacks receive the caught error and a reset function.

children

• Type: JSX.Element

Subtree wrapped by the boundary.

Return value

• Type: JSX.Element

Returns the rendered children or fallback content.

Behavior

• <ErrorBoundary> catches errors thrown while rendering JSX and while updating reactive computations in its subtree, including reactive async primitives when they surface through the same rendering or update flow.
• Errors thrown from event handlers or from callbacks scheduled outside Solid's rendering and update flow are not caught by the boundary.
• Function fallbacks receive reset, which clears the current error state and re-renders the children.
• Errors thrown by the fallback itself can be caught by a parent error boundary.

Examples

Basic usage

function ErrorProne() {
  throw new Error("Broken");
}

<ErrorBoundary
  fallback={(error, reset) => (
    <div>
      <p>{String(error)}</p>
      <button onClick={reset}>Try Again</button>
    </div>
  )}
>
  <ErrorProne />
</ErrorBoundary>;

Related

• catchError