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

统计 sdk 如何设计

1 ) 概述

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

2 ）需求点

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

3 ) 代码实现

const PV_URL_SET = new Set()class MyStatistic {constructor(productId) {this.productId = productIdthis.initPerformance() // 性能统计this.initError() // 初始化错误监控},// 发送统计数据send(url, params = {}) {// 加上必要参数params.productId = this.productIdconst 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) // 这个apiconst url = 'yyy'this.send(url, performance.timing) // 给最原始、最完整的结果，原始数据// 注意，至少要在 DOMContentLoaded 调用它},initError() {window.addEventListener('error', event => {const { error, lineno, colno} = eventthis.error(error, { lineno, colno })})// Promise未catch住的报错window.addEventListener('unhandledrejection', event => {this.error(new Error(event.reason), {type: "unhandledrejection"})})},pv() {// sendconst href = location.hrefif (PV_URL_SET.get(href)) return // 不重复发送this.event('pv')PV_URL_SET.add(href) 、、 },event(key, val) {// 自定义事件// sendconst url = 'xxx' // 自定义事件，统计serverthis.send(url, {key, val})}// 统计用户 try catch 里的errorerror(err, info={}) {// sendconst url = 'zzz'const {message, stack} = errthis.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等，可替换成内部的捕获错误方法