diff --git a/src/routes/concepts/control-flow/error-boundary.mdx b/src/routes/concepts/control-flow/error-boundary.mdx index f07142f35..961dd2941 100644 --- a/src/routes/concepts/control-flow/error-boundary.mdx +++ b/src/routes/concepts/control-flow/error-boundary.mdx @@ -3,26 +3,39 @@ title: "Error boundary" order: 5 --- -`` 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). +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. -```jsx -import { ErrorBoundary } from "solid-js"; - -
Error: {err.message}
}> - -
-``` +The [``](/reference/components/error-boundary) component is used to create an error boundary. +It catches any error that occurs during the rendering or updating of its children. +However, an important note is that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are _not_ caught by error boundaries. -`` 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. +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 `` to re-render its children and reset the error state, providing users with a way to recover from the error. - +```tsx +import { ErrorBoundary } from "solid-js"; +import { Header, ErrorProne } from "./components"; -By wrapping parts of your application in ``, you can prevent the entire application from crashing when an error occurs due to a single component. +function App() { + return ( +
+
+ ( +
+

Something went wrong: {error.message}

+ +
+ )} + > + +
+
+ ); +} +``` -When an error is encountered, the `` 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. +In this example, when the `ErrorProne` component throws an error, the `` catches it, preventing it from affecting the rest of the application. +Instead, it displays the error message passed to the fallback prop. diff --git a/src/routes/reference/components/error-boundary.mdx b/src/routes/reference/components/error-boundary.mdx index bb5b9c1db..bcdae26a3 100644 --- a/src/routes/reference/components/error-boundary.mdx +++ b/src/routes/reference/components/error-boundary.mdx @@ -3,38 +3,52 @@ title: order: 5 --- -Catches uncaught errors and renders fallback content. +The `` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead. +This includes: -```tsx -import { ErrorBoundary } from "solid-js" -import type { JSX } from "solid-js" +- Errors that occur while rendering JSX. +- Errors that occur within `createEffect`, `createMemo`, and other state management primitives. +- Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives. -function ErrorBoundary(props: { - fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element) - children: JSX.Element -}): () => JSX.Element -``` +However, errors occurring outside the rendering process are **not** captured by error boundaries. +For instance: -Here's an example of how to use it: +- Errors that occur inside event handlers. +- Errors that occur after a `setTimeout`. -```tsx -Something went terribly wrong}> - - -``` +## Props -If you want to customize the error message, you can pass a function as the `fallback` prop. The function will be called with the error and a `reset` function. The `reset` function will reset the error boundary and re-render the children. +### `fallback` -```tsx -
Error: {err.toString()}
} -> - -
-``` +**Type**: `JSX.Element | ((err: any, reset: () => void) => JSX.Element)` -## Props +`fallback` provides content to display when an error occurs. +If a function is passed, it receives two parameters: + +- `err`: The caught error object. +- `reset`: A function that forces the `` to re-render its children and clear the error state. + +If there's an error within the `fallback` itself, however, it is not caught by the same ``. +Instead, it will bubble up to any parent error boundaries. -| Name | Type | Description | -| :--------- | :-------------------------------------------------------------- | :------------------------------------------------------ | -| `fallback` | `JSX.Element \| ((err: any, reset: () => void) => JSX.Element)` | The fallback content to render when an error is caught. | +## Example + +```tsx +import { ErrorBoundary } from "solid-js"; +import { ErrorProne } from "./components"; + +function Example() { + return ( + ( +
+

{error.message}

+ +
+ )} + > + +
+ ); +} +```