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

时间:2018-08-29 06:53:02

标签: vue.js error-handling vuejs2

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

假设您有很多服务方法,并且这些方法应该一个接一个地运行(我的意思是彼此内部),那么在prevoius服务中编写then并catch方法非常丑陋且不干净,现在我正在寻找干净的方法实施这种方式。我希望你明白我的意思。

2 个答案:

答案 0 :(得分:9)

正如@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函数抛出异常),我们需要监听unhandledrejection事件,因为window.onerror机制未捕获承诺拒绝(感谢@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问题:Catch all unhandled javascript promise rejections

答案 1 :(得分:1)

我希望我理解您的问题对,但是这可能正是您要寻找的。

  

errorCaptured

     

类型:(错误:错误,虚拟机:组件,信息:字符串)=>?布尔值

     

详细信息:当任何后代组件出现错误时调用   被抓获。钩子接收三个参数:错误,组件   触发错误的实例,以及包含信息的字符串   关于捕获错误的位置。钩子可以返回false来停止   错误进一步传播。

Here is more in-Depth Info About it. 小心其Vue 2.5.0 +