統計 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等，可替換成內部的捕獲錯誤方法
