处理vue异常的方式

errorHandler

1
2
3

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

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

warnHandler

// msg和vm都容易理解，trace代表了组件树。
Vue.config.productionTip = false;
Vue.config.warnHandler = function(msg, vm, trace) {
 console.log(`Warn: ${msg}\nTrace: ${trace}`);
};

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

renderError

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

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

window.onerror

window.onerror = function(message, source, lineno, colno, error) {
// message：错误信息（字符串）。
// source：发生错误的脚本URL（字符串）
// lineno：发生错误的行号（数字）
// colno：发生错误的列号（数字）
// error：Error对象（对象）
console.log('捕获到异常：',{message, source, lineno, colno, error});
}