就一个很偶然的情况，突然要去写一个错误边界，随手查了下资料，发现写关于 React 错误边界的文章很少。
我突然意识到，需要些一个文章来记录下 React 异常错误边界。
00 背景
React 16+ 提供了 Error Boundaries 错误边界。
部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 React 用户的这个问题，React 16引入了一个 “错误边界(Error Boundaries)” 的新概念。
错误边界是 React 组件，它可以 在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。
注意
错误边界 无法 捕获如下错误:
事件处理 （了解更多）
异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
错误边界自身抛出来的错误 （而不是其子组件）
01 实战
我们先用 create-react-app 搭建一个例子。
npx create-react-app react-error-boundary
cd react-error-boundary
npm start
如果这里 npm start 出错，可以重新安装 node_modules 试试
rm -rf node_modules
sudo cnpm i
还有可能 npm 用国外源太慢，可以用淘宝的 npm 镜像。
npm config set registry https://registry.npm.taobao.org
npm config get registry // 看看镜像设置对了没
OK， npm start 成功之后， localhost:3000 就可以看到 demo 页面了。
新建文件 ErrorBoundary.js
新建文件 ErrorComponent.js
将这两个组件引入在 App.js, 如下，
<ErrorBoundary>
<ErrorComponent />
</ErrorBoundary>
观察到虽然 componentDidCatch 捕获到了错误，但是页面还是中断了。
这是因为 npm start 是在开发模式，开发模式下 Error Boundary 还是会直接报错。
可以进入 production 模式看下效果，
npm run build
sudo cnpm i serve -g
serve -s build
可以看到父组件捕获到了子组件的错误，并且页面正常显示。
那么我们完全可以在 componentDidCatch 中对错误做上报。
可以在项目的根节点出包含在 <ErrorBoundary />组件里面，子组件的错误都会被捕获到，
如果没有用 ErrorBoundary 用 componentDidCatch 捕获错误，在 window.onerror 也是可以捕获到错误的。用错误边界的唯一好处就是保证页面正常运行。
02 哪些错误不能捕获
（1）事件错误
上面 this.o 不存在，会报错，window.onerror 可以捕获，但是错误边界捕获不到。
（2）异步代码
（3）服务端渲染 和 错误边界自己的错误
总结： React 错误边界还是要深入了解下的，虽然用处不是特别大。
转载于:https://www.jianshu.com/p/3ae9838ed51c