Components

<ErrorBoundary>

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

Name	Type	Description
`fallback`	`JSX.Element \| ((err: any, reset: () => void) => JSX.Element)`	The fallback content to render when an error is caught.

Report an issue with this page