vue 3统一错误处理需提前埋点、持续采集、关联上报，通过路由监听、交互指令、api快照和环境采集记录行为轨迹，并在错误捕获时拼接最近5–10条日志至breadcrumbs字段，配合session_id实现前后端行为与错误联合分析。
Vue 3 中统一错误处理要记录用户崩溃前的操作行为轨迹，关键不是“等崩溃了再记”，而是**提前埋点、持续采集、关联上报**。崩溃瞬间往往来不及执行复杂逻辑，所以行为日志必须在错误发生前就已积累，并在捕获到错误时一并带上。
操作行为轨迹的采集方式
行为轨迹指用户点击、路由跳转、表单输入、API 请求等可识别动作。不能靠事后还原，需主动记录：
-
路由变化监听：使用
router.beforeEach记录路径、参数、时间戳，存入内存队列（如长度限制为 20 条） -
关键交互埋点：对按钮点击、搜索提交、Tab 切换等绑定统一指令（如
v-track="login-submit"），触发时写入行为日志 - API 请求快照：在 axios 响应拦截器中，对失败请求记录 method、url、params、status、耗时，标记为 “lastFailedRequest”
-
用户环境快照：在应用初始化时采集并缓存
navigator.userAgent、screen.width/height、是否移动端、当前登录用户 ID 等
与错误上报的强关联机制
当全局错误被 window.onerror、unhandledrejection 或 Vue 的 app.config.errorHandler 捕获时，不要只传错误堆栈——要拼接最近的行为链：
- 从内存队列中取出最近 5–10 条行为日志（按时间倒序），附加到错误 payload 的
breadcrumbs字段 - 确保每条行为日志含
timestamp（毫秒级）、type（如 "click", "route", "api"）、payload（如点击元素文本、跳转路径） - 错误上报接口接收字段示例：
{ type: "JS_ERROR", message: "...", stack: "...", breadcrumbs: [...], userInfo: { uid: "U123", role: "admin" } }
避免常见陷阱
行为轨迹容易因设计不当而失效或拖慢性能：
-
不存 DOM 引用：行为日志里不要保存
event.target或节点对象，只存可序列化的描述（如data-track-id属性值） -
不依赖异步存储：不要用
localStorage.setItem实时写入每条行为——阻塞主线程且不可靠；改用内存队列 + 错误触发时批量上报 -
不忽略页面卸载场景：监听
beforeunload，将未上报的行为+错误尝试用navigator.sendBeacon发出，保障最后机会 - 不过度采集：鼠标移动、滚动等高频事件默认不记录；如需分析，启用采样（如每 500ms 最多记 1 条）
后端配合要点
前端采集只是第一步，后端需支持行为与错误的联合查询：
- 错误日志表增加
session_id字段（由前端生成并持久化，如存 localStorage），用于串联同一会话中的所有行为 - 行为日志表设计包含
event_type、event_time、session_id、page_path、extra（JSON 字符串） - 监控平台提供「按错误 ID 查看前序行为」视图，自动高亮最后 3 条关键操作（如登录 → 进入订单页 → 点击支付）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
