{"id":48186823,"url":"https://github.com/x-orpheus/catch-react-error","last_synced_at":"2026-04-04T17:50:34.983Z","repository":{"id":38010710,"uuid":"228552972","full_name":"x-orpheus/catch-react-error","owner":"x-orpheus","description":"A framework using React Boundary handles error easily","archived":false,"fork":false,"pushed_at":"2023-01-05T03:11:01.000Z","size":2632,"stargazers_count":44,"open_issues_count":33,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-02T19:41:19.816Z","etag":null,"topics":["error","errorboundary","react"],"latest_commit_sha":null,"homepage":"","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/x-orpheus.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-17T06:55:57.000Z","updated_at":"2025-03-14T02:27:45.000Z","dependencies_parsed_at":"2023-02-03T08:02:45.343Z","dependency_job_id":null,"html_url":"https://github.com/x-orpheus/catch-react-error","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/x-orpheus/catch-react-error","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-orpheus%2Fcatch-react-error","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-orpheus%2Fcatch-react-error/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-orpheus%2Fcatch-react-error/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-orpheus%2Fcatch-react-error/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/x-orpheus","download_url":"https://codeload.github.com/x-orpheus/catch-react-error/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-orpheus%2Fcatch-react-error/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","errorboundary","react"],"created_at":"2026-04-04T17:50:32.448Z","updated_at":"2026-04-04T17:50:34.960Z","avatar_url":"https://github.com/x-orpheus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# catch-react-error\n\n[![npm](https://img.shields.io/npm/v/catch-react-error?style=flat-square)](https://www.npmjs.com/package/catch-react-error)\n[![Build Status](https://travis-ci.org/x-orpheus/catch-react-error.svg?branch=master)](https://travis-ci.org/x-orpheus/catch-react-error)\n[![codecov](https://img.shields.io/codecov/c/gh/x-orpheus/catch-react-error?style=flat-square\u0026logo=codecov)](https://codecov.io/gh/x-orpheus/catch-react-error)\n\n[English](./README.md) | 简体中文\n\n[catch-react-error 由来的故事](./doc/catch-react-error.md)\n\n## 简介\n\n对于 React 生命周期中发生的错误，只需要使用 `ErrorBoundary` 组件包裹可能出现异常的组件即可。\n\n但是这种方案只适用于客户端渲染，然而对于服务端渲染出现的错误，却完全无能为力；现在大型的项目无不采用服务端渲染的方式，所以需要找到一个简单易用的能够应用于**同构应用**的 React 错误处理方案。\n\n`catch-react-error` 正是来解决这个问题的，`catch-react-error` 在客户端渲染的时候正常使用`ErrorBoundary` 包裹组件；在服务端渲染的时候，使用 `try-catch` 包裹 `render` 函数, 这样则可以在同构应用中完美的处理 React 生命周期中发生的错误。\n\n## Demo\n\n\u003cdiv style=\"text-align:center\" align=\"center\"\u003e\n  \u003cimg src=\"https://p1.music.126.net/6tHW45dHH_qKtCw0rrkJOg==/109951164571395030.gif\" /\u003e\n\u003c/div\u003e\n\n### client side render\n\n```sh\ncd example-client\nnpm run dev\n```\n\n### server side render\n\n```sh\ncd example-server\nnpm run dev\n```\n\n## How to use\n\n### 1.安装 catch-react-error\n\n```sh\nnpm  install catch-react-error --save\n```\n\n### 2.安装 ES7 Decorator babel plugin\n\n我们采用 ES7 的 `Decorator` 语法来让代码更简洁，当然也可以采用函数式的写法\n\n```sh\nnpm install --save-dev @babel/plugin-proposal-decorators\nnpm install --save-dev @babel/plugin-proposal-class-properties\n\n```\n\n添加 babel plugin\n\n```json\n{\n  \"plugins\": [\n    [\"@babel/plugin-proposal-decorators\", { \"legacy\": true }],\n    [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }]\n  ]\n}\n```\n\n### 3.导入 catch-react-error\n\n```jsx\nimport catchreacterror from \"catch-react-error\";\n```\n\n### 4.使用@catchreacterror decorator\n\n```jsx\n@catchreacterror()\nclass Count extends React.Component {\n  render() {\n    const { count } = this.props;\n    if (count === 3) {\n      throw new Error(\"count is three\");\n    }\n    return \u003ch1\u003e{count}\u003c/h1\u003e;\n  }\n}\n```\n\n`catchreacterror` 本质上是一个柯里化的函数，函数签名为：\n\n```\ncatchreacterror :: ErrorBoundary -\u003e Function -\u003e Component\n```\n\n`catchreacterror` 函数接受一个参数: ErrorBoundary (默认采用`DefaultErrorBoundary`),返回一个 High-Order-Function。\n\n其原理为：客户端渲染会用 React 16 的[Error Boundary](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)的相关函数来处理错误，服务端用`try catch`来捕获 render 的错误。\n\n### 5.使用@catchreacterror 处理 FunctionComponent\n\n上面是对于 `ClassComponent` 做的处理，但是有些人喜欢用函数组件，这里也提供使用方法,如下。\n\n```js\n// 如果没有使用 catchreacterror 包裹 Content 组件，\n// 则在 count 为 3 的情况下则必然报错，导致程序崩溃\nfunction Count({ count }) {\n  if (count === 3) {\n    throw new Error(\"count is three\");\n  }\n  return \u003ch1\u003e{count}\u003c/h1\u003e;\n}\n\n// 被 catchreacterror 包裹之后会 catch 住错误，\n// 仅仅导致当前组件被销毁，其他内容正常展示\nconst SaleCount = catchreacterror()(Count);\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n            \n      \u003cSaleCount count={3} /\u003e\n      \u003cbutton\u003eI'm OK, click me !\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 6.如何编写 CustomErrorBoundary\n\n拷贝下面 React 提供的事例，可以添加日志，自定义 fallback 内容\n\n```js\nclass CustomErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    logErrorToMyService(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return \u003ch1\u003eSomething went wrong.\u003c/h1\u003e;\n    }\n  }\n\n    return this.props.children;\n  }\n}\n```\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-orpheus%2Fcatch-react-error","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fx-orpheus%2Fcatch-react-error","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-orpheus%2Fcatch-react-error/lists"}