mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
2.9 KiB
JSON
17 lines
2.9 KiB
JSON
{
|
|
"id": "cb9709e630e8dc966bcbd93e",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "error-boundary",
|
|
"content": "---\ntitle: Error boundary\norder: 5\nuse_cases: \u003e-\n error handling, crash prevention, user-friendly errors, app stability, error\n recovery, debugging production issues\ntags:\n - errors\n - boundary\n - handling\n - recovery\n - stability\n - debugging\nversion: '1.0'\ndescription: \u003e-\n Catch and handle rendering errors gracefully with ErrorBoundary. Prevent app\n crashes and provide user-friendly error recovery.\n---\n\nBy 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.\nError boundaries provide a way to catch these errors and prevent the entire app from crashing.\n\nThe [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) component is used to create an error boundary.\nIt catches any error that occurs during the rendering or updating of its children.\nHowever, 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.\n\nThe `fallback` prop can be used to display a user-friendly error message or notification when an error occurs.\nIf a function is passed to `fallback`, it will receive the error object as well as a `reset` function.\nThe `reset` function forces the `\u003cErrorBoundary\u003e` to re-render its children and reset the error state, providing users with a way to recover from the error.\n\n```tsx\nimport { ErrorBoundary } from \"solid-js\";\nimport { Header, ErrorProne } from \"./components\";\n\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cHeader /\u003e\n\t\t\t\u003cErrorBoundary\n\t\t\t\tfallback={(error, reset) =\u003e (\n\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\u003cp\u003eSomething went wrong: {error.message}\u003c/p\u003e\n\t\t\t\t\t\t\u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t)}\n\t\t\t\u003e\n\t\t\t\t\u003cErrorProne /\u003e\n\t\t\t\u003c/ErrorBoundary\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nIn this example, when the `ErrorProne` component throws an error, the `\u003cErrorBoundary\u003e` catches it, preventing it from affecting the rest of the application.\nInstead, it displays the error message passed to the fallback prop.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/error-boundary.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/concepts/control-flow/error-boundary.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2032,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "6671a6596001de921044dc599f7e092f3723d0efa289905d67688ef97448a5d0",
|
|
"timestamp": "2026-02-23T11:43:00.186584233+01:00"
|
|
} |