如何在Vue中实施全局错误处理 [英] How to implement global error handling in Vue

问题描述

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

I want to have global error handling in Vue.JS, like the error handling system in Angular 2+. I have tried so much but I could not find a good approach to implement this handling.

假设您有很多服务方法，这些方法应该一个接一个地运行（我的意思是彼此内部），因此在prevoius服务中编写then并catch方法非常丑陋且不干净，现在我正在寻找实现这种方式的干净方法。希望您能理解我的意思。

Imagine you have many service methods and that these methods should run one after the other (I mean inside each other) so writing then and catch method inside the prevoius service is so ugly and unclean and now I'm looking for clean way to implement such way. I hope you understand what I mean.

推荐答案

正如@Badgy提到的那样，您可以安装Vue错误处理程序来捕获Vue遇到的错误。可以执行以下操作：

As @Badgy mentioned you can install a Vue error handler to catch errors Vue encounters. This can be done as follows:

 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应用=新的Vue（{...}）; 代码之前。因为它是全局Vue错误处理程序，所以它将处理所有Vue实例以及Vue组件中的错误。我发现实际上，它主要捕获在vue渲染方法中发生的错误。

The above code can be located anywhere you like in your javascript. I locate the code just before I create my vue instance. i.e before my var app = new Vue({...}); code. Because it's a global vue error handler it will handle errors from all instances of vue as well as vue components. I find that in practice it mostly catches errors that occur in the vue render methods.

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

You can read more about it in the official docs here: https://vuejs.org/v2/api/#errorHandler

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

For more general (non vue related) javascript errors you still need a global error handler like so:

 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

Again, this code can be placed anywhere javascript is allowed but typically you will want to place it to run early in your javascript stack. You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

最后，捕获承诺拒绝（即抛出异常）来自Promise函数），我们需要监听 unhandledrejection 事件，因为Promise拒绝没有被 window.onerror 捕获机制（感谢@Blauhirn的提示）。在某些浏览器（当前为Chrome和Edge）中，可以使用以下方法来拒绝承诺：

And finally, to catch a "Promise rejection" (i.e. an exception throw from a Promise function) we need to listen for unhandledrejection events since a Promise rejection is not caught by the window.onerror mechanism (thanks to @Blauhirn for the tip). In some browsers (Chrome and Edge currently) Promise rejections can be caught with the following approach:

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

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

For more info see this StackOverflow question: Catch all unhandled javascript promise rejections

这篇关于如何在Vue中实施全局错误处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！