Published on

错误信息监控与收集指南

Authors
  • avatar
    Name
    hpoenixf
    Twitter

引言

在开发过程中，错误监控是非常重要的一部分。它不仅能够帮助我们快速发现和定位问题，还可以改善用户体验。这篇文章通过对常见错误来源的分析，总结了如何高效地收集错误信息的方法。

错误发生的环节分析

当用户报告白屏问题时，我们需要快速判断问题的根源。以下是按照页面访问顺序可能发生的错误环节：

  1. 用户网络问题：

    • 用户未连接网络。
    • DNS 域名劫持。
    • HTTP 劫持。

  2. 资源加载失败：

    • CDN 或资源文件访问出错。
    • 服务器错误。
    • 接口请求失败。

  3. 前端代码问题：

    • 前端代码运行错误。
    • 浏览器兼容性问题（CSS 或 JS）。
    • 设备屏幕尺寸兼容问题。

  4. 客户端问题：

    • WebView 或其他客户端组件错误。
    • 被覆盖的页面元素。

  5. 用户操作问题：

    • 用户操作错误或意外行为。

收集哪些信息

针对以上可能的错误环节，我们需要收集以下用户信息：

基本用户信息

  • 网络状态。
  • 运营商。
  • 地理位置。
  • 访问时间。
  • 客户端版本（如果是通过客户端访问）。
  • 系统版本。
  • 浏览器信息。
  • 设备分辨率。
  • 页面来源。
  • 用户账号信息。

页面访问流程信息

  • 各阶段耗时（如 DNS 查询时间、资源加载时间等）。
  • JS 报错信息（堆栈、文件、行号等）。

其他信息（参考 Google Analytics）

  • 浏览器语言设置。
  • 用户浏览器语言编码。
  • Flash 的版本。
  • 页面标题。
  • 页面来源。
  • Cookie 数据。

如何发现白屏问题

以下是几种常见的白屏检测方法：

  1. 超时检测：

    • N 秒未触发 onload 事件。
    • N 秒后页面仍然是白的。
    • N 秒后 DOM 元素少于 X 个。

  2. 主动触发：

    • 在代码中主动检测页面状态并触发告警。

如何收集错误信息

前端错误信息收集的主流方法有两种：

1. 虚拟机监控

优点：指标齐全，可监控竞品。 缺点：反映不全，容易失真。

  • 图片对比：
    • 定时使用虚拟机访问页面并截图，进行相似度比对。
  • HTML 抓取：
    • 定时抓取页面的 HTML 源码，分析是否异常。

2. 脚本监控

优点：可收集真实数据。 缺点：可能影响性能，采样较少时数据失真。

以下是脚本监控的具体实现方法：

各阶段访问耗时记录

使用 Performance API

  1. Performance Timing performance.timing 可记录页面访问的各阶段时间。

    示例时间点：

    • DNS 查询耗时：domainLookupEnd - domainLookupStart
    • TCP 连接耗时：connectEnd - connectStart
    • 请求耗时：responseEnd - responseStart
    • 白屏时间：responseStart - navigationStart
    • DOM Ready 时间：domContentLoadedEventEnd - navigationStart
    • 页面加载完成时间：loadEventEnd - navigationStart

  2. Performance.getEntries() performance.getEntries() 返回页面资源的加载数据。每个资源包含以下属性：

    • name：资源地址。
    • duration：请求耗时。

脚本错误信息收集

1. window.onerror

window.onerror 可捕获运行时错误，包括错误信息、堆栈、文件名、行号和列号。

注意事项：

  • 执行顺序：window.onerror 的代码块需要优先于其他脚本执行。
  • 跨域资源：跨域脚本需要设置 <script> 的 crossorigin 属性，并确保服务器设置了 Access-Control-Allow-Origin。
  • 返回值：返回 true 时可以阻止错误继续抛出。

示例：

window.onerror = function (message, source, lineno, colno, error) {
  console.error(`Error: ${message} at ${source}:${lineno}:${colno}`);
};

前端错误捕捉与监控总结

1. try...catch 的使用与局限性

特性

  • 捕捉范围：

    • try...catch 只能捕捉运行时错误，无法捕捉语法错误。
    • 可获取错误的详细信息，包括：
      • 错误消息。
      • 堆栈信息。
      • 出错的文件、行号和列号。

  • 局限性：

    • 无法捕获异步代码的异常，例如：
      • 回调函数。
      • setTimeout 和 setInterval。
      • Promise 异常（未添加 .catch() 时）。
    • 要实现全面的错误捕捉，需要借助工具在所有函数块或文件块中注入 try...catch，并在此阶段打入更多静态信息。

2. API 出错监控与上报

实现方式

  • 请求监控：

    • 捕捉接口请求的错误或异常情况，并将相关信息上报。

  • 实现方案：

    • 拦截 API 请求，记录出错信息（状态码、响应时间、错误信息等）。
    • 如果接口异常，则触发上报机制。

3. 性能信息监控

常用方法

  • performance.timing：

    • 使用浏览器性能 API 提取页面性能指标，包括：
      • DNS 查询时间。
      • TCP 连接时间。
      • 白屏时间。
      • 页面加载时间等。

  • 事件监听：

    • 监听 onload 和 DOMContentLoaded 事件，获取页面加载关键节点的性能信息。

  • DOM 检测：

    • 检测页面中 DOM 元素数量，监控页面复杂度。
    • 检测页面中最大面积的元素加载完成情况，分析用户首次可见内容。

4. 用户行为监控

监控范围

  • 事件监听：

    • 监听用户在页面上的滚动、点击等交互行为，记录用户路径。

  • 业务行为：

    • 主动上报用户的关键操作（例如按钮点击、表单提交等）。

  • API 请求监控：

    • 监控接口调用、错误请求或异常响应。

5. 数据上报的实现方式

常见方法

  1. 通过 AJAX 上报：

    • 使用前端 AJAX 请求将监控信息发送至后端接口。

  2. 创建图片上报：

    • 动态创建 <img> 标签，通过 URL 参数携带错误信息上报。
    • 推荐使用 GIF，原因包括：
      • 简单方便且支持跨域。
      • 防止重复请求。
      • 服务器端不需要响应，降低性能开销。

  3. navigator.sendBeacon：

    • 保证在用户关闭页面前，可靠地将数据发送到服务器。
    • 适用于离线日志或页面卸载时的关键事件上报。

6. 无埋点与可视化埋点

  • 无埋点：

    • 生成页面的唯一标识，监听用户的事件行为。
    • 在 DOM 节点中埋下标识点，方便错误和行为定位。

  • 可视化埋点：

    • 提供一个图形化界面，通过拖拽或点击的方式快速配置监控点。
    • 自动生成埋点代码，无需手动修改业务代码。

7. 总结

前端错误捕捉与监控需要覆盖多个方面，包括运行时错误、API 异常、性能指标和用户行为。实现高效监控的关键是设计合理的上报机制，并结合无埋点或可视化埋点工具，降低维护成本，提升监控的覆盖范围和精准度。

View on GitHub