前端统计SDK (设计思路分析-初步代码实现)

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 })
}