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

Question

我已经设置了Vue，以便我有一个顶级的AppLayout组件，它只包含一个导航菜单组件，路由器视图和，如果设置了错误数据项，它使用v-if可选地显示ErrorDisplay组件。我从Vuex商店中的错误状态变量设置它。

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

在较低的组件中，我有一个提交函数，当我单击提交按钮时，它会被调用。为了测试我已经提出的错误处理

抛出新错误（'无法提交'）;

在我的Main.js中我有

window.onerror，window.addEventListener，Vue.config.errorhandler，Vue.config.warn处理程序的处理程序

所有这些都应该只调用errHandler函数，该函数只调用一个动作来更新状态中的错误变量。希望这将导致ErrorDisplay组件显示在我的顶级组件上。

但是，我将console.log语句作为所有上述处理程序和我的errHandler函数中的第一个语句。这些console.log都没有被执行。

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

所以它从我的throw获取文本，但没有一个错误处理程序似乎捕获这个？

Answer 1

Vue提供全局配置config.errorHandler以在全局范围内捕获Vue组件内的错误。

根据官方文件

在组件期间为未捕获的错误分配处理程序以呈现函数和观察者。使用错误和Vue实例调用处理程序。

这是它的使用方法：

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

希望这可以帮助！

Answer 2

做了更多的研究，我认为有人可能已经为Vue提出了这个PR on Vue https://github.com/vuejs/vue/pull/5709的错误报告

所以看起来问题是我试图测试它的方式没有被抓住。