产品能力
前端错误监控
了解自动捕获的错误类型、上下文、去重和限流机制,以及如何主动报告业务异常。
前端错误发生在用户浏览器中,服务端日志不一定能看到。TraceVista SDK 从全局异常、资源加载和请求链路捕获常见失败,并附带足够的页面上下文帮助复现。
自动捕获范围
| 类型 | 触发来源 | 典型例子 |
|---|---|---|
js_error | window.error | 空对象取值、未定义函数、运行时异常 |
promise_error | unhandledrejection | 异步请求或 Promise 链未处理拒绝 |
resource_error | 捕获阶段的资源错误 | Script、CSS、图片加载失败 |
api_error | 包装 Fetch / XMLHttpRequest | 网络失败、HTTP 4xx/5xx |
SDK 自己的上报请求会被排除,避免监控失败形成递归错误。
错误上下文
错误记录可能包含:
- 错误名称、消息和堆栈
- 当前 URL、路径、访客、会话和页面访问标识
- 资源 URL、接口状态码与请求耗时
- 最近最多 20 条导航和点击面包屑
- 调用
captureError()时提供的附加信息
点击面包屑只记录元素标签、ID 和最多两个 class,不记录输入内容和页面正文。
主动捕获业务异常
被业务代码处理过的异常不会再触发全局未处理事件,可以主动上报:
try {
await submitOrder()
} catch (error) {
await window.TraceVista.captureError(error, {
module: 'checkout',
action: 'submit_order'
})
showFriendlyMessage()
}
附加信息应该用于定位模块、操作和非敏感状态,不要放入密码、Token、身份证件或完整表单内容。
降噪机制
- 同类型、同消息、同一堆栈片段的错误在 3 秒内重复出现时会被抑制。
- 单个页面客户端每分钟最多发起 60 次监控上报。
- 额度接口返回 429 后,当前客户端停止继续上报,避免反复请求。
- 自定义数据会限制深度、字段数和字符串长度,循环引用会被安全处理。
定位建议
- 先按错误类型和消息聚合,找影响次数和页面范围最大的错误。
- 通过堆栈定位源代码;生产环境应妥善保留对应构建产物与 Source Map。
- 检查浏览器、设备和页面是否集中在特定环境。
- 结合面包屑和接口错误判断用户在异常前执行了什么操作。
- 修复后继续观察错误趋势,避免只以“本地无法复现”作为结束条件。
