ErrorBoundary

`ErrorBoundary` is a component that catches errors in its children and renders a fallback UI.

tsx
<ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary fallback(property) fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined={(e(parameter) e: any) => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>{e(parameter) e: any.messageany}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>}>
  <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
</ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>

tsx
<ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary fallback(property) fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined={(e(parameter) e: any) => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>{e(parameter) e: any.messageany}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>}>
  <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
</ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>

Usage
Catching errors in a tree
Rendering a fallback UI when an error is caught

Usage

Catching errors in a tree

The achilles heel of web apps seems to lie in error handling. An unhandled error in one component can bring your entire app down with it. Preferably, apps can be split into self-contained sections so the failure of one component does not render the entire app unusable, only that one section.

Solid achieves this functionality with Error Boundaries. ErrorBoundary is a special component that ensures the unhandled errors of its children don't extend beyond its boundary.

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Componentfunction Component(): JSX.Element() {
  return (
    <>
      <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        <ComponentThatMightErrorfunction ComponentThatMightError(): null />
      </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
      <p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>But this text is still here!</p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
    </>
  );
}

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Componentfunction Component(): JSX.Element() {
  return (
    <>
      <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        <ComponentThatMightErrorfunction ComponentThatMightError(): null />
      </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
      <p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>But this text is still here!</p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
    </>
  );
}

Rendering a fallback UI when an error is caught

While a simple <ErrorBoundary /> component is enough to contain errors, you may notice that the error is very technical and could be a bit much for your users. You can provide a fallback prop to replace the default stack trace with your own code.

Your fallback function takes a single parameter (the cause of the error, typically some derivative of the Error object), and returns an element.

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Componentfunction Component(): JSX.Element() {
  return (
    <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary
      fallback(property) fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined={(e(parameter) e: Error: Errorinterface Error) => (
        <>
          <h2(property) JSX.HTMLElementTags.h2: JSX.HTMLAttributes<HTMLHeadingElement>>Oh no! An Error!</h2(property) JSX.HTMLElementTags.h2: JSX.HTMLAttributes<HTMLHeadingElement>>
          <details(property) JSX.HTMLElementTags.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
            <summary(property) JSX.HTMLElementTags.summary: JSX.HTMLAttributes<HTMLElement>>Click here to learn more</summary(property) JSX.HTMLElementTags.summary: JSX.HTMLAttributes<HTMLElement>>
            <p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
              <strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>>{e(parameter) e: Error.name(property) Error.name: string}</strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>>: {e(parameter) e: Error.message(property) Error.message: string}
            </p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
          </details(property) JSX.HTMLElementTags.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
        </>
      )}
    >
      <ComponentThatMightErrorfunction ComponentThatMightError(): null />
    </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
  );
}

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Componentfunction Component(): JSX.Element() {
  return (
    <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary
      fallback(property) fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined={(e(parameter) e: Error: Errorinterface Error) => (
        <>
          <h2(property) JSX.HTMLElementTags.h2: JSX.HTMLAttributes<HTMLHeadingElement>>Oh no! An Error!</h2(property) JSX.HTMLElementTags.h2: JSX.HTMLAttributes<HTMLHeadingElement>>
          <details(property) JSX.HTMLElementTags.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
            <summary(property) JSX.HTMLElementTags.summary: JSX.HTMLAttributes<HTMLElement>>Click here to learn more</summary(property) JSX.HTMLElementTags.summary: JSX.HTMLAttributes<HTMLElement>>
            <p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
              <strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>>{e(parameter) e: Error.name(property) Error.name: string}</strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>>: {e(parameter) e: Error.message(property) Error.message: string}
            </p(property) JSX.HTMLElementTags.p: JSX.HTMLAttributes<HTMLParagraphElement>>
          </details(property) JSX.HTMLElementTags.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
        </>
      )}
    >
      <ComponentThatMightErrorfunction ComponentThatMightError(): null />
    </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
  );
}

ErrorBoundary

ErrorBoundary is a component that catches errors in its children and renders a fallback UI.

Usage

Catching errors in a tree

Rendering a fallback UI when an error is caught

`ErrorBoundary` is a component that catches errors in its children and renders a fallback UI.