vue 3中统一记录用户操作路径的核心是构建可回溯的行为链路，需绑定当前路由与页面状态、捕获关键交互事件、维护轻量级操作栈、关联用户身份与设备环境，最终与错误日志一并上报。
在 Vue 3 中统一记录用户操作路径，核心是把「用户当前在哪、刚做了什么、上下文环境如何」这些信息，和错误日志一起打包上报。它不是单纯记点击顺序，而是构建可回溯的行为链路，便于定位“为什么这个错误在此时此地发生”。
绑定当前路由与页面状态
错误发生时，用户所处的路由是最基础的操作路径。需在 errorHandler 中主动读取 router.currentRoute.value：
- 使用 vue-router 4 时，通过
router.currentRoute.value.fullPath获取完整路径（含 query） - 补充
router.currentRoute.value.meta中预设的业务标识，如pageType: 'order-list'，方便归类 - 若使用 keep-alive，可加
router.currentRoute.value.matched?.[0]?.components?.default?.name记录组件名
捕获关键用户交互事件
仅靠路由不够，要记录“触发错误前的关键动作”。可在全局事件总线或 app.config.globalProperties 上轻量监听：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 监听
click事件，提取目标元素的data-track-id或id属性，例如按钮上写data-track-id="btn-submit-order" - 对表单提交、搜索、分页等高频操作，统一在事件回调开头打点：
track('submit_form', { formId: 'user-profile' }) - 避免监听所有 click（性能损耗），聚焦业务主路径上的可识别 DOM 节点
维护轻量级操作栈（非全量）
不需要记录每一次点击，而是保留最近 3–5 条有意义的操作快照，作为错误上下文：
- 定义一个长度为 5 的数组
operationStack = []，用push()+splice(0, 1)维持 FIFO - 每条记录包含：
type（如 'click', 'input', 'route-change'）、target（元素描述或路由名）、timestamp - 在
app.config.errorHandler中将该栈作为customInfo.operationHistory一并上报
关联用户身份与设备环境
操作路径必须结合“谁在什么设备上做的”，否则无法复现：
- 上报时带上脱敏后的用户标识，如
userId: 'u_8d2f...'（不传明文手机号/邮箱） - 补充
navigator.userAgent、screen.width × height、localStorage.getItem('theme')等环境字段 - 若已登录，可从 pinia store 或 auth 模块中安全读取角色、权限组等上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
