Start

WebTracing是一个基于 JavaScript 的埋点SDK 官方文档：https://m-cheng-web.github.io/web-tracing/

这个包基于 WebTracing 做了二开， 改成了js版本，添加了一些自定义的东西，例如自定义请求参数等。删除了对react、vue2的支持，仅支持 vue3

它努力为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段

自定义请求参数

主要通过 transformSendParams 实现 主要实现在src/libs/sendData.js这个文件

app.use(WebTracing, {
	dsn: '/report',
  appName: 'aibox-client',
  debug: false,
  pv: false,
  performance: {
    firstResource: true,
  },
  recordScreen: false,
  error: true,
  event: true,
  cacheMaxLength: 10,
  cacheWatingTime: 1000,
  transformSendParams: (sendParams) => {
    const { baseInfo, eventInfo} = sendParams
    const data = {
      data:{
        events: [],
        metrics: [],
        errors: [],
        performance: []
      },
    }
    eventInfo.reduce((acc, cur) => {
      if (cur.eventId === SENDID.PAGE) {
        acc.data.performance.push(cur)
        return acc
      }
      if (cur.eventType === SEDNEVENTTYPES.ERROR) {
        acc.data.errors.push(cur)
        return acc
      }
      if(Object.values(CUSTOMEVENTTYPE).includes(cur?.type)){
        acc.data[cur.type].push(cur)
        return acc
      }
      acc.data.events.push(cur)
      return acc
    }, data)
    return {
      service: baseInfo.appName,
      serviceVersion: baseInfo.sdkVersion,
      sessionId: baseInfo.sessionId,
      sendTime: baseInfo.sendTime,
      userId: baseInfo.userUuid,
      // ...baseInfo,
      ...data
    }
    //return sendParams
  }
})

其他的内容可以看看官方文档或者翻一下源码实现

performance 增加了对fcp和lcp的监控

详细看src/libs/performance.js这个文件