Components

<ErrorBoundary>

Edit this page

Catches uncaught errors and renders fallback content.

import { ErrorBoundary } from "solid-js"
import type { JSX } from "solid-js"
function ErrorBoundary(props: {
fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element)
children: JSX.Element
}): () => JSX.Element

Here's an example of how to use it:

<ErrorBoundary fallback={<div>Something went terribly wrong</div>}>
<MyComp />
</ErrorBoundary>

If you want to customize the error message, you can pass a function as the fallback prop. The function will be called with the error and a reset function. The reset function will reset the error boundary and re-render the children.

<ErrorBoundary
fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}
>
<MyComp />
</ErrorBoundary>

Props

NameTypeDescription
fallbackJSX.Element | ((err: any, reset: () => void) => JSX.Element)The fallback content to render when an error is caught.
Report an issue with this page