{"id":15823275,"url":"https://github.com/joschuaschneider/use-error-boundary","last_synced_at":"2025-04-04T14:06:23.229Z","repository":{"id":34894889,"uuid":"187795542","full_name":"JoschuaSchneider/use-error-boundary","owner":"JoschuaSchneider","description":"React hook for using error boundaries in your functional components","archived":false,"fork":false,"pushed_at":"2023-03-04T03:46:32.000Z","size":985,"stargazers_count":214,"open_issues_count":5,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-06T08:06:52.435Z","etag":null,"topics":["error-boundary","javascript","npm","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-error-boundary","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoschuaSchneider.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-21T08:32:46.000Z","updated_at":"2024-07-02T07:01:34.000Z","dependencies_parsed_at":"2024-06-18T13:59:35.622Z","dependency_job_id":"ead04436-8657-4206-87db-c8452a5c6d4b","html_url":"https://github.com/JoschuaSchneider/use-error-boundary","commit_stats":{"total_commits":81,"total_committers":7,"mean_commits":"11.571428571428571","dds":0.3580246913580247,"last_synced_commit":"b2aa8124940859eab63490e2bc5ea3eb0e4ccaf1"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoschuaSchneider%2Fuse-error-boundary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoschuaSchneider%2Fuse-error-boundary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoschuaSchneider%2Fuse-error-boundary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoschuaSchneider%2Fuse-error-boundary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoschuaSchneider","download_url":"https://codeload.github.com/JoschuaSchneider/use-error-boundary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["error-boundary","javascript","npm","react","react-hooks","typescript"],"created_at":"2024-10-05T08:07:29.149Z","updated_at":"2025-04-04T14:06:23.211Z","avatar_url":"https://github.com/JoschuaSchneider.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-error-boundary\n\n[![npm version](https://img.shields.io/npm/v/use-error-boundary.svg)](https://www.npmjs.com/package/use-error-boundary)\n![TypeScript](https://badgen.net/badge/-/TypeScript/blue?icon=typescript\u0026label)\n![build workflow](https://github.com/JoschuaSchneider/use-error-boundary/actions/workflows/build.yml/badge.svg?branch=master)\n![test workflow](https://github.com/JoschuaSchneider/use-error-boundary/actions/workflows/test.yml/badge.svg?branch=master)\n![license](https://img.shields.io/npm/l/use-error-boundary.svg)\n\nA **react hook** for using error boundaries in your functional components.\n\nIt lets you keep track of the error state of child components, by wrapping them in the provided `ErrorBoundary` component.\n\n:warning: Read more about error boundaries and their intended use in the [React documentation](https://reactjs.org/docs/error-boundaries.html), this will only catch errors during the render phase!\n\n### Installation\n\n```bash\nnpm i use-error-boundary\n```\n\n```bash\nyarn add use-error-boundary\n```\n\n### Breaking changes in `2.x`\n\nWhile upgrading from version `1.x` make sure you are not using the `errorInfo` object.\nThe hook and the `renderError` callback no longer provide this object.\n\nFor advanced use, please refer to [Custom handling of error and errorInfo](#handling-error-and-errorinfo-outside-of-markup).\n\n## Examples and usage\n\nImport the hook:\n\n```javascript\n// Named\nimport { useErrorBoundary } from \"use-error-boundary\"\n// Default\nimport useErrorBoundary from \"use-error-boundary\"\n```\n\nLearn more about the [properties that are returned](#returned-properties).\n\n```javascript\nconst MyComponent = () =\u003e {\n\n  const {\n    ErrorBoundary,\n    didCatch,\n    error,\n    reset\n  } = useErrorBoundary()\n\n  //...\n\n}\n```\n\n### Usage without render props\n\nWrap your components in the provided `ErrorBoundary`.\nWhen it catches an error the hook provides you the changed error-state and the boundary Component will render nothing.\nYou have to handle rendering some error display yourself.\n\nYou can get the ErrorBoundary component to render your custom error display by [using the `renderError` render-prop.](#use-with-render-props)\n\n```javascript\nconst JustRenderMe = () =\u003e {\n  throw new Error(\"💥\")\n}\n\nconst MyComponent = () =\u003e {\n  const { ErrorBoundary, didCatch, error } = useErrorBoundary()\n\n  return (\n    \u003c\u003e\n      {didCatch ? (\n        \u003cp\u003eAn error has been caught: {error.message}\u003c/p\u003e\n      ) : (\n        \u003cErrorBoundary\u003e\n          \u003cJustRenderMe /\u003e\n        \u003c/ErrorBoundary\u003e\n      )}\n    \u003c/\u003e\n  )\n}\n```\n\n### Usage with render props\n\nOptionally, you can pass a `render` and `renderError` function to render your UI and error-state inside the boundary.\n\n```javascript\n/**\n * The renderError function also passes the error, so that you can display it using\n * render props.\n */\nreturn (\n  \u003cErrorBoundary\n    render={() =\u003e \u003cSomeChild /\u003e}\n    renderError={({ error }) =\u003e \u003cMyErrorComponent error={error} /\u003e}\n  /\u003e\n)\n```\n\n## Handling `error` and `errorInfo` outside of markup\n\nThe hook now accepts an `options` object that you can pass a `onDidCatch` callback that gets called when the ErrorBoundary catches an error. Use this for logging or reporting of errors.\n\n```js\nuseErrorBoundary({\n  onDidCatch: (error, errorInfo) =\u003e {\n    // For logging/reporting\n  },\n})\n```\n\n## Returned Properties\n\nThese are the properties of the returned Object:\n\n### `ErrorBoundary`\n`Type: React Component`\n\n\nSpecial error boundary component that provides state changes to the hook.\n\n:warning: **You need to use this as the error boundary! Otherwise, the state will not update when errors are caught!**\n\nThe ErrorBoundary is **guaranteed referential equality** across rerenders and only updates after a reset.\n\n### `didCatch`\n`Type: boolean`\n\nThe error state, `true` if an error has ben caught.\n\n\n### `error`\n`Type: any | null`\n\nThe error caught by the boundary, or `null`.\n\n### `reset`\n`Type: function`\n\nFunction the reset the error state.\nForces react to recreate the boundary by creating a new ErrorBoundary\n\nYour boundary can now catch errors again.\n\nIf you are searching for the `errorInfo` property, please read [Breaking Changes in 2.x](#breaking-changes-in-2x).\n\n## Why should I use this hook?\n\nReact does not provide a way to catch errors within the same functional component and you have to handle that in a class Component with special lifecycle methods.\n\nIf you are new to ErrorBoundaries, building this yourself is a good way to get started!\n\nThis packages purpose is to provide an easy drop in replacement for projects that are being migrated to hooks.\n\nThis also pulls the error presentation out of the error boundary, and on the same level you are handling errors.\n\n## Contributing\n\nContributions are always welcome.\n\nFeel free to open issues or pull requests!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoschuaschneider%2Fuse-error-boundary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoschuaschneider%2Fuse-error-boundary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoschuaschneider%2Fuse-error-boundary/lists"}