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

头像
茶无味的一天
     广东
    阅读 7 分钟

    处理异常的意义

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

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

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

    image.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)
}

    image.png

    可以看到异常成功被捕获了，因为我们模拟了一个数据错误导致渲染出错，所以错误发生在 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) => {
          // ......省略
      })
    }

    image.png

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

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

    image.png

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

    <my-custom-comp @node-click="doSomeThing" />

// 在组件中是 $emit 触发：
this.$emit('node-click', item)

    image.png

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

    <button onclick="foo()">bad button</button>

    image.png

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

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

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

    image.png

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

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

    image.png

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

    处理 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>

    image.png

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

    处理 Promise 错误

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

    image.png

    我们可以模仿写一个插件，来处理 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额外异常捕获。

    image.png

    再试试上面的错误代码，看看结果：

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

    image.png

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

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

    image.png

    完整代码

    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一天，希望与你共同成长~
    vue.js异常处理前端javascript
    茶无味的一天
    19 声望4 粉丝

    代码首先是写给人看的，附带能在机器上运行的功能。

    « 上一篇
    利用Vue自定义指令让你的开发变得更优雅
    下一篇 »
    时隔一年多jQuery发布3.6.1新版本，你还在用JQ吗？

    引用和评论

    推荐阅读
    头像
    Electron打包错误的踩坑小记

    茶无味的一天阅读 1.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新