Как сообщить об ошибке в хорошем браузере

Информирование производителей браузеров о проблемах, обнаруженных в их браузерах, является неотъемлемой частью улучшения веб-платформы.

Пит ЛеПейдж
Роберт Найман

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

Убедитесь, что это ошибка

Первый шаг — выяснить, каким должно быть «правильное» поведение.

Каково правильное поведение?

Проверьте соответствующие API-документы на MDN или попробуйте найти соответствующие спецификации. Эта информация может помочь вам решить, какой API на самом деле сломан, где он сломан и каково ожидаемое поведение.

Работает ли в другом браузере?

Поведение, которое отличается между браузерами, обычно имеет более высокий приоритет как проблема взаимодействия, особенно когда браузер, содержащий ошибку, является лишним. Попробуйте протестировать на последних версиях Chrome, Firefox, Safari и Edge, возможно, используя такой инструмент, как BrowserStack .

Если возможно, проверьте, что страница не ведет себя намеренно по-другому из-за сниффинга user agent. В Chrome DevTools попробуйте установить строку User-Agent на другой браузер .

Он сломался в недавнем релизе?

Работало ли это как ожидалось в прошлом, но сломалось в недавнем выпуске браузера? Такие регрессии можно устранить гораздо быстрее, особенно если указать номер версии, где это работало, и номер версии, где это не удалось. Вы можете использовать такие инструменты, как BrowserStack , для проверки старых версий браузера. Используйте такие инструменты, как инструмент bisect-builds (для Chromium), для поиска изменений.

Если проблема представляет собой регрессию и ее можно воспроизвести, основную причину обычно можно быстро найти и устранить.

Наблюдается ли та же проблема у других?

Если у вас возникли проблемы, есть большая вероятность, что и у других разработчиков они тоже есть. Сначала попробуйте поискать ошибку на Stack Overflow . Это может помочь вам перевести абстрактную проблему в конкретный сломанный API, а также найти краткосрочное решение, пока ошибка не будет исправлена.

Сообщалось ли об этом ранее?

Как только вы поймете, в чем заключается ошибка, пора проверить, не сообщалось ли об этой ошибке ранее, выполнив поиск в базе данных ошибок браузера.

Если вы нашли существующую ошибку, которая описывает проблему, добавьте свою поддержку, отметив звездочкой, добавив в избранное или прокомментировав ошибку. И на многих сайтах вы можете добавить себя в список CC и получать обновления, когда ошибка изменится.

Если вы решили прокомментировать ошибку, включите информацию о том, как ошибка влияет на ваш сайт. Избегайте добавления комментариев в стиле «+1», так как баг-трекеры обычно отправляют электронные письма для каждого комментария.

Сообщить об ошибке

Если об ошибке ранее не сообщалось, самое время сообщить о ней производителю браузера.

Создайте минимизированный тестовый пример

У Mozilla есть отличная статья о том, как создать минимальный тестовый случай . Короче говоря, хотя описание проблемы — это отличное начало, ничто не сравнится с предоставлением связанной демонстрации в ошибке, которая показывает проблему. Чтобы максимизировать шансы быстрого прогресса, пример должен содержать минимально возможный код, необходимый для демонстрации проблемы. Минимальный пример кода — это первое, что вы можете сделать, чтобы увеличить шансы на исправление вашей ошибки.

Вот несколько советов по минимизации тестового случая:

  • Загрузите веб-страницу, добавьте <base href="https://original.url"> и проверьте, что ошибка существует локально. Для этого может потребоваться работающий HTTPS-сервер, если URL использует HTTPS.
  • Протестируйте локальные файлы на последних сборках как можно большего количества браузеров.
  • Попробуйте сжать все в один файл.
  • Удаляйте код (начиная с тех частей, которые, как вы знаете, не нужны) до тех пор, пока ошибка не исчезнет.
  • Используйте контроль версий, чтобы иметь возможность сохранять свою работу и отменять ошибки.

Разместите минимизированный тестовый пример

Если вы ищете хорошее место для размещения своего минимизированного тестового примера, есть несколько хороших мест:

Имейте в виду, что некоторые из этих сайтов отображают контент в iframe, что может привести к разному поведению функций или ошибкам.

Подайте заявку на вашу проблему

Как только вы получите свой минимальный тестовый случай, вы готовы подать этот баг. Перейдите на нужный сайт отслеживания ошибок и создайте новую проблему.

Добавьте четкие описания и шаги для воспроизведения

Во-первых, дайте четкое описание, чтобы помочь инженерам быстро понять, в чем заключается проблема, и помочь в ее устранении.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

Далее предоставьте подробные шаги, необходимые для воспроизведения проблемы. Вот где вам понадобится ваш минифицированный тестовый случай .

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

И наконец, опишите ожидаемый и фактический результат.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Для получения дополнительной информации ознакомьтесь с рекомендациями по написанию отчетов об ошибках на MDN.

Бонус: добавьте снимок экрана или скринкаст проблемы

Хотя это и не обязательно, часто бывает полезно добавить снимок экрана или скринкаст проблемы. Это особенно полезно, когда ошибки возникают после нескольких шагов или необычной активности. Скринкасты и скриншоты часто могут лучше продемонстрировать, что произошло, разработчикам браузера.

Включите сведения об окружающей среде

Некоторые ошибки воспроизводятся только на определенных операционных системах или только на определенных типах дисплеев (например, с низким или высоким разрешением). Обязательно укажите сведения о любых тестовых средах, которые вы использовали.

Сообщить об ошибке

Наконец, отправьте сообщение об ошибке. Следите за своей электронной почтой для ответов на ошибку. Обычно во время расследования у инженеров могут возникнуть дополнительные вопросы. Если у них возникнут трудности с воспроизведением проблемы, они могут связаться с вами.