5种处理Vue异常的方法

• 原文: Handling Errors in Vue.js
• 译者: Fundebug

本文采用意译，版权归原做者全部

去年一全年，我都在使用最爱的—Vue.js— 来作项目。最近忽然意识到，我居然历来没有认真去处理异常。我能够自恋地说："我写的代码是完美的，没有BUG。" 我相信你们都明白这是迷之自信。最近，我花了很多时间研究了Vue中处理异常的各类技巧，在此想把我学到的分享给你们。

错误大全

为了测试各类异常处理技巧，我故意触发三种类型的错误。

1. 第一种：引用一个不能存在的变量：

<div id="app" v-cloak>
  Hello, {{name}}
</div>

上述代码运行后不会抛出错误，可是在控制台会有[Vue warn]消息。

你能够在Codepen查看例子完整代码。

1. 第二种：将变量绑定到一个被计算出来的属性，计算的时候会抛出异常。

<div id="app" v-cloak>
  Hello, {{name2}}
</div>

<script>
const app = new Vue({
  el:'#app',
  computed:{
    name2() {
      return x;
    }
  }
})
</script>

运行上述代码会在控制台抛出一个[Vue warn]和一个常规的错误，网页白屏。

你能够在Codepen查看例子完整代码。

1. 第三种：执行一个会抛出异常的方法

<div id="app" v-cloak>
    <button @click="doIt">Do It</button>
</div>

<script>
const app = new Vue({
  el:'#app',
  methods:{
      doIt() {
          return x;
      }
  }
})
</script>

这个错误在控制台也[Vue warn]和常规报错。和上一个错误的区别在于，只有你点击了按钮才会触发函数调用，才会报错。

你能够在Codepen查看例子完整代码。

在继续以前，我想声明上面3个例子并不表明全部类型的错误。这3种是比较常见的错误。

好了，咱们该怎么处理异常呢？我很惊讶在Vue的文档中居然没有介绍异常处理的章节。

是的，文档中是有一个，可是介绍极其简短。

若是在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (若是已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。好比 Sentry，它为 Vue 提供了 官方集成。

P.S. 国产BUG监控服务Fundebug也为Vue提供了官方集成。

我我的建议官方应该有详细的介绍。总的来讲，Vue中异常处理包含如下几个方面的技巧：

• errorHandler
• warnHandler
• renderError
• errorCaptured
• window.onerror (不只仅针对Vue)

技巧1：errorHandler

咱们要学习的第一个技巧是errorHandler。你也许知道，这是Vue中最普遍使用的异常处理方式。

Vue.config.errorHandler = function(err, vm, info) {

}

err指代error对象，info是一个Vue特有的字符串，vm指代Vue应用自己。记住在一个页面你能够有多个Vue应用。这个error handler做用到全部的应用。

Vue.config.errorHandler = function(err, vm, info) {
  console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}

第一种错误不会触发errorHandler，它只是一个warning。

第二种错误会抛出错误被errorHandler捕获：

Error: ReferenceError: x is not defined
Info: render

第三种错误也会被捕获：

Error: ReferenceError: x is not defined
Info: v-on handler

记住info里面的信息也是很是有用的。

技巧2: warnHandler

warnHandler用来捕获Vue warning。记住在生产环境是不起做用的。

Vue.config.warnHandler = function(msg, vm, trace) {

}

msg和vm都容易理解，trace表明了组件树。请看下面的例子：

Vue.config.warnHandler = function(msg, vm, trace) {
  console.log(`Warn: ${msg}\nTrace: ${trace}`);
}

第一个错误被warnHandler捕获：

Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Trace: 

(found in <Root>)

你能够查看三个例子的实际运行状况:
第一个: 例子1
第二个: 例子2
第三个: 例子3

技巧3: renderError

和前面两个不一样，这个技巧不适用于全局，和组件相关。而且只适用于非生产环境。

下面是一个简单的例子：

const app = new Vue({
  el:'#app',
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
})

第一个例子是没有效果的，由于只是一个warning。第二个例子就会在网页上显示具体的错误信息: 示例代码

老实说，我没以为这个比直接看控制台好多少。可是，若是大家的QA团队或则测试对浏览器控制台不熟悉的话，这个仍是蛮有用的。

技巧4: errorCaptured

errorCaptured是最后一个和Vue相关的技巧，这个技巧让我很迷惑，如今仍是有点搞不明白。文档是这么介绍的：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。

基于个人一些分析，这个error Handler只能在父组件中处理子组件的错误。据我所知，咱们无法直接在Vue的主实例(main instance)中使用它。

为了测试，我构造了下面的例子：

Vue.component('cat', {
  template:`
<div><h1>Cat: </h1>
  <slot></slot>
</div>`,
  props:{
    name:{
      required:true,
      type:String
    }
  },
   errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
     return false;
  }

});

Vue.component('kitten', {
  template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
  props:{
    name:{
      required:true,
      type:String
    }
  }
});

注意 kitten 组件的代码是有BUG的。

<div id="app" v-cloak>
  <cat name="my cat">
      <kitten></kitten>
  </cat>
</div>

捕获的信息以下:

cat EC: TypeError: dontexist is not a function
info: render

下面是运行实例。

errorCaptured是个颇有趣的特性，我想哪些构建组件库的开发者应该会用到吧。这个特性更像是一个面向组件开发者而不是通常开发者。

终极技巧: window.onerror

最后也是最重要的一个候选项 window.onerror。它是一个全局的异常处理函数，能够抓取全部的JavaScript异常。

window.onerror = function(message, source, line, column, error) {

}

我想函数的参数中只有source难以从字面上理解吧，它表明了当前的URL。

接下来事情就比较好玩了。若是你定义了onerror，可是没有启用Vue.config.errorHandler，那么有不少异常都抓不到。Vue但愿你要定义它，不然异常不会抛出去的。这到底有没有意义？我不是很懂，我以为不必，甚至有点奇怪。

若是定义errorHandler的代码有BUG，那么运行起来也不会被onerror抓到。下面的例子中，若是将oopsIDidItAgain()解注释，你就会发现这个问题。只有第二个按钮没有和Vue绑定，因此报错不管如何都会被抓到。运行实例

总结

正如开篇提到，这是我第一次写关于这个主题的文章。我也但愿从你们得到反馈，包括评论、建议以及修订意见。我但愿你们能够分享本身如何使用的具体事例。

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、荔枝FM、掌门1对一、核桃编程、微脉等众多品牌企业。欢迎免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址：

https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs