BugDrop

Что такое BugDrop?

BugDrop — бесплатный open source виджет обратной связи для сайта, который собирает проблемы, сообщаемые пользователями, прямо с вашего сайта, и автоматически превращает их в GitHub Issues. Он предоставляет плавающую кнопку «Bug», позволяющую пользователям делать скриншоты, аннотировать проблемы и отправлять контекст для отладки.

Виджет интегрируется с репозиторием GitHub через GitHub App и тег script. Когда кто-то отправляет отзыв, BugDrop создаёт полностью отформатированный GitHub issue с скриншотами пользователя и системной информацией.

Ключевые возможности

• Плавающая кнопка обратной связи на сайте: упрощает посетителям сообщение о проблемах без ухода со страницы.
• Захват скриншотов (полная страница или конкретный элемент): сохраняет визуальные доказательства багов и проблем UI.
• Инструменты аннотации (рисование, стрелки, прямоугольники): позволяют отправителям выделить точное место проблемы.
• Категории отзывов с автоматическими GitHub-метками (Bug, Feature, Question): организует отправки с一致ным тегированием в GitHub.
• Автоматический захват системной информации: фиксирует браузер, ОС, viewport и другие детали для триажа.
• Настраиваемый UI виджета через data-атрибуты: кастомизируйте шрифты, цвета, границы, тени, радиус и другие параметры под вашу дизайн-систему.
• Приоритет приватности: без трекинга, без cookies, URL маскируются.

Как использовать BugDrop

1. Установите GitHub App из GitHub Marketplace для вашего репозитория (источник указывает «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-* атрибутов (theme, position, button text/label, colors, borders, shadows и др.).

Сценарии использования

• Сбор визуальных отчётов о багах в веб-UI: пользователи захватывают скриншоты полной страницы или целевых элементов и аннотируют проблемную область.
• Триаж отзывов разных типов: классифицируйте входящие отчёты как Bug, Feature или Question для прибытия в GitHub с соответствующими метками.
• Отладка проблем окружения пользователя: включайте данные о браузере/ОС/viewport и системную информацию в каждый GitHub issue для ускорения воспроизведения.
• Адаптация виджета под дизайн продукта: применяйте темы и стили (шрифты, цвета, радиус границ, стили теней) через data-атрибуты.
• Снижение трения по сравнению с ручным созданием issues: посетители отправляют отзывы со страницы, а BugDrop создаёт соответствующий GitHub issue со скриншотами.

FAQ

Создаёт ли BugDrop GitHub issues автоматически?

Да. Виджет отправляет отзывы в ваш репозиторий GitHub как отформатированный issue со скриншотами и системной информацией.

Какую информацию BugDrop включает в отправку?

BugDrop захватывает скриншоты (полная страница или конкретный элемент), аннотации и системные данные: браузер, ОС, viewport и др.

Можно ли кастомизировать внешний вид и положение виджета?

Да. Виджет поддерживает настройку через data-* атрибуты: theme (light/dark/auto), position (bottom-right/bottom-left), шрифты, цвета, границы, радиус, тени.

Есть ли трекинг или cookies?

BugDrop privacy-first: без трекинга, без cookies, URL маскируются.

Как подключить виджет к репозиторию?

Установите GitHub App для репозитория и добавьте тег script на сайт с атрибутом data-repo="owner/repo".

Альтернативы

• Другой виджет обратной связи для сайта, создающий тикеты/issues: похожий workflow (сбор отзывов со страницы), но может использовать другой трекер или форматы отправок.
• Общие инструменты отчётов о багах с ручными скриншотами и формами: вместо автоматического захвата скриншотов и создания GitHub issues требуют заполнения формы и/или прикрепления файлов.
• Нативные workflows GitHub для issues (например, шаблоны или формы issues): всё внутри GitHub, но отчётность выносится за пределы встроенного в страницу виджета.
• Виджеты тикетов поддержки клиентов: встроенная в сайт обратная связь, но часто маршрутизируется в inbox поддержки, а не в GitHub Issues.