Vue项目处理错误上报原来如此简单

处理异常的意义

随着网页项目越来越复杂，许多异常报错很难在开发和测试阶段被发现，尽管你可能避开了语法等常规错误，但不可避免的是代码在运行时的错误你仍旧无法准确预料，假设现在有如下一段 Vue 代码，它在生命周期的 created 阶段异步请求并接收了错误的数据，可能就会导致页面渲染出现错误：

<template>{
  
  { test.obj.xxx }}
</template>
......
created() {this.getSomeData()
},
methods: {getSomeData() {this.fetch().then((res) => {this.test = res // 假设这是请求的错误数据})},
} 

而如果测试人员及时发现了这一错误的话，当他打开控制台时往往就会立即下结论了：噢，是前端的锅🙂

事实上真正的项目中可能会遇到更多"奇妙"的问题，而且如果错误仅发生在某些用户端，那将无从察觉，于是我们会想到应该在程序中处理捕获运行时错误，将错误上报至服务器，然后分析和改进代码来修复已经发生的错误。

所以该如何应对并处理可能发生的某些错误，成为了前端开发的一门必修课，你当然可以在每个代码片段中重复编写 try...catch...、为每个 Promise 都处理 catch，但这不免显得有些狼狈，于是我思考能不能用更优雅的方式，统一处理所有异常，将错误在全局进行捕获然后上报分析。其实在 Vue 中实现这样全局的异常处理并不难，下面看看我是如何做的吧。

如何全局捕获错误异常

查询 Vue 文档我们可以发现全局配置中就有这么一个捕获错误的处理钩子 errorHandler，用法很简单：

Vue.config.errorHandler = function (err, vm, info) {// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 
} 

只需要用这个钩子就可以处理大部分 Vue 应用中的错误（如组件生命周期中的错误、自定义事件处理函数内部错误、v-on DOM 监听器内部抛出的错误），并且回调中自带的 info 参数也标记了这个错误大概是属于哪类，同时它还能处理返回 Promise 链的错误，可以说是非常强大了，但是它也并非能处理所有的异常，否则文章写到这就该结束了 ~ 接下来我们测试一下。

首先在全局错误捕获中输出一下 log，先运行一下开头的请求数据错误例子：

Vue.config.errorHandler = function (err, vm, info) {console.log('vue异常错误捕获: ', '错误发生在 ' + info)
} 

可以看到异常成功被捕获了，因为我们模拟了一个数据错误导致渲染出错，所以错误发生在 render 层，如果是在函数中的 Promise 发生的错误呢？我们