Error boundary

<ErrorBoundary> is a component that can be used to catch errors thrown by child components. When encountering an error, this component will render a fallback UI instead of the problematic child component(s).

import { ErrorBoundary } from "solid-js";

<ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
  <ProblematicComponent />
</ErrorBoundary>

<ErrorBoundary> accepts a fallback prop that can be used to render a custom error message, or to provide a friendly notification to the user. This prop accepts a function that receives the caught error as an argument, providing a flexible way to handle different error scenarios.

View on Eraser

By wrapping parts of your application in <ErrorBoundary>, you can prevent the entire application from crashing when an error occurs due to a single component.

When an error is encountered, the <ErrorBoundary> component will catch the error and render the fallback UI instead of the problematic component(s). This way, even when a component fails, the user has a controlled UI response instead of a broken interface.