Error Boundaries 错误边界

错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展现一个回退的 UI 的 React 组件，而不是整个组件树的异常。错误边界在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误。

这样若是某个组件发生崩溃，会被其直属的异常边界捕获，从而保证剩余的部分依然处于可用状态。一样的咱们也能够在异常边界中添加错误反馈等服务接口以及时反馈生产环境下的异常而且修复他们

优化异常堆栈

新版本的React优化了异常输出，可以更清晰的跟踪到出错的位置。异常日志输出的内容将会比以前的React丰富不少，除了输出JavaScript的异常信息，还会清晰的定位到错误出现的组件：

若是你的项目使用最新版本的 create-react-app 建立的，那么这一项功能已经存在了。若是没使用 Create React App，那么能够经过一个 Babel 的插件添加这个功能：

$ npm install --save-dev babel-plugin-transform-react-jsx-source

而后在对应的配置（.babelrc、webpack的plugins等）中添加：

{
  "plugins": ["transform-react-jsx-source"] }

切记这项功能仅仅用于开发或测试环境，切勿用于生产环境。某些浏览器可能不支持 Function.name  的属性，可能没法正确显示组件名称（例如全部版本的IE）。能够经过使用一些 polyfill 来解决这个问题，好比这个 function-name工具 。

 

Note

Error boundaries do not catch errors for:

• Event handlers (learn more)
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server side rendering
• Errors thrown in the error boundary itself (rather than its children)

Event handlers 事件处理函数触发的错误 Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) 异步代码 Server side rendering 服务端渲染 Errors thrown in the error boundary itself (rather than its children) 本身产生的错误

• 可捕获到的子组件异常
  • constructor 构造函数异常
  • 生命周期异常
  • render 函数异常
• 不能捕获到的异常
  • 事件处理异常
  • 异步任务异常
  • 服务端异常
  • ErrorBoundary 组件自身异常

 https://www.npmjs.com/package/react-error-boundaries