<Errored>

The <Errored> component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead. This includes:

• Errors that occur while rendering JSX.
• Errors that occur within createEffect, createMemo, and other reactive primitives.
• Errors that occur within async computations.

However, errors occurring outside the rendering process are not captured:

• Errors that occur inside event handlers.
• Errors that occur after a setTimeout.

Props

fallback

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

fallback provides content to display when an error occurs. If a function is passed, it receives two parameters:

• err: The caught error object.
• reset: A function that forces <Errored> to re-render its children and clear the error state.

If there's an error within the fallback itself, it is not caught by the same <Errored>. Instead, it will bubble up to any parent error boundaries.

Example

import { Errored } from "solid-js";
import { ErrorProne } from "./components";

function Example() {
  return (
    <Errored
      fallback={(error, reset) => (
        <div>
          <p>{error.message}</p>
          <button onClick={reset}>Try Again</button>
        </div>
      )}
    >
      <ErrorProne />
    </Errored>
  );
}

Migration

// 1.x
import { ErrorBoundary } from "solid-js"
<ErrorBoundary fallback={(err, reset) => <div>{err.message}</div>}>
  <Child />
</ErrorBoundary>

// 2.0
import { Errored } from "solid-js"
<Errored fallback={(err, reset) => <div>{err.message}</div>}>
  <Child />
</Errored>