{"id":16171383,"url":"https://github.com/maniator/react-badly","last_synced_at":"2025-03-19T00:30:40.649Z","repository":{"id":37095713,"uuid":"117121548","full_name":"maniator/react-badly","owner":"maniator","description":"Error boundary react component","archived":false,"fork":false,"pushed_at":"2024-04-08T10:48:48.000Z","size":4290,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T07:33:58.412Z","etag":null,"topics":["catch","error-boundaries","react","react-16","tree"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-badly","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maniator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["maniator"],"patreon":null,"open_collective":"serveside","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-01-11T16:06:23.000Z","updated_at":"2024-04-15T12:08:21.650Z","dependencies_parsed_at":"2023-02-10T22:10:25.320Z","dependency_job_id":"fe2d18fc-46e6-43fd-b32b-26eb31630e18","html_url":"https://github.com/maniator/react-badly","commit_stats":null,"previous_names":["serveside/react-badly"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maniator%2Freact-badly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maniator%2Freact-badly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maniator%2Freact-badly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maniator%2Freact-badly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maniator","download_url":"https://codeload.github.com/maniator/react-badly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244331596,"owners_count":20435964,"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":["catch","error-boundaries","react","react-16","tree"],"created_at":"2024-10-10T03:21:57.965Z","updated_at":"2025-03-19T00:30:40.331Z","avatar_url":"https://github.com/maniator.png","language":"JavaScript","funding_links":["https://github.com/sponsors/maniator","https://opencollective.com/serveside"],"categories":[],"sub_categories":[],"readme":"# react-badly\n\nTake hold of your react lifecycle hooks with `react-badly`\n\n[![npm version](https://badge.fury.io/js/react-badly.svg)](https://www.npmjs.com/package/react-badly)\n\nYou can install off of npm with\n\n```shell\nnpm install react-badly\n\n# or yarn\n\nyarn add react-badly\n```\n\nThis component is a wrapper for any of your React 16+ plus components that may have an error in them.\n\n\n### How to use\n\nThe simplest way is to just wrap any component that you think may error with `ReactBadly`\n\nThis will prevent the component from rendering (also will stop any children in the tree as well).\nThis is to make sure that your **whole** component tree does not dismount as React 16+ does.\n\n```jsx harmony\nimport ReactBadly from 'react-badly';\n\n\n// some code later on\n\n\u003cReactBadly\u003e\n  \u003cSomeComponentThatMayHaveAnError\u003e\n    ...\n  \u003c/SomeComponentThatMayHaveAnError\u003e\n\u003c/ReactBadly\u003e\n```\n\nIf you want to handle your error with some functionality (like sending to analytics etc) you can pass an `onError` \nproperty which will get the error and any info as parameters from react.\n\n```jsx harmony\nimport ReactBadly from 'react-badly';\n\nconst errorFunction = (error, info) =\u003e {\n  // can handle the error here and do what you will with it\n};\n\n// some code later on\n\n\u003cReactBadly onError={errorFunction}\u003e\n  \u003cSomeComponentThatMayHaveAnError\u003e\n    ...\n  \u003c/SomeComponentThatMayHaveAnError\u003e\n\u003c/ReactBadly\u003e\n```\n\nThere may also be some cases where you actually want to render something else to display if there was an error instead \nof just not displaying anything. To do that you can pass the `render` property which will accept a function that will \ntake in `{ error, info }` as a parameter. This will render **instead** of the direct child of `ReactBadly`.\n\n```jsx harmony\nimport ReactBadly from 'react-badly';\n\nconst renderError = ({ error, info }) =\u003e (\n  \u003cReact.Fragment\u003e\n      \u003ch2\u003eYou have an error!\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(error)}'\\n'{JSON.stringify(info)}\u003c/pre\u003e\n  \u003c/React.Fragment\u003e\n);\n\n// some code later on\n\n\u003cReactBadly render={renderError}\u003e\n  \u003cSomeComponentThatMayHaveAnError\u003e\n    ...\n  \u003c/SomeComponentThatMayHaveAnError\u003e\n\u003c/ReactBadly\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaniator%2Freact-badly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaniator%2Freact-badly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaniator%2Freact-badly/lists"}