BugDrop

BugDrop 是什么？

BugDrop 是一个免费的开源网站反馈小组件，直接从你的网站收集用户报告的问题，并自动转换为 GitHub Issues。它提供一个浮动的“Bug”按钮，让用户捕获截图、标注问题，并提交调试上下文。

该小组件通过 GitHub App 和脚本标签与 GitHub 仓库集成。当有人提交反馈时，BugDrop 会创建一个包含用户截图和系统信息的完整格式化 GitHub 问题。

主要功能

• 网站上的浮动反馈按钮：让访客轻松报告问题，无需离开页面。
• 截图捕获（全页面或特定元素）：帮助保留 bug 和 UI 问题的视觉证据。
• 标注工具（绘制、箭头、矩形）：让提交者精确突出问题位置。
• 反馈类别与自动 GitHub 标签（Bug、Feature、Question）：组织提交，确保在 GitHub 中一致标记。
• 自动系统信息捕获：记录浏览器、OS、视口等细节，支持问题分类。
• 通过 data 属性自定义小组件 UI：调整字体、颜色、边框、阴影、圆角等，以匹配你的设计系统。
• 隐私优先处理：无跟踪、无 Cookie，且 URL 被脱敏。

如何使用 BugDrop

1. 从 GitHub Marketplace 为你的仓库安装 GitHub App（源列出“bugdrop-in-app-feedback-to-github-issues”）。
2. 将小组件脚本添加到你的网站，并设置 data-repo 属性为你的 owner/repo。
   • 示例：

     <script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>
     

3. 验证小组件出现，用户可提交反馈。
4. （可选）使用文档化的 data-* 属性配置样式和小组件行为（主题、位置、按钮文本/标签、颜色、边框、阴影等）。

使用场景

• 收集 web UI 问题的视觉 bug 报告：用户可捕获全页面或针对性截图，并标注问题区域。
• 分类型处理反馈：将传入报告分类为 Bug、Feature 或 Question，确保抵达 GitHub 时带有匹配标签。
• 调试用户环境问题：每个 GitHub 问题包含浏览器/OS/视口及相关系统信息，加速复现。
• 匹配小组件与产品设计：使用 data 属性应用不同主题和样式令牌（字体、颜色、边框圆角、阴影样式）。
• 减少手动创建问题时的摩擦：访客从页面提交反馈，BugDrop 自动生成带截图的对应 GitHub 问题。

常见问题

BugDrop 会自动创建 GitHub 问题吗？

是的。小组件将反馈发送到你的 GitHub 仓库，作为包含截图和系统信息的格式化 GitHub 问题。

BugDrop 在提交时包含哪些信息？

BugDrop 捕获截图（全页面或特定元素）、标注，以及浏览器、OS 等系统信息，外加视口细节。

可以自定义小组件的外观和位置吗？

是的。小组件支持通过 data-* 属性自定义，包括主题（light/dark/auto）、位置（bottom-right/bottom-left），以及字体、颜色、边框、圆角、阴影等样式选项。

是否涉及跟踪或 Cookie？

BugDrop 强调隐私优先：无跟踪、无 Cookie，且脱敏 URL。

如何将小组件连接到我的仓库？

为你的仓库安装 GitHub App，并将带 data-repo="owner/repo" 属性的脚本标签添加到网站。

替代方案

• 另一个创建工单/问题的网站反馈小组件：类似工作流（从页面收集反馈），但可能使用不同问题跟踪器或接受不同提交格式。
• 依赖手动截图和表单的通用 bug 报告工具：不像自动捕获截图并创建 GitHub 问题，这些通常要求用户填写表单和/或附件文件。
• GitHub 原生问题收集工作流（如问题模板或问题表单）：一切留在 GitHub 内，但报告步骤移出页面嵌入式小组件。
• 客户支持工单小组件：提供网站嵌入反馈，但通常将提交路由到支持收件箱而非 GitHub Issues。