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