Improve error boundary docs

Author: amirhhashemi

src/routes/concepts/control-flow/error-boundary.mdx

@@ -3,26 +3,39 @@ title: "Error boundary"
 order: 5
 ---
 
-`<ErrorBoundary>` 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 your 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";
-
-<ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
-	<ProblematicComponent />
-</ErrorBoundary>
-```
+The [`<ErrorBoundary>`](/reference/components/error-boundary) component is used to create an error boundary.
+`<ErrorBoundary>` catches any error that occurs during the rendering or updating of its children.
+However, it's important to note that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are **not** caught by error boundaries.
 
-`<ErrorBoundary>` 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.
+You can use the `fallback` prop to display a user-friendly error message or notification when an error occurs.
+If you pass a function to `fallback`, it will receive the error object as well as a `reset` function.
+The `reset` function forces the `<ErrorBoundary>` to re-render its children and resets the error state, providing users with a way to recover from the error.
 
-<EraserLink
-	href="https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=aSw5yYrSY22mI_YqoZlpGQ"
-	preview="https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=aSw5yYrSY22mI_YqoZlpGQ&type=embed"
-/>
+```tsx
+import { ErrorBoundary } from "solid-js";
+import { Header, ErrorProne } from "./components";
 
-By wrapping parts of your application in `<ErrorBoundary>`, you can prevent the entire application from crashing when an error occurs due to a single component.
+function App() {
+	return (
+		<div>
+			<Header />
+			<ErrorBoundary
+				fallback={(error, reset) => (
+					<div>
+						<p>Something went wrong: {error.message}</p>
+						<button onClick={reset}>Try Again</button>
+					</div>
+				)}
+			>
+				<ErrorProne />
+			</ErrorBoundary>
+		</div>
+	);
+}
+```
 
-When an error is encountered, the `<ErrorBoundary>` 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 `<ErrorBoundary>` catches it, preventing it from affecting the rest of the application.
+Instead, it displays an error message in place of the `ErrorProne` component.

src/routes/reference/components/error-boundary.mdx

@@ -3,38 +3,51 @@ title: <ErrorBoundary>
 order: 5
 ---
 
-Catches uncaught errors and renders fallback content.
+The `<ErrorBoundary>` component catches errors that occur during the rendering or updating of its children, and shows a fallback UI instead.
+That 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
-<ErrorBoundary fallback={<div>Something went terribly wrong</div>}>
-	<MyComp />
-</ErrorBoundary>
-```
+## 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
-<ErrorBoundary
-	fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}
->
-	<MyComp />
-</ErrorBoundary>
-```
+**Type**: `JSX.Element | ((err: any, reset: () => void) => JSX.Element)`
 
-## Props
+The content to display when an error occurs.
+If `fallback` is a function, it receives two parameters:
+
+- `err`: The caught error object.
+- `reset`: A function that forces the `<ErrorBoundary>` to re-render its children and clear the error state.
+
+It's important to note that errors occurring within the fallback itself are not caught by the same `<ErrorBoundary>`, and will propagate 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 (
+		<ErrorBoundary
+			fallback={(error, reset) => (
+				<div>
+					<p>{error.message}</p>
+					<button onClick={reset}>Try Again</button>
+				</div>
+			)}
+		>
+			<ErrorProne />
+		</ErrorBoundary>
+	);
+}
+```