1. 分析
前端统计的范围（基本统计，更详细的需要根据自己项目的需求进行添加）
- 访问量PV
- 自定义事件 (如统计一个按钮被点击了多少次)
- 网页性能
- 错误信息
统计数据的流程
- 前端发送统计数据给服务端(详细数据格式与后端协商制定)
- 服务端接受，并处理统计数据
- 查看统计结果，根据结果分析优化系统，产生闭环
2. 代码结构
SDK要用于多个不同的产品，所以初始化要传入 productId
class MyStatistic {
private productId: number
constructor(productId: number = 0) {
if (productId <= 0) {
throw new Error('productId is invalid')
}
this.productId = productId // 产品 id （SDK 会被用于多个产品）
this.initPerformance() // 性能统计
this.initError() // 监听错误
}
private send(url: string, paramObj: object = {}) {
// 发送统计数据
}
private initPerformance() {
// 性能统计
}
private initError() {
// 监听全局错误（有些错误需要主动传递过来，如 Vue React try-catch 的）
}
pv() {
// 访问量 PV 统计
}
event(key: string, value: string) {
// 自定义事件
}
error(key: string, info: object = {}) {
// 错误统计
}
}
使用 因为要做性能统计所以初始化要在 DOMContentLoaded 或 onload 中进行
const myStatistic = new MyStatistic('SFCP')
2.1 发送数据 - send
发送统计数据，用<img>标签，因为浏览器兼容性非常好，且没有跨域限制
private send(url: string, paramObj: object = {}) {
// 追加 productId
paramObj.productId = this.productId
// params 参数拼接为字符串
const paramArr = []
for (let key in paramObj) {
const value = paramObj[key]
paramArr.push(`${key}=${value}`)
}
const param = `?${paramArr.join('&')}` // ?key=value&key1=value1&key2=value2
const img = document.createElement('img')
img.src = url + param
}
这里可以进一步优化，send中可以使用requestIdleCallback:“空闲时才执行，低优”(兼容使用setTimeout)
2.2 自定义事件 - event
event(key: string, value: string) {
const url = 'xxx' // 接受自定义事件的 API
this.send(url, { key, value }) // 发送
}
使用
// 如需要统计某个弹框的“同意” “不同意” “取消” 三个按钮的点击量，即可使用自定义事件统计
$agreeBtn.click(() => {
// ...业务逻辑...
myStatistic.event('some-button', 'agree') // 其他不同的按钮，传递不同的 value (如 'refuse' 'cancel')
})
具体传递的参数和后端协商制定
2.3 访问量 - pv
pv可以通过自定义事件的方式，但是为了避免用户重复发送，需要加一个判断
根据不同的产品来设计，有的产品访问当前不同的页面每次访问就会+1，有的产品只要访问了一次，无论再访问其他的页面也只会算一次，具体根据业务来判断。
// 定义一个全局的 Set ，记录已经发送 pv 的 url
const PV_URL_SET = new Set()
pv() {
const href = location.href
if (PV_URL_SET.has(href)) return // 判断当前页面是否访问过
this.event('pv', '') // 发送 pv
PV_URL_SET.add(href)
}
使用
myStatistic.pv()
PV统计需要让用户自己发送吗？能不能在DOMContentLoaded时自动发送？最好让用户发送，因为SPA中切换路由也可能发送PV
2.4 性能统计 - initPerformance
通过performance.timing可以看到网页的各个性能
private initPerformance() {
const url = 'xxx' // 接受性能统计的 API
this.send(url, performance.timing) // 全部传给服务端，让服务端去计算结果 —— 统计尽量要最原始数据，不要加工处理
}
想要得到全面的性能数据，要在网页加载之后(DOMContentLoaded 或 onload) 去初始化 myStatistic
2.5 错误统计 - initError - error
监听全局操作
private initError() {
// 全局操作
window.addEventListener('error', event => {
const { error, lineno, colno } = event
this.error(error, { lineno, colno })
})
// Promise 未 catch 的报错
window.addEventListener("unhandledrejection", event => {
this.error(event.reason)
})
}
主动收集的错误，调用API来统计
error(error: Error, info: object = {}) {
// error 结构 { message, stack }
// info 是附加信息
const url = 'xxx' // 接受错误统计的 API
const { message, stack } = error
this.send(url, { message, stack, ...info })
}
使用 结合 统一监听Vue组件报错方案
// try catch
try {
100()
} catch (e) {
myStatistic.error(e)
}
// Vue 错误监听
app.config.errorHandler = (error, instance, info) => {
myStatistic.error(error, { info })
}
