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

2023-12-13 17:55:18

统计 sdk 如何设计

1 ) 概述

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

2 )需求点

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

3 ) 代码实现

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等,可替换成内部的捕获错误方法

文章来源:https://blog.csdn.net/Tyro_java/article/details/134875713
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。