前端小技巧: 设计一个简版前端统计 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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!