前端小技巧: 设计一个简版前端统计 SDK

Wang's Blog2023-12-09 9:31

统计 sdk 如何设计

1 ) 概述

客户端一个sdk ，把数据发送给服务端(第三方统计平台)
服务端产生一个统计的报表

2 ）需求点

访问量：pv
自定义事件：用户的一切行为我们都可以自定义采集
性能，错误

3 ) 代码实现

ts 复制代码

const PV_URL_SET = new Set()

class MyStatistic {
  constructor(productId) {
    this.productId = productId
    this.initPerformance() // 性能统计
    this.initError() // 初始化错误监控
  },
  // 发送统计数据
  send(url, params = {}) {
    // 加上必要参数
    params.productId = this.productId
    const paraArr = []
    for(let key in params) {
      const val = params[key]
      paramsArr.push(`${key}=${value}`)
    }
    const newUrl = `${url}?${paramsArr.join('&')}`
    const img = document.createElemnt('img')
    img.src = newUrl // get
  },
  // 初始化性能统计
  initPerformance() {
    // console.table(performance.timing) // 这个api
    const url = 'yyy'
    this.send(url, performance.timing) // 给最原始、最完整的结果，原始数据
    // 注意，至少要在 DOMContentLoaded 调用它
  },
  initError() {
    window.addEventListener('error', event => {
      const { error, lineno, colno} = event
      this.error(error, { lineno, colno })
    })
    // Promise未catch住的报错
    window.addEventListener('unhandledrejection', event => {
      this.error(new Error(event.reason), {type: "unhandledrejection"})
    })
  },
  pv() {
    // send
    const href = location.href
    if (PV_URL_SET.get(href)) return // 不重复发送
    this.event('pv')
    PV_URL_SET.add(href) 、、 
  },
  event(key, val) {
    // 自定义事件
    // send
    const url = 'xxx' // 自定义事件，统计server
    this.send(url, {key, val})

  }
  // 统计用户 try catch 里的error
  error(err, info={}) {
    // send
    const url = 'zzz'
    const {message, stack} = err
    this.send(url, {
      message, stack, ...info
    })
  }
}

const s = new MyStatistic('a1') // 至少要在 DOMContentLoaded 调用它

s.pv() // pv只能调用，在 spa路由中切换需要调用
s.event('vip', 'ok')
s.event('vip', 'cancel')
s.event('vip', 'close')

try {} catch(e) {
  s.error(ex, {})
}

4 ）总结

以上是一个简版的原生js的实现方式
所有细节处理都在代码中
如果使用框架，如React和Vue等，可替换成内部的捕获错误方法