Когда пользователь нажимает кнопку отчёта, происходит довольно много такого, чего он не видит. Ниже — всё по порядку и зачем нужна каждая часть.
Логи консоли, в том числе из прошлого
Очевидный сигнал с неочевидной деталью: BugDump собирает логи, записанные до того, как открыли виджет.
Это важнее, чем кажется. В реальном баг-репорте последовательность почти никогда не выглядит как «случилась ошибка, пользователь сразу о ней сообщил». Обычно так: случилась ошибка, страница незаметно сломалась, пользователь попробовал ещё три вещи, запутался и сообщил о проблеме через четыре минуты.
Сборщик, который включается в момент отчёта, запишет эти четыре минуты растерянности и пропустит ошибку, которая их вызвала. SDK ставит сборщик консоли при инициализации, поэтому исходная ошибка всё ещё на месте, когда отчёт наконец отправляют.
Сетевые запросы
Метод, URL, статус, тайминги. Именно здесь живёт большинство багов — не в коде фронтенда, а в ответе, который фронтенд получил.
Тела запросов и ответов доступны через captureNetworkBodies, и по умолчанию они выключены. Так задумано. Именно в телах вероятнее всего окажутся токены авторизации, персональные и платёжные данные. Их сбор должен быть вашим решением, а не унаследованной настройкой.
Даже без тел кодов статуса и таймингов хватает для большинства багов. Ответ 500 прямо перед тем, как пользователь сдался, — это ваш баг. Ответ 200, который шёл девять секунд, — тоже ваш баг, и о нём трекер ошибок вам не сообщил.
Скриншоты и инструмент размытия
Скриншоты бывают двух видов, и стоит понимать, чем приходится платить за каждый.
screen-capture использует getDisplayMedia. Он точен до пикселя: canvas, видео, iframe с других доменов, нативные выпадающие списки — всё снимается ровно так, как отрисовано. Цена — диалог разрешения в браузере.
dom рендерит снимок из DOM с помощью html2canvas. Запроса нет, а значит, нет и лишнего шага, но содержимое canvas и iframe с других доменов могут не попасть в снимок.
По умолчанию BugDump использует screen-capture и автоматически переключается на dom, если пользователь не дал разрешения. Из-за отказа скриншот может стать хуже, но отчёт не должен пропасть.
Дальше — пометки: стрелка, прямоугольник, карандаш, текст и размытие. Отдельно стоит сказать о размытии: это средство защиты приватности, замаскированное под инструмент рисования. Данные скрываются в браузере, и размытая область никогда не загружается на сервер. Пользователи, которые иначе не стали бы отправлять скриншот страницы с данными клиентов, теперь могут это сделать.
Воспроизведение сессии
Запись изменений DOM во времени, сделанная rrweb. Не видео, а воспроизведение настоящего документа, который можно исследовать.
Воспроизведение окупается на тех багах, где в консоли чисто, в сети чисто, а пользователь твёрдо уверен, что что-то сломалось. Обычно он прав, и обычно сделал он не то, что описал. Воспроизведение показывает разницу.
Действия
Клики, ввод и переходы, по порядку.
Самый скромный сигнал и один из самых полезных: это ваши шаги воспроизведения — записанные, а не вспомненные. «Шаги воспроизведения» пользователи заполняют хуже всего, а нужны они больше всего. Поэтому я перестал спрашивать и начал записывать.
Голосовые заметки
Некоторые пользователи не напишут и трёх предложений, но охотно поговорят секунд двадцать. А раздражение несёт информацию, которую текст сглаживает: по голосу слышно, на каком шаге у человека кончилось терпение.
Тайминги производительности
Время загрузки страницы и ресурсов — для отчётов, которые на деле о медленной работе. «Приложение тормозит» — настоящий баг-репорт, но без таймингов его невозможно ни подтвердить, ни опровергнуть.
Метаданные
Браузер, ОС, размер вьюпорта, URL страницы, время.
Вьюпорт — тёмная лошадка. Удивительно большая доля отчётов «кнопка не работает» — это баги вёрстки на ширине, которую никто не тестировал. Пользователи почти никогда не догадываются указать размер окна. Это одно число, оно записывается автоматически и закрывает целую категорию багов, которые иначе по-настоящему трудно воспроизвести.
Чего BugDump намеренно не делает
Не требует, чтобы автор отчёта представился. Имя и email спрятаны в свёрнутом разделе. Отчёт без имени — всё равно отчёт, а форма, которая требует представиться, получает их меньше.
Не требует заголовка, категории, серьёзности или приоритета. Это поля для разбора, переодетые в поля отчёта. Пользователи их угадывают, угадывают неправильно, и вы всё равно разбираете отчёт заново. Обязательное поле одно — описание.
Не протекает в вашу страницу. Виджет рендерится в Shadow DOM. Ваш CSS до него не дотягивается, а его CSS — до вас.
Одно правило для всех сигналов
Каждый сигнал здесь подчиняется одному правилу: если браузер уже это знает, пользователю не нужно об этом говорить.
Дело пользователя — одно предложение о том, чего он ожидал. Всё остальное — моя забота, и бо́льшую часть уже сделал браузер.
Читайте также
Как собрать логи консоли и сетевые запросы из браузера пользователя — как перехватить console, ошибки, fetch и XHR и не сломать страницу, за которой следите.
Воспроизведение сессии без слежки — запись, привязанная к отчёту, размытие в браузере до отправки и тела запросов, выключенные по умолчанию.
Шаблон баг-репорта, который работает (и как его автоматизировать) — шаблон, который можно скопировать, и почему всё, что знает браузер, из формы стоит убрать.