写点什么

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

  • 2022 年 10 月 06 日
    广东
  • 本文字数:4096 字

    阅读完需:约 13 分钟

处理异常的意义

随着网页项目越来越复杂,许多异常报错很难在开发和测试阶段被发现,尽管你可能避开了语法等常规错误,但不可避免的是代码在运行时的错误你仍旧无法准确预料,假设现在有如下一段 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 发生的错误呢?我们试一下:


async created() {    await this.getSomeData()},method: {    async getSomeData() {      const res = await this.fetch()      this.test = res    },    fetch() {      asdasd = 1 // 这里给一个未定义的变量赋值,肯定会报错      return new Promise((resolve) => {          // ......省略      })    }
复制代码



没有问题,接下来我们再试试一个按钮用 v-on 绑定 click,但是故意在方法内制造错误,看看是什么效果:


<button @click="doSomeThing"> Test </button>..........doSomeThing() {  aaaaaaaa = 111111 // 这里给一个未定义的变量赋值,肯定会报错},
复制代码



看来事件也能正常捕获,我们再试试写一个组件,在组件中自定义一个事件,看看结果如何:


<my-custom-comp @node-click="doSomeThing" />
// 在组件中是 $emit 触发:this.$emit('node-click', item)
复制代码



这个异常依旧是被成功捕获了,当然生命周期钩子中的错误异常也都能成功捕获,就不多做演示了,到目前为止都没有什么问题,但是如果错误不发生在 Vue 内部呢?


<button onclick="foo()">bad button</button>
复制代码



可以看到这个异常没有被顺利捕获,同样的,如果是外部 JS 代码报错,也都是无法捕获的,也就是说这个钩子只能捕获与 Vue 相关联的事件。


宏任务中的错误也是无法捕获的:


.......fetch() {  return new Promise((resolve) => {    setTimeout(() => {      asd = 1 // 在宏任务的异步中出现的错误      resolve({})    }, 1000)  })},
复制代码



如果 Promise 异常未被正常处理的话,也是捕获不到的,如下代码,注意这里 create 没有用 await 方式调用异步方法:


created() {    this.getSomeData();},methods: {    async getSomeData() {      await (asdasd = 1);    },},
复制代码



下面我们就逐一解决这两个场景下的错误捕获问题。

处理 JS 的额外错误

我们可以用 BOM 提供的全局错误处理函数 window.onerror 来尝试捕获,它接收多个参数:


window.onerror = function (message, source, line, column, error) {  console.log('全局捕获错误', message, source, line, column, error)}
复制代码


出错代码:


<button onclick="foo()">bad button</button>
复制代码



现在 JS 异常错误都可以被捕获到了,包括 setTimeout 宏任务的异步错误也可以被捕获,但我们注意到未被正常处理的 Promise 错误仍不能成功捕获。

处理 Promise 错误

参考 Vueerror.js 的代码,同步任务异常捕获就是套上一层 try...catch...,这也解释了为什么 Vue 捕获的错误不会被全局 window.onerror 再次捕获,因为已经在这里抛出了。而异步任务异常处理则是判断如果是 Promise 则把 catch 指向错误处理中:



我们可以模仿写一个插件,来处理 Vue 实例中 methods 的异常。


function isPromise(ret) {  return ret && typeof ret.then === 'function' && typeof ret.catch === 'function'}
const handleMethods = (instance) => { if (instance.$options.methods) { let actions = instance.$options.methods || {} for (const key in actions) { if (Object.hasOwnProperty.call(actions, key)) { let fn = actions[key] actions[key] = function (...args) { let ret = args.length > 0 ? fn.apply(this, args) : fn.call(this) if (isPromise(ret) && !ret._handled) { ret._handled = true return ret.catch((e) => errorHandler(e, this, `捕获到了未处理的Promise异常: (Promise/async)`)) } } } } }}
export default { install: (Vue, options) => { Vue.mixin({ beforeCreate() { this.$route.meta.capture && handleMethods(this) }, }) },}
复制代码


由于遍历所有方法可能会造成页面性能损失,所以这里我加了一个条件,需要在路由设置 meta 才能开启该组件下的method额外异常捕获。


再试试上面的错误代码,看看结果:


created() {    this.getSomeData();},methods: {    async getSomeData() {      await (asdasd = 1);    },},
复制代码



可以被正常捕获,这种方式的好处是我们可以把发生错误的实例信息传进去,如果不想使用这种方法,或是在 Vue3 中使用 setup 方式而不是 options 写法,还可以使用全局的事件监听来捕获:


window.addEventListener('unhandledrejection', (event) => {  console.log('全局捕获未处理的Promise异常', event)})
复制代码


完整代码

errorPlugin.js


function errorHandler(err, vm, info) {  console.log('vue异常错误捕获: ', '错误信息 ' + info)  // TODO: 处理错误上报}
const handleMethods = (instance) => { if (instance.$options.methods) { let actions = instance.$options.methods || {} for (const key in actions) { if (Object.hasOwnProperty.call(actions, key)) { let fn = actions[key] actions[key] = function (...args) { let ret = args.length > 0 ? fn.apply(this, args) : fn.call(this) if (isPromise(ret) && !ret._handled) { ret._handled = true return ret.catch((e) => errorHandler(e, this, `捕获到了未处理的Promise异常: (Promise/async)`)) } } } } }}function isPromise(ret) { return ret && typeof ret.then === 'function' && typeof ret.catch === 'function'}
let GlobalError = { install: (Vue, options) => { Vue.config.errorHandler = errorHandler // eslint-disable-next-line max-params window.onerror = function (message, source, line, column, error) { errorHandler(message, null, '全局捕获错误') // console.log('全局捕获错误', message, source, line, column, error) } window.addEventListener('unhandledrejection', (event) => { errorHandler(event, null, '全局捕获未处理的Promise异常') }) Vue.mixin({ beforeCreate() { this.$route.meta.capture && handleMethods(this) }, }) },}
export default GlobalError
复制代码


main.js 中引入


import Vue from 'vue'import App from './App.vue'import router from './router'
Vue.config.productionTip = false
// 引入错误处理插件import ErrorPlugin from './errorPlugin'Vue.use(ErrorPlugin)
new Vue({ router, render: (h) => h(App),}).$mount('#app')
复制代码

在 Vue3 中使用

一样在 main.js 中引入插件即可:


import { createApp } from 'vue'import App from './App.vue'import router from './router'import ErrorPlugin from './errorPlugin'
createApp(App).use(router).use(ErrorPlugin).mount('#app')
复制代码

结束

如果你需要更加丰富的错误收集分析功能,还是得使用如 Sentry 、 Bugsnag 这类完善的错误追踪服务,不过相对来讲这些都需要不少配置部署操作。本文介绍了如何简单地在 Vue 中全局捕获异常错误,提升代码健壮性,且能避免在代码中编写大量异常捕获块,同时也减少了出错时控制台的大片飘红报警,收集错误可以帮助我们定位开发与测试阶段不易发现的疑难杂症,这部分可以使用 http 请求将错误信息发送到服务器。


以上就是文章的全部内容,希望对你有所帮助!如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~

发布于: 刚刚阅读数: 3
用户头像

公众号:品味前端 2022.09.22 加入

一介前端,卖码为生。很惭愧,只希望在学习和分享的道路上能做一点微小的贡献。

评论

发布
暂无评论
Vue项目处理错误上报如此简单_Vue_茶无味的一天_InfoQ写作社区