error-boundary.mdx

title	<ErrorBoundary>
order	5

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

• Errors that occur while rendering JSX.
• Errors that occur within createEffect, createMemo, and other state management primitives.
• Errors that occur within createResource and other asynchronous state management or data-fetching primitives.

However, errors occurring outside the rendering process are not captured by error boundaries. For instance:

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

Props

fallback

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

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

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

It's important to note that errors occurring within the fallback itself are not caught by the same <ErrorBoundary>, and will propagate to any parent error boundaries.

Example

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

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