如何在Vue中实施全局错误处理

Question

我想在Vue.JS中具有全局错误处理，例如Angular 2+中的错误处理系统。我已经做了很多尝试，但是找不到实现这种处理的好方法。

想象一下，您有很多服务方法，这些方法应该一个接一个地运行（我是说彼此内部），因此在prevoius服务中编写然后catch方法的方法是如此丑陋且不干净，现在我正在寻找实现此类的干净方法道路。我希望你明白我的意思。

Answer 1

正如@Badgy提到的，您可以安装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+
 }

上面的代码可以位于javascript中您喜欢的任何位置。我在创建vue实例之前找到了代码。即在我的var app = new Vue({...});代码之前。因为它是全局vue错误处理程序，所以它将处理来自所有vue实例以及vue组件的错误。我发现实际上，它主要捕获在vue渲染方法中发生的错误。

您可以在以下官方文档中阅读有关此内容的更多信息：https : //vuejs.org/v2/api/#errorHandler

对于更一般（与vue不相关）的javascript错误，您仍然需要像这样的全局错误处理程序：

 window.onerror = function (msg, url, line, col, error) {
     //code to handle or report error goes here
 }

同样，此代码可以放置在允许javascript的任何位置，但是通常您希望将其放置在javascript堆栈的早期运行。您可以在此处阅读有关此内容的更多信息：https : //developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

最后，要捕获“ Promise拒绝”（即Promise函数的异常抛出），我们需要监听unhandledrejection事件，因为该window.onerror机制未捕获Promise拒绝（感谢@Blauhirn）。在某些浏览器（当前为Chrome和Edge）中，可以通过以下方法来捕获Promise拒绝：

 window.addEventListener('unhandledrejection', function(event) {
     //handle error here
     //event.promise contains the promise object
     //event.reason contains the reason for the rejection
 });

有关更多信息，请参见以下StackOverflow问题：捕获所有未处理的JavaScript Promise拒绝

Answer 2

我希望我正确理解你的问题，但这可能就是你正在寻找的。

错误捕获

类型：(err：错误，vm：组件，信息：字符串) => ?boolean

详细信息：当捕获到来自任何后代组件的错误时调用。该钩子接收三个参数：错误、触发错误的组件实例以及包含捕获错误位置信息的字符串。该钩子可以返回 false 以阻止错误进一步传播。

这里有更多关于它的深入信息。 小心它的 Vue 2.5.0+