Vue 错误处理

?转载自 Fundebug：https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/

总的来说，Vue 中异常处理包含以下几个方面：

• errorHandler
• warnHandler
• renderError
• errorCaptured
• window.onerror (不仅仅针对 Vue)

errorHandler

Vue.config.errorHandler = function(err, vm, info) {};

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

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

第一种错误不会触发 errorHandler，它只是一个 warning。

第二种错误会抛出错误被 errorHandler 捕获：

Error: ReferenceError: x is not defined
Info: render

第三种错误也会被捕获：

Error: ReferenceError: x is not defined
Info: v-on handler

warnHandler

warnHandler用来捕获 Vue warning。在生产环境是不起作用的。

Vue.config.warnHandler = function(msg, vm, trace) {};

msg 和 vm 都容易理解，trace 代表了组件树。请看下面的例子：

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

第一个错误被 warnHandler 捕获：

Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Trace:

(found in <Root>)

renderError

和前面两个不同，renderError 不适用于全局，和组件相关，并且只适用于非生产环境。

下面是一个简单的例子：

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

只是一个 warning。

errorCaptured

对于 errorCaptured ，文档是这么介绍的：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

window.onerror

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

window.onerror = function(message, source, line, column, error) {};

函数参数中的 source 代表当前的 URL。

如果你定义了onerror，但是没有启用 Vue.config.errorHandler，那么有很多异常都抓不到。Vue 希望你定义它，否则异常不会抛出去的。如果定义 errorHandler 的代码有 BUG，那么运行起来也不会被 onerror 抓到。