ErrorBoundary

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, where the failure of one component does not render the entire app unusable, only that one section.

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

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Rootfunction Root(): JSX.Element() {
  return (
    <>
      <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>You can't see this text because of the error</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
        {() => {
          throw new Errorvar Error: ErrorConstructor
new (message?: string | undefined) => Error("Oh no! An error!");
        }}
      </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
      <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>But this text is still here!</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
    </>
  );
}

tsx
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary } from "solid-start/error-boundary";
 
function Rootfunction Root(): JSX.Element() {
  return (
    <>
      <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>You can't see this text because of the error</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
        {() => {
          throw new Errorvar Error: ErrorConstructor
new (message?: string | undefined) => Error("Oh no! An error!");
        }}
      </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
      <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>But this text is still here!</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
    </>
  );
}

Fallbacks

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
<ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary
  fallback(property) fallback?: ((e: any) => JSX.Element) | undefined={(e(parameter) e: Error: Errorinterface Error) => (
    <>
      <h2(property) JSX.IntrinsicElements.h2: JSX.HTMLAttributes<HTMLHeadingElement>>Oh no! An Error!</h2(property) JSX.IntrinsicElements.h2: JSX.HTMLAttributes<HTMLHeadingElement>>
      <details(property) JSX.IntrinsicElements.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
        <summary(property) JSX.IntrinsicElements.summary: JSX.HTMLAttributes<HTMLElement>>Click here to learn more</summary(property) JSX.IntrinsicElements.summary: JSX.HTMLAttributes<HTMLElement>>
        <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
          <strong(property) JSX.IntrinsicElements.strong: JSX.HTMLAttributes<HTMLElement>>{e(parameter) e: Error.name(property) Error.name: string}</strong(property) JSX.IntrinsicElements.strong: JSX.HTMLAttributes<HTMLElement>>: {e(parameter) e: Error.message(property) Error.message: string}
        </p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
      </details(property) JSX.IntrinsicElements.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
    </>
  )}
>
  <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>You can't see this text because of the error</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
  {() => {
    throw new Errorvar Error: ErrorConstructor
new (message?: string | undefined) => Error("Oh no! An error!");
  }}
</ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>;

tsx
<ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary
  fallback(property) fallback?: ((e: any) => JSX.Element) | undefined={(e(parameter) e: Error: Errorinterface Error) => (
    <>
      <h2(property) JSX.IntrinsicElements.h2: JSX.HTMLAttributes<HTMLHeadingElement>>Oh no! An Error!</h2(property) JSX.IntrinsicElements.h2: JSX.HTMLAttributes<HTMLHeadingElement>>
      <details(property) JSX.IntrinsicElements.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
        <summary(property) JSX.IntrinsicElements.summary: JSX.HTMLAttributes<HTMLElement>>Click here to learn more</summary(property) JSX.IntrinsicElements.summary: JSX.HTMLAttributes<HTMLElement>>
        <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
          <strong(property) JSX.IntrinsicElements.strong: JSX.HTMLAttributes<HTMLElement>>{e(parameter) e: Error.name(property) Error.name: string}</strong(property) JSX.IntrinsicElements.strong: JSX.HTMLAttributes<HTMLElement>>: {e(parameter) e: Error.message(property) Error.message: string}
        </p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
      </details(property) JSX.IntrinsicElements.details: JSX.DetailsHtmlAttributes<HTMLDetailsElement>>
    </>
  )}
>
  <p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>You can't see this text because of the error</p(property) JSX.IntrinsicElements.p: JSX.HTMLAttributes<HTMLParagraphElement>>
  {() => {
    throw new Errorvar Error: ErrorConstructor
new (message?: string | undefined) => Error("Oh no! An error!");
  }}
</ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>;