Виджет баг-репорта (скриншот, контекст, голос и запись экрана)

Что даёт владельцу сайта виджет баг-репорта

Из короткой записки посетителя обычно не видно, какая страница была открыта, в каком браузере всё случилось и что нажимали перед сбоем. Разработчику приходится переспрашивать. Виджет баг-репорта в Bugfix убирает этот обмен письмами: он собирает такие подробности в тот момент, когда человек сообщает о проблеме.

Плавающая кнопка открывает форму с четырьмя типами сообщения: баг, идея, «непонятно» и отзыв. Сообщение превращается в задачу у владельца сайта, а посетитель получает ответ. Тот же центр раздаёт и другие виджеты семейства Bugfix, например отзывы и веб-чат, поэтому у сайта одно место, куда приходят все сообщения посетителей.

Путь отчёта от кнопки до разработчика

1. Посетитель нажимает плавающую кнопку и выбирает тип сообщения.
2. Виджет снимает скриншот видимого экрана библиотекой html2canvas. Если браузер не справился за 7 секунд, форма продолжает работать без картинки, а кнопки отметки, элемента и записи остаются.
3. Посетитель добавляет подробности инструментами формы: ✏️ рисует поверх скриншота, 📍 указывает элемент страницы (запоминаются его CSS-селектор и рамка), 🎬 записывает экран через rrweb, 🎤 записывает голосовое сообщение, 📎 прикладывает файл. Скриншот можно и вставить из буфера обмена сочетанием Cmd/Ctrl+V.
4. Технический контекст виджет добавляет сам.
5. Посетитель отправляет сообщение. Оно становится задачей, а ответ возвращается к автору.

Esc закрывает окно, и вместе с окном выключается микрофон. Приложенная картинка превращается в JPEG размером до 2000 пикселей.

Контекст, который приходит с каждым отчётом

Спрашивать у посетителя технические детали не нужно: каждый отчёт, пришедший через виджет баг-репорта, уже содержит их.

• адрес страницы и размер окна;
• ошибки консоли и сетевые запросы;
• последние шаги пользователя, до 20;
• язык страницы и языковой конфликт, если он есть;
• устройство и браузер, часовой пояс и тип сети;
• время сессии и элемент, который отметил человек;
• контакт посетителя: браузер запоминает его до следующего раза.

Внешний вид кнопки и окна задаёт один из десяти готовых скинов: terminal, steel, blue, red, glass, ink, neon, keycap, soft и brand. Тексты подстраиваются под язык сайта, а на узких экранах окно переносит ряд кнопок.

Где применяется виджет баг-репорта

• Поехала вёрстка на телефоне. В отчёте есть размер окна, устройство и браузер, а скриншот показывает результат.
• Форма падает при отправке. Ошибки консоли и сетевые запросы лежат рядом со скриншотом, и разработчик начинает с фактов, а не с догадок.
• Человек не может объяснить проблему словами. Он рисует на скриншоте, указывает элемент или оставляет голосовое сообщение.
• Идеи и впечатления. Та же кнопка принимает идеи и отзывы, а не только поломки.

Подключение одним тегом

Виджет баг-репорта запускается одним тегом. Добавьте его на страницы, где должна появиться кнопка, и впишите ключ своего сайта в data-project:

<script src="https://bugfix.asibots.pro/loader.js" data-project="<ключ-сайта>" defer></script>

Загрузчик сам подтягивает актуальный виджет с центра Bugfix, поэтому улучшения приходят на все сайты без правок у владельца. Для сайтов, которые открывают из России без VPN, ассеты проксируются через домен самого сайта.

Ограничения и настройки сайта, которые стоит проверить

• Микрофон. Если сайт отдаёт заголовок Permissions-Policy: microphone=(), браузер запрещает микрофон без запроса. Виджет это определяет и сообщает посетителю, что голос выключен настройками сайта, и предлагает описать проблему текстом. Чтобы голос заработал, нужно значение microphone=(self).
• Превью. Чтобы работали превью скриншота и запись экрана, политика безопасности сайта должна разрешать blob: в img-src и media-src.
• Скриншот. Его снимает браузер, и если за 7 секунд не вышло, отчёт уходит без него.
• Хранение. Приём сообщений и хранение идут на инфраструктуре Bugfix: база Supabase и приватные хранилища для скриншотов, записи экрана и голоса. Приватные вложения открываются только через защищённую функцию, а не по прямой ссылке.

Частые вопросы

Сломается ли виджет баг-репорта, если скриншот не снялся?

Нет. Если браузер не смог снять скриншот за 7 секунд, форма продолжает работать без картинки. Кнопки отметки, элемента и записи остаются, а посетитель может вставить скриншот сочетанием Cmd/Ctrl+V или приложить файл.

Почему в форме написано, что голос выключен?

Сайт отдаёт заголовок Permissions-Policy: microphone=(), и браузер запрещает микрофон без запроса. Значение microphone=(self) это разрешает.

Как почтовый ящик защищён от спама?

Скрытое поле-ловушка ловит ботов. С одного устройства можно отправить не больше 10 сообщений в час и не чаще одного сообщения в 15 секунд.

Читайте также

• Запись сессии
• Баг-репорты в приложении
• Автоматизация баг-трекинга