本文主要是介绍前端小技巧: 设计一个简版前端统计 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等,可替换成内部的捕获错误方法
这篇关于前端小技巧: 设计一个简版前端统计 SDK的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!