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) => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{e.message}</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) => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{e.message}</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
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: 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.name(property) Error.name: string
}</strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>
>: {e.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: 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.name(property) Error.name: string
}</strong(property) JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>
>: {e.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
> );
}