vue.js - Vue JS如何全局捕获错误并将其显示在顶级组件中

Question

我已经设置了Vue，以便有一个顶层AppLayout组件，它仅包含一个导航菜单组件，路由器 View ，并且如果设置了错误数据项，则使用v-if可选地显示ErrorDisplay组件。我是从Vuex存储中的err状态变量设置的。

那就是我想要去的地方。但是，我认为这个问题更为根本。

在下部组件中，我有一个Submit函数，当我单击Submit按钮时会被调用。为了测试错误处理，我已经把

抛出新的错误('无法提交');

在我的Main.js中

window.orerror，window.addEventListner，Vue.config.errorhandler，Vue.config.warnhandler的处理程序

所有这些都应该调用errHandler函数，该函数仅调用操作以更新状态中的err变量。希望这将导致ErrorDisplay组件显示在我的顶级组件上。

但是，在上述所有处理程序和errHandler函数中，我都将console.log语句作为第一条语句。这些console.logs均未执行。

在Chrome的控制台中，我只是看到
[vue警告]:v-on处理程序中的错误:“错误:无法提交”

因此，它是从我的投稿中获取文本的，但是似乎没有错误处理程序能够捕获此消息？

Answer 1

Vue提供了全局配置config.errorHandler来全局捕获Vue组件内部的错误。

根据官方文件

Assign a handler for uncaught errors during component to render function and watchers. The handler gets called with the error and the Vue instance.

这是可以使用的方式:

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
}

官方 docs

希望这可以帮助!