产品能力

前端错误监控

了解自动捕获的错误类型、上下文、去重和限流机制,以及如何主动报告业务异常。

前端错误发生在用户浏览器中,服务端日志不一定能看到。TraceVista SDK 从全局异常、资源加载和请求链路捕获常见失败,并附带足够的页面上下文帮助复现。

自动捕获范围

类型触发来源典型例子
js_errorwindow.error空对象取值、未定义函数、运行时异常
promise_errorunhandledrejection异步请求或 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 后,当前客户端停止继续上报,避免反复请求。
  • 自定义数据会限制深度、字段数和字符串长度,循环引用会被安全处理。

定位建议

  1. 先按错误类型和消息聚合,找影响次数和页面范围最大的错误。
  2. 通过堆栈定位源代码;生产环境应妥善保留对应构建产物与 Source Map。
  3. 检查浏览器、设备和页面是否集中在特定环境。
  4. 结合面包屑和接口错误判断用户在异常前执行了什么操作。
  5. 修复后继续观察错误趋势,避免只以“本地无法复现”作为结束条件。