Control flow

Error boundary

By default, if part of an application throws an error during rendering, the entire application can crash, resulting in Solid removing its UI from the screen. Error boundaries provide a way to catch these errors and prevent the entire app from crashing.

Solid 2.0 —

In Solid 2.0, ErrorBoundary is renamed to Errored. The API is the same — it catches errors during rendering or updating its children. Errors occurring outside the rendering process, such as in event handlers or after a setTimeout, are not caught by error boundaries.

The <Errored> component is used to create an error boundary. The fallback prop can be used to display a user-friendly error message or notification when an error occurs. If a function is passed to fallback, it will receive the error object as well as a reset function. The reset function forces the <Errored> to re-render its children and reset the error state, providing users with a way to recover from the error.

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

function App() {
  return (
    <div>
      <Header />
      <Errored
        fallback={(error, reset) => (
          <div>
            <p>Something went wrong: {error.message}</p>
            <button onClick={reset}>Try Again</button>
          </div>
        )}
      >
        <ErrorProne />
      </Errored>
    </div>
  );
}

In this example, when the ErrorProne component throws an error, the <Errored> catches it, preventing it from affecting the rest of the application. Instead, it displays the error message passed to the fallback prop.

Report an issue with this page