Question

我已经设置Vue，以便拥有一个顶层AppLayout组件，该组件仅包含一个导航菜单组件，路由器视图，并且如果设置了错误数据项，则使用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组件内部的错误。

根据官方文档

为组件呈现函数和观察者期间的未捕获错误分配处理程序。错误和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

所以看来问题出在我尝试测试此问题的方式没有被抓住。

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

2 个答案: