mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
2.7 KiB
JSON
17 lines
2.7 KiB
JSON
{
|
|
"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"
|
|
} |