1. 集成方式
- 在plugin中统一操作，可复用性强
- 添加到全局实例上，使用
this.$tracker方式可快速调用 - 提供依赖注入，使用
useTracker这种组合式方式可快速调用 - 添加全局指令
- 扩展埋点库自定义方法
2. 异常处理
2.1 js 异常处理
window 监听 error 事件，捕获异常
2.2 被 vue 捕获的异常处理
vue 提供了 app.config.errorHandler方法，所有 vue 捕获的异常通过此方法可捕获到。
2.3 网络请求异常
以 axios 为例，可在拦截器中进行捕获。
2.3.1 非 200 的请求异常
这时候是接口调不通，或超时或取消等异常，在拦截器的异常捕获方法里进行埋点
(error: any) => {
tracker.track('http_error', { ...error })
}
2.3.2 接口请求成功，但业务逻辑返回非正常状态
在拦截器响应回调 response 里判断返回标识是否是成功，捕获不成功的异常。
如成功的状态为 code 字段为 U000000, 则，
(response) => {
if (response.data.code !== 'U000000') {
tracker.track('http_error', { ...response.data })
}
}
3 记录用户交互操作
自定义 vue 全局指令 v-track.
给需要记录操作的元素加上自定义指令，添加相应的事件监听方法，当事件触发时，自动收集信息进行埋点。
- tracker.ts
const trackFunc = (listenType:string = 'click', callback: Function, tracker:any) => {
return (event?: Event) => {
const options = callback && callback()
tracker.track(listenType, { properties: { ...options } })
}
}
app.directive('track', {
created: (el, binding) => {
const listenType = binding.arg
const callback = binding.value
if (typeof callback !== 'function' && import.meta.env.DEV) {
console.warn('[Tracker] v-track callback must be a function, current callback is:', callback)
}
el.addEventListener(listenType, trackFunc(listenType, callback, tracker))
},
unmounted(el, binding, vnode) {
el.removeEventListener('click', trackFunc)
}
})
- App.vue
<template>
<input v-model="userName" v-track:change="() => ({operation: '输入用户名', userName: userName })})"
<button @click="login" v-track:click="() => ({ operation: '登录', userName: userName })">登录</button>
</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue'
const userName: Ref<string> = ref('')
const login = () => {}
</script>
4 其他系统日志
- 系统定义统一的日志方法，统一收集起来埋点
如定义一个 Log 库，替代 console.log 或者
重写 console.log 方法，收集使用 congsole.log 的日志信息。
