真香定律！全局错误收集(基础篇)

完整项目地址：vue3-element-plus

体验地址：http://8.135.1.141/vue3-admin-plus

系列文章入口：

• 真香定律！带你用vue3+vite2撸后台（入口）

前言

进行全局错误收集，有助于我们及时收集到报错信息。特别是在生产环境中，能及时收集到用户使用时的错误日志。第一时间处理，提高系统的可靠性，和用户体验性，为公司减少不必要的损失。全局错误收集是多么重要。

那么本篇就来主要讲讲如何更优雅的收集错误。

错误日志体验（先看看黑科技）

点击体验

如果收集错误

全局错误收集文件useErrorLog.js

我们来分析下这个hook文件

import setting from '@/settings'
import bus from '@/utils/bus'

export default function () {
   //获取.env文件里配置的变量VITE_APP_ENV 和 setting的errorLog进行对比，得到需要开启错误收集的环境
  const checkNeed = () => {
    const env = import.meta.env.VITE_APP_ENV
    let { errorLog } = setting
    //判断配置的是字符串
    if (typeof errorLog === 'string') {
      return env === errorLog
    }
    //判断配置的是数组Array
    if (errorLog instanceof Array) {
      return errorLog.includes(env)
    }
    return false
  }
  if (checkNeed()) {
    //通过window.addEventListener监听收集全局错误日志
    window.addEventListener(
      'error',
      ({ error, target }) => {
        if (target.outerHTML) {
          //img error collection
          let errLog = `${JSON.stringify(target.outerHTML)}`
          //将错误信息发送收集
          errorLogReq(errLog)
        } else {
          let errLog = `${error.stack.substr(0, 300)}`
          errorLogReq(errLog)
        }
      },
      //利用事件捕捉机制，捕捉img加载错误信息
      true
    )
  }
}
let errorLogReq = (errLog) => {
  request({
    url: '/ty-user/errorCollection/insert',
    data: {
      pageUrl: window.location.href,
      errorLog: errLog,
      //获取浏览器版本和系统信息
      browserType: navigator.userAgent,
      version: pack.version
    },
    method: 'post',
    bfLoading: false,
    isAlertErrorMsg: true
  }).then(() => {
    //利用事件机制，通知页面reloadErrorPage进行页面刷新
    //注：bus使用的是mitt库，类似的是vue2中的new Bus()功能
    bus.emit('reloadErrorPage', {})
  })
}
复制代码

注： window.addEventListener第二个参数必须配置为true(默认是false)，才能收集图片错误信息

扫描二维码关注公众号，回复： 13619516 查看本文章

reloadErrorPage页面

我们这边主要说说ErrorLog.vue的核心代码

onMounted(() => {
  //监听hooks/useErrorLog.js里的事件，如果有bug则更新列表数据
  bus.on('reloadErrorPage', () => {
    selectPageReq()
  })
})

//代码追踪
<el-button type="text" size="small" @click="consoleToPlatform(row.errorLog)">
  click it console to platform to track
</el-button>
const consoleToPlatform = (err) => {
  //利用console.error将收集到的代码再次打印到控制台，方便追踪定位
  console.error(err)
}
复制代码

如何配置使用

可以通过settings.js里的errorLog字段进行配置，如：

收集生产环境日志
.env.build 配置的VITE_APP_ENV 为 prod 
那么在settings.js文件里的errorLog配置为['prod']就可进行收集了
其他环境配置类似
复制代码

注：VITE_APP_ENV配置的值，必须和errorLog配置项对应

总结

全局错误捕捉，通过window.addEventListener监听收集全局错误日志，发送到后台接口。通知页面ErrorLog.vue进行更新错误列表数据

看了是不是很神奇，很香！！！