4、前端错误收集与上报

背景

前端项目上线后，需要对异常报错进行收集与反馈，以便迅速解决线上问题和隐患排查。

前端常用的错误收集手段

1、try...catch

在 catch 里面可收集到报错信息

但无法捕获到异步错误（Promise、setTimeout 里面执行的）

2、window.error

它可以捕获到异步错误（setTimeout 里面执行的）

window.onerror = () => { //... }
window.addEventListener("error", () => { //... }) // 可以捕获网络异常

3、unhandledrejection

用于捕获 Promise 里面的 catch 错误

window.addEventListener('unhandledrejection', () => { //... })

4、app.config.errorHandle

专门捕获 Vue3.0 的错误信息

app.config.errorHandler = (err, instance, info) => {
  // ...
}

前端流程

采用 Vue3.0 进行项目搭建：cn.vuejs.org/guide/quick…

正常启动项目。

1、新增 Vue 的错误处理

在 main.ts 里面，新增代码：cn.vuejs.org/api/applica…

app.config.errorHandler = (err, instance, info) => {
  console.log('[ err ] >', err) // 错误对象：错误信息、堆栈信息等
  console.log('[ instance ] >', instance) // 对应的 vue 组件
  console.log('[ info ] >', info) // 一个指出错误来源类型信息的字符串
}

在 App.vue 的 script 新增代码：

console.log(a) // 触发报错

打印的报错信息：

2、安装 TraceKit，处理 Vue 的错误信息

github：github.com/csnover/Tra…

1、安装：npm i tracekit

因为 vue 的错误信息可通过 app.config.errorHandler 进行捕获，但捕获到的信息是 Vue 处理过的，无法追溯，很难直观的拿到 colum 和 line 信息，所以要使用 tracekit 处理下

2、创建文件夹：fe/src/error-report/vueErrorHandler.ts

import TraceKit from 'tracekit'

TraceKit.report.subscribe((errorReport) => {
  const { message, stack } = errorReport || {}
  const obj = {
    message,
    stack: {
      column: stack[0].column,
      line: stack[0].line,
      func: stack[0].func,
      url: stack[0].url
    }
  }

  console.log('[ subscribe obj ] >', obj)
})

export { TraceKit }

3、在 main.js 加入代码：

4、收集到错误信息：

3、全局错误捕获

处理了 Vue 的错误捕获，基本上都能拿到错误信息，但以防漏掉，还是进行全局的错误捕获，主要是资源加载错误。

因为常规的全局 JS 报错会经过【Vue 的错误处理】，所以不用额外再全局里面处理了

1、新增文件：fe/src/error-report/windowErrorHandler.ts

window.addEventListener('error', (event) => {
  if (event.target && (event.target.src || event.target.href)) {
    // 资源加载错误
    const obj = {
      src: event.target.src || event.target.href
      // ...
    }
  }
})

4、错误上报接口

0、新增几个依赖：axios、platform、dayjs

1、新增文件：fe/src/error-report/report.ts

import axios from 'axios'
import platform from 'platform'
import dayjs from 'dayjs'

export const reportError = (errorData: object, errorType: 'vue' | 'window') => {
  const reportData = {
    error: errorData,
    platform, // 平台信息
    time: dayjs().format('YYYY-MM-DD HH:mm:ss')
  }

  // 本地搭建的后端服务，后面会讲
  const url = 'http://localhost:3000/api/error/create'

  axios({
    method: 'POST',
    url,
    data: {
      ...reportData,
      type: errorType
    }
  })
    .then(() => {
      console.log('错误上报成功')
    })
    .catch(() => {
      console.log('错误上报失败')
    })
}

2、在【2、3】步新增上报

reportError(obj, 'vue')
reportError(obj, 'window')

后端流程

1、初始化后端项目

1、任意创建文件夹

2、npm init -y

3、参照下面文档起一个 node 服务：

1、7-2、nodejs 之 Koa2 + MongoDB 简单开发

2、Koa | Koa(koajs)中文文档 | Koa(koajs)中文网

4、然后写接口，获取到传入的数据，然后存入即可

最后

至此错误收集与上报就 ok 了，主要讲了前端的部分，后续的怎么使用、存储就看个人公司的使用场景。

然后其他链路：sourceMap 解析、报警等等就是更深入的了