废话不多说了，直接上代码。

方法一：errorHandler

这是 Vue 中最广泛使用的异常处理方式。

用法：

Vue.config.errorHandler = function(err, vm, info) {
 console.log(`Error: ${err.toString()}\\nInfo: ${info}`);
};

err指代 error 对象，info是一个 Vue 特有的字符串，vm指代 Vue 应用本身。记住在一个页面你可以有多个 Vue 应用。这个 error handler 作用到所有的应用。

方法二：warnHandler

warnHandler用来捕获 Vue warning。记住在生产环境是不起作用的。也就是说需要把productionTip设置为false时候才能生效。

用法：

Vue.config.productionTip = false;
Vue.config.warnHandler = function(msg, vm, trace) {
 console.log(`Warn: ${msg}\\nTrace: ${trace}`);
};

msg和vm都容易理解，trace代表了组件树。

方法三：renderError

和前面两个不同，这个技巧不适用于全局，和组件相关。并且只适用于非生产环境。也就是说需要把productionTip设置为false时候才能生效。

用法：

Vue.config.productionTip = false;
const app = new Vue({
 el: "#app",
 renderError(h, err) {
 return h("pre", { style: { color: "red" } }, err.stack);
 }
});

方法四：errorCaptured

errorCaptured是最后一个和 Vue 相关的技巧，这个技巧让我很迷惑，现在还是有点搞不明白。文档是这么介绍的：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

基于我的一些分析，这个 error Handler 只能在父组件中处理子组件的错误。据我所知，我们没法直接在 Vue 的主实例(main instance)中使用它。

为了测试，我构造了下面的例子：

Vue.component("cat", { template: `
Cat: 
 <slot>
`, props: { name: { required: true, type: String } }, errorCaptured(err, vm, info) { console.log(`cat EC: ${err.toString()}\\ninfo: ${info}`); return false; }});Vue.component("kitten", { template: "
Kitten: {{ dontexist() }}
",
 props: { 

 name: {
 required: true,
 type: String
 }
 }
});

注意 kitten 组件里的dontexist是没定义的

  <kitten> 

捕获到的信息如下:

cat EC: TypeError: dontexist is not a function
info: render

errorCaptured是个很有趣的特性，我想那些构建组件库的开发者应该会用到吧。这个特性更像是面向组件开发者而不是一般开发者。

方法五：window.onerror

最后也是最重要的一个候选项 window.onerror。它是一个全局的异常处理函数，可以抓取所有的 JavaScript 异常。

用法：

window.onerror = function(message, source, lineno, colno, error) {
// message：错误信息（字符串）。
// source：发生错误的脚本URL（字符串）
// lineno：发生错误的行号（数字）
// colno：发生错误的列号（数字）
// error：Error对象（对象） 

console.log('捕获到异常：',{message, source, lineno, colno, error});
}
test();

总结

今天主要介绍了五种捕获异常的方法，当然也可能不全，大伙也可以自己学习研究研究，有更好的做法可以私信或者评论里留言，跟我们一起分享分享。

閱讀更多 滬漂程序員的生活史 的文章

關鍵字: 废话 JavaScript 虚拟机