vue3 如何做数据埋点

前言

一般情况下，我们需要收集前端的异常，用于分析系统的各个方面的指标。以下我将分享我在工作中做数据埋点的简单思路。

功能

• 路由跳转和停留时间记录。
• 页面操作错误记录。
• 系统全局异常捕获。

思路

第一部分

定义一个Hooks，方便收集系统中的一些参数，例如用户名之类的一般存储在仓库中，所以用Hooks比较方便。

export const useDataRecord = () => {
    // 相关的逻辑和方法
    // todo
}

第二部分

在函数中定义一个BaseClass基类，用于封装通用方法和统一管理系统参数。

export const useDataRecord = () => {
    class BaseClass {
        protected userInfo = computed(() => {
            return {
                userName: '从仓库获取',
                userId: '从仓库获取',
                // ...
            }
        })

        // 获取路由方法
        // todo

        // 数据发送后台方法
        // todo

        // 其他
        // todo
    }
}

第三部分

这部分我们就可以实现具体的业务，例如全局的错误捕获。

export const useDataRecord = () => {
    class BaseClass {
        protected userInfo = computed(() => {
            return {
                userName: '从仓库获取',
                userId: '从仓库获取',
                // ...
            }
        })

        // 获取路由方法
        // todo

        // 数据发送后台方法
        sendData(data: any) {
            // todo
        }

        // 其他
        // todo
    }

    class ErrorClass extends BaseClass {
        /**
         * 记录系统错误事件
         * @param errorMessage 错误信息
         * @param sourceEvent 来源事件
         */
        record(errorMessage: string, sourceEvent: string) {
            const params = {
                errorMessage: errorMessage, // 错误信息
                sourceEvent: sourceEvent, // 来源事件，例如：api、page、error等等
                recordTime: moment().format('YYYY-MM-DD HH:mm:ss'), // 记录时间
                userName: this.userInfo.value.userName, // 用户名
                userId: this.userInfo.value.userId, // 用户id
            }
            // 发送数据
            this.sendData(params)
        }
    }
    
    return {
        ErrorClass
    }
}

第四部分

这部分就是如何使用我们的数据埋点的方法，我们的使用应该支持在vue文件中使用，也可以在ts中使用。例如在vue文件中使用主要针对页面的记录，在ts文件中，比如路由router.ts中记录路由切换。介绍一下在页面中如何使用：

首先在App.vue文件中，我们可以使用provide/inject配合来使用。

const dataTrack: DataTrackType = useDataTrack(true);
// setup js 中使用：const dataTrack = inject('dataTrack');
// const dataTrack: DataTrackType = inject('dataTrack')!;
provide('dataTrack', dataTrack);

DataTrackType 可以在全局定义类型，也可以单独引入。例如可以在global.d.ts中定义：

declare global {
  type DataTrackType = ReturnType<typeof useDataTrack>;
}

之后在页面中我们使用，例如在404.vue页面中可以这样使用：

const dataTrack: DataTrackType = inject('dataTrack')!;
const errorClass = new dataTrack.ErrorClass();

// ...

errorClass.record('抱歉，您访问的页面不存在或无相关权限', '404');

第五部分

同样的，其他记录api或者全局vue错误捕获同样的道理，我们需要创建不同的class即可使用通用的方法，更复杂的记录需要自己添加进方法里面，有时候前端使用class能解决一些比较复杂的问题。

结语

这套思路能够满足大部分的需求场景，希望大家可以一起来交流。