{
  "id": "2979336661d6b8af4dd2be3e",
  "source": "solid:solid-router",
  "type": "github-document",
  "title": "error-boundary",
  "content": "---\ntitle: \u003cErrorBoundary\u003e\norder: 5\nuse_cases: \u003e-\n  error handling, production apps, preventing crashes, user experience,\n  debugging, fallback ui\ntags:\n  - error-handling\n  - components\n  - debugging\n  - fallback\n  - production\n  - stability\nversion: '1.0'\ndescription: \u003e-\n  Catch and handle rendering errors in SolidJS components with ErrorBoundary.\n  Display fallback UI when errors occur in children components.\n---\n\nThe `\u003cErrorBoundary\u003e` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead.\nThis includes:\n\n- Errors that occur while rendering JSX.\n- Errors that occur within `createEffect`, `createMemo`, and other state management primitives.\n- Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives.\n\nHowever, errors occurring outside the rendering process are **not** captured by error boundaries.\nFor instance:\n\n- Errors that occur inside event handlers.\n- Errors that occur after a `setTimeout`.\n\n## Props\n\n### `fallback`\n\n**Type**: `JSX.Element | ((err: any, reset: () =\u003e void) =\u003e JSX.Element)`\n\n`fallback` provides content to display when an error occurs.\nIf a function is passed, it receives two parameters:\n\n- `err`: The caught error object.\n- `reset`: A function that forces the `\u003cErrorBoundary\u003e` to re-render its children and clear the error state.\n\nIf there's an error within the `fallback` itself, however, it is not caught by the same `\u003cErrorBoundary\u003e`.\nInstead, it will bubble up to any parent error boundaries.\n\n## Example\n\n```tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { ErrorProne } from \"./components\";\n\nfunction Example() {\n\treturn (\n\t\t\u003cErrorBoundary\n\t\t\tfallback={(error, reset) =\u003e (\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\u003cp\u003e{error.message}\u003c/p\u003e\n\t\t\t\t\t\u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t)}\n\t\t\u003e\n\t\t\t\u003cErrorProne /\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```",
  "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/error-boundary.mdx",
  "metadata": {
    "path": "/tmp/devour-github-216944658/src/routes/reference/components/error-boundary.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1893,
    "source_type": "github"
  },
  "hash": "c2d6abfbcb74d3016517b1971629a15d8f79e191c854bc755c03d90c4d59a2e6",
  "timestamp": "2026-02-23T11:39:22.439255256+01:00"
}