BugCapturer v1.0.1 诊断功能深度解析

V1.0.1 的新功能

BugCapturer V1.0.1 引入了一个强大的新功能:自动技术诊断收集。当你提交 Bug 报告时,该功能会自动捕获控制台错误和失败的网络请求,为开发者提供精确的诊断线索,大幅降低 Bug 复现成本。

为什么诊断很重要

当你报告一个 Bug 时,最有价值的信息并不总是屏幕上可见的。通常,真正的线索隐藏在:
  • 控制台错误: JavaScript 异常、警告和错误消息
  • 失败的网络请求: 返回 4xx/5xx 状态码的 API 调用
没有这些信息,开发者必须自己复现 Bug,打开 DevTools,然后寻找相关的错误。这可能需要几分钟甚至几小时。

工作原理

控制台错误收集

当你勾选"包含技术诊断"并提交报告时,BugCapturer 会自动捕获最多 10 条错误级别的控制台日志,包括:
  • 级别: 始终为"error"(我们不收集警告或信息)
  • 消息: 错误消息文本
  • 来源: 错误发生的文件、行号和列号(例如 app.js:142:8
这为开发者提供了开始调试的确切位置。

网络错误收集

BugCapturer 还会捕获最多 5 个失败的 HTTP 请求(状态码 ≥ 400),包括:
  • URL: 请求 URL(敏感参数已脱敏)
  • 方法: GET、POST、PUT、DELETE 等
  • 状态码: 404、500、403 等
  • 状态文本: "Not Found"、"Internal Server Error" 等

隐私优先设计

我们基于三个隐私原则构建了诊断收集功能:

1. URL 脱敏

敏感的 URL 参数会被自动替换为 *
  • tokenkeysecretpasswordauthaccess_tokenrefresh_tokenapi_keyprivate_keycredential
所以 https://api.example.com/data?token=abc123&user=john 会变成 https://api.example.com/data?token=*&user=john

2. 用户选择加入

"包含技术诊断"复选框默认勾选,但用户可以随时取消。如果未勾选,则不会收集任何诊断数据。

3. 一次性收集

诊断数据仅在提交报告的那一刻收集。没有后台监控,没有持续日志,没有数据累积。你看到的就是发送的内容。

技术实现细节

控制台错误捕获

BugCapturer 在扩展激活时挂钩浏览器的 console.error 方法。它将错误存储在最多 10 条的环形缓冲区中,只保留最近的错误。

网络错误捕获

使用 chrome.webRequest API,BugCapturer 监控已完成的网络请求,筛选状态码 ≥ 400 的请求。只存储脱敏后的 URL、方法和状态信息——不存储请求或响应体。

数据流

  • 用户激活 BugCapturer
  • 控制台和网络监控开始
  • 用户截图、标注、填写表单
  • 用户点击"发送邮件"
  • 如果启用了诊断,收集当前错误
  • 所有数据打包到邮件正文中
  • 邮件客户端启动,预填内容
  • 没有数据发送到任何服务器——一切都在邮件中
  • 开发者看到的内容

    当开发者收到包含诊断的 BugCapturer 报告时,邮件正文包括: 控制台错误部分:
    • 每个错误的消息和来源位置
    • 最多 10 条,最新的在前
    网络错误部分:
    • 每个失败请求的脱敏 URL、方法和状态
    • 最多 5 条,最新的在前
    这种结构化格式便于快速扫描和定位根本原因。

    影响

    用户的早期反馈显示:
    • Bug 报告中"需要更多信息"的来回沟通减少了 60%
    • 开发者可以立即开始调试,而不是先复现
    • 更精确的 Bug 报告带来更快的修复

    结论

    自动技术诊断是 BugCapturer 使命的自然延伸:让 Bug 报告尽可能快速和有效。通过自动收集开发者需要的技术上下文,我们消除了 Bug 报告过程中最耗时的部分——同时保持对隐私和数据安全的承诺。

    别再描述Bug了,
    直接展示它。
    永久免费,无需注册。几秒安装,今天就能发送你的第一份Bug报告。
    添加到 Chrome — 免费