处理异常的意义
随着网页项目越来越复杂,许多异常报错很难在开发和测试阶段被发现,尽管你可能避开了语法等常规错误,但不可避免的是代码在运行时的错误你仍旧无法准确预料,假设现在有如下一段 Vue
代码,它在生命周期的 created
阶段异步请求并接收了错误的数据,可能就会导致页面渲染出现错误:
<template>{
{ test.obj.xxx }}
</template>
......
created() {this.getSomeData()
},
methods: {getSomeData() {this.fetch().then((res) => {this.test = res // 假设这是请求的错误数据})},
}
而如果测试人员及时发现了这一错误的话,当他打开控制台时往往就会立即下结论了:噢,是前端的锅🙂
![](https://i-blog.csdnimg.cn/blog_migrate/81f2ba49ee2d2b430382fb4c9ff5d249.webp?x-image-process=image/format,png)
事实上真正的项目中可能会遇到更多"奇妙"的问题,而且如果错误仅发生在某些用户端,那将无从察觉,于是我们会想到应该在程序中处理捕获运行时错误,将错误上报至服务器,然后分析和改进代码来修复已经发生的错误。
所以该如何应对并处理可能发生的某些错误,成为了前端开发的一门必修课,你当然可以在每个代码片段中重复编写 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)
}
![](https://i-blog.csdnimg.cn/blog_migrate/94fc6a762b61e9851f9fa522e812b1b4.webp?x-image-process=image/format,png)
可以看到异常成功被捕获了,因为我们模拟了一个数据错误导致渲染出错,所以错误发生在