错误捕获和上报
错误边界（Error Boundaries）
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。
错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误
1. 错误边界无法捕获以下场景中产生的错误
- 事件处理（了解更多）
- 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
- 服务端渲染
- 它自身抛出来的错误（并非它的子组件）
只有 class 组件才可以成为错误边界组件
window.onerror
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror
window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) {
console.log('errorMessage: ' + errorMessage); // 异常信息
console.log('scriptURI: ' + scriptURI); // 异常文件路径
console.log('lineNo: ' + lineNo); // 异常行号
console.log('columnNo: ' + columnNo); // 异常列号
console.log('error: ' + error); // 异常堆栈信息
};
console.log(a);
MVVM 框架中
在 MVVM 框架中如果你一如既往的想使用 window.onerror 来捕获异常，无法捕获，因为异常信息被框架自身的异常机制捕获了。比如 Vue 2.x 中我们应该这样捕获全局异常：
Vue.config.errorHandler = function (err, vm, info) {
let {
message, // 异常信息
name, // 异常名称
script, // 异常脚本url
line, // 异常行号
column, // 异常列号
stack, // 异常堆栈信息
} = err;
// vm为抛出异常的 Vue 实例
// info为 Vue 特定的错误信息，比如错误所在的生命周期钩子
};