大家好，我是杨成功。

上一篇我们详细介绍了前端如何采集异常数据。采集异常数据是为了随时监测线上项目的运行情况，发现问题及时修复。在很多场景下，除了异常监控有用，收集用户的行为数据同样有意义。

怎么定义行为数据？顾名思义，就是用户在使用产品过程中产生的行为轨迹。比如去过哪几个页面，点过哪几个按钮，甚至在某个页面停留了多长时间，某个按钮点击了多少次，如果有需求都可以记录下来。

但是记录行为数据是一个和业务紧密关联的事情，不可能把每个用户每一步操作都极其详细的记录下来，这样会产生极其庞大的数据，很显然不现实。

合理的做法是，根据产品的实际情况评估，哪个模块哪个按钮需要重点记录，蓝狮注册开户则可以采集的详细一些；哪些模块不需要重点关注，则简单记录一下基本信息。

根据这个逻辑，我们可以把行为数据分为两类：

通用数据
特定数据
下面分别介绍这两类数据该如何收集。

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

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

// Vue3 路由写法
const router = createRouter({ … })
router.beforeEach(to => {
// to 代表新页面的路由对象
recordBehaviors(to)
})
react 在组件的 useEffect 中实现相同的功能。不过要注意一点，蓝狮注册监听所有路由变化，则需要所有路由都经过这个组件，监听才有效果。具体的方法是配置路由时加 * 配置：

import HomePage from ‘@/pages/Home’
,
然后在这个组件的的 useEffect 中监听路由变化：

// HomePage.jsx
const { pathname } = useLocation();
useEffect(() => {
// 路由切换这个函数触发
recordBehaviors(pathname);
}, [pathname]);
上面代码中，在路由切换时都调用了 recordBehaviors() 方法并传入了参数。Vue 传的是一个路由对象，React 传的是路由地址，接下来就可以在这个函数内收集数据了。

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

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

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

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