Vue搭建前端监控，采集用户行为的 N 种姿势

Vue搭建前端监控，采集用户行为的 N 种姿势

最近我在3A平台购买了服务器。

在一个产品中，用户最基本的行为就是切换页面。用户使用了哪些功能，也能从切换页面中体现出来。因此通用数据一般是在页面切换时产生，表示某个用户访问了某个页面。

页面切换对应到前端就是路由切换，可以通过监听路由变化来拿到新页面的数据。Vue 在全局路由守卫中监听路由变化，任意路由切换都能执行这里的回调函数。

// Vue3 路由写法
const router = createRouter({
    ... })
router.beforeEach(to => {
   
  // to 代表新页面的路由对象
  recordBehaviors(to)
})

React 在组件的 useEffect 中实现相同的功能。不过要注意一点，监听所有路由变化，则需要所有路由都经过这个组件，监听才有效果。具体的方法是配置路由时加 * 配置：

import HomePage from '@/pages/Home'
<Route path="*" component={
   HomePage} />,

然后在这个组件的的 useEffect 中监听路由变化：

// HomePage.jsx
const {
    pathname } = useLocation();
useEffect(() => {
   
  // 路由切换这个函数触发
  recordBehaviors(pathname);
}, [pathname]);

上面代码中，在路由切换时都调用了 recordBehaviors() 方法并传入了参数。Vue 传的是一个路由对象，React 传的是路由地址，接下来就可以在这个函数内收集数据了。

明确了在哪里收集数据，我们还要知道收集哪些数据。收集行为数据最基本的字段如下：

• app：应用的名称/标识
• env：应用环境，一般是开发，测试，生产
• version：应用的版本号
• user_id：当前用户 ID
• user_name：当前用户名
• page_route：页面路由
• page_title：页面名称
• start_at：进入时间
• end_at：离开时间

上面的字段中，应用标识、环境、版本号统称应用字段，用于标志数据的来源。其他字段主要分为 用户，页面，时间三类，通过这三类数据就可以简单的判断出一件事：谁到过哪个页面，并停留了多长时间。

应用字段的配置和获取方式我们在上一节 搭建前端监控，如何采集异常数据？ 中讲过，就不做多余介绍了，获取字段的方式都是通用的。

下面介绍其他的几类数据如何获取。

获取用户信息

现代前端应用存储用户信息的方式基本都是一样的，localStorage 存一份，状态管理里存一份。因此获取用户信息从这两处的任意一处获得即可。这里简单介绍下如何从状态管理中获取。

最简单的方法，在函数 recordBehaviors() 所处的 js 文件中，直接导入用户状态：

// 从状态管理里中导出用户数据
import {
    UserStore } from '@/stores';
let {
    user_id, user_name } = UserStore;

这里的 @/stores 指向我项目中的文件 src/stores/index.ts，表示状态管理的入口文件，使用时替换成自己项目的实际位置。实际情况中还会有用户数据为空的问题，这里需要单独处理一下，方便我们在后续的数据查看中能看出分别：

import {
    UserStore } from '@/stores';

// 收集行为函数
const recordBehaviors = ()=> {
   
  let report_date = {
   
    ...
  }
  if(UserStore) {
   
    let {
    user_id, user_name} = UserStore
    report_date.user_id = user_id || 0
    report_date.user_name = user_name || '未命名'
  } else {
   
    report_date.user_id