持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

前端统计的范围

首先看下前端需要统计哪些数据：

访问量 PV
自定义事件（如统计一个按钮被点击了多少次）
性能
错误

统计数据的流程如下：

前端发送统计数据给服务端
服务端接受，并处理统计数据
查看统计结果

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 = {}) {
        // TODO 发送统计数据
    }
    private initPerformance() {
        // TODO 性能统计
    }
    private initError() {
        // TODO 监听全局错误（有些错误需要主动传递过来，如 Vue React try-catch 的）
    }
    pv() {
        // TODO 访问量 PV 统计
    }
    event(key: string, value: string) {
        // TODO 自定义事件
    }
    error(key: string, info: object = {}) {
        // TODO 错误统计
    }
}

用户在使用的时候，只需要传入产品id

const myStatistic = new MyStatistic('abc')

1.发送数据

发送统计数据，用 <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 img = document.createElement('img')
    img.src = `${url}?${paramArr.join('&')}`
}

2.自定义事件统计

传入两个参数，一个是key,一个是value，分别表示事件名称和事件内容

event(key: string, value: string) {
    const url = 'xxx' // 接受自定义事件的 API
    this.send(url, { key, value }) // 发送
}

3.访问量 PV

PV 可以通过自定义事件的方式。但是为了避免用户重复发送，需要加一个判断

// 定义一个全局的 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)
}

4.错误统计

监听全局操作,使用addEventListener来监听 error事件

针对Promise 未 catch 的报错，使用使用addEventListener来监听unhandledrejection事件

private initError() {
    // 全局操作
    window.addEventListener('error', event => {
        const { error, lineno, colno } = event
        this.error(error, { lineno, colno })
    })
    // Promise 未 catch 的报错 （ 参考 unhandledrejection.html ）
    window.addEventListener("unhandledrejection", event => {
        this.error(event.reason)
    })
}

前端统计sdk设计

前端统计的范围