Отчеты об ошибках от конечных пользователей - это то, с чем приходится иметь дело большинству из нас, разработчиков. Процесс сбора достаточного количества информации для воспроизведения ошибки довольно утомителен, и время цикла от отчета об ошибке конечного пользователя до доставленного исправления ошибки обычно велико. Это то, что мы много пережили в Bryntum, и мы решили попробовать что-то с этим сделать.

На SenchaCon 2016 в Лас-Вегасе я продемонстрировал ранний прототип инструмента, который теперь превратился в полноценный сервис для мониторинга и воспроизведения ошибок в веб-приложениях. Прежде чем описывать нашу новую услугу, давайте сначала поговорим об отладке и производительности.

Производительность отладки разработчика

Как разработчики, мы сталкиваемся с сообщениями об ошибках самого разного качества и содержания. Время, необходимое разработчику для воспроизведения и исправления ошибки, обычно пропорционально качеству отчета об ошибке. Наихудший отчет об ошибке - это тот, в котором просто говорится: «Функция X не работает». В этом случае разработчики не имеют ни малейшего представления о том, как именно это «не работает» и при каких обстоятельствах. Исследование такого отчета об ошибке требует много времени и ресурсов. Он включает в себя обращение к пользователю для сбора пошагового описания, попытку воспроизвести проблему и, наконец, ее исправление.

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

Лучший отчет об ошибке будет содержать минимальный набор шагов, необходимых для воспроизведения ошибки и стека вызовов исключения. Стеки вызовов очень полезны, потому что они указывают на место в коде, вызвавшее исключение. Но иногда этого просто недостаточно, рассмотрите этот стек вызовов (настоящий отчет о сбоях, зарегистрированный в нашей учетной записи RootCause):

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

Идеальный отчет об ошибке

Итак, каков идеальный отчет об ошибке? Очевидно, что для разработчиков идеальный отчет об ошибке - это неудачный модульный тест. Такой тест будет содержать все шаги по воспроизведению ошибки. Кроме того, разработчик может приостановить отладчик при возникновении исключения и проверить все внутреннее состояние кода, который привел к проблеме («живой» стек вызовов).

Это исследование внутренних переменных очень важно, так как оно предоставляет разработчику «контекст» отладки. После того, как разработчик может решить проблему в отладчике браузера, ошибка обычно устраняется за несколько минут (при условии, что это что-то простое) или, по крайней мере, процесс исправления ошибки становится простым, поскольку все становится ясно, как только проблема может быть воспроизведена. . Следующий вопрос - как научить конечных пользователей отправлять идеальные отчеты об ошибках в виде неудачных модульных тестов? К счастью, в этом нет необходимости, потому что RootCause решает эту проблему за нас.

RootCause - Превращение ошибок веб-сайтов в тестовые наборы

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

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

RootCause состоит из трех основных частей:

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

Настройка клиента регистратора за 5 минут

Чтобы начать мониторинг своего веб-приложения, добавьте на свою страницу скрипт логгера RootCause и настройте его в соответствии с вашими потребностями:

<script src="//app.therootcause.io/rootcause-full.js"></script>
<script> 
new RC.Logger({ 
     recordUserActions : true, 
     logResourceLoadFailures : true, 
     applicationId : 'yourAppId', 
     logAjaxRequests : true, 
     captureScreenshot : true,
     recordSessionVideo : true
}); 
</script>

Когда приведенный выше фрагмент выполняется, RootCause начинает прослушивать событие окна error. Если настроено с включенным recordUserActions, регистратор также будет записывать действия пользователя, такие как перемещение / щелчок мыши и ввод с клавиатуры. Включите опцию recordSessionVideo, чтобы записывать видео сеанса. Кроме того, вы также можете захватывать трафик Ajax, сообщения консоли и другие интересные события, которые полезны при отладке.

При возникновении необработанной ошибки эта информация отправляется через безопасное соединение HTTPS на сервер RootCause (или на ваш частный сервер для локальной установки). Вы будете немедленно уведомлены через Slack, или вы можете выбрать получение сводного отчета по электронной почте с любым интервалом от минут до дней.

Приложение панели управления RootCause

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

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

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

Воспроизведение сеанса пользователя - в прямом эфире

На странице сведений есть кнопка воспроизведения, которая открывает сеанс в прямом эфире в студии воспроизведения. Это уникальная и мощная функция RootCause, где вы можете воспроизвести сеанс пользователя, чтобы полностью воспроизвести ошибку в вашем собственном браузере. Вы избегаете утомительной трудоемкой работы по обнаружению и самостоятельному выполнению пошаговой последовательности.

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

Сбор отзывов пользователей вручную

Сообщение об исключениях JavaScript довольно легко автоматизировать, но есть и другие источники ошибок и вещей, которые раздражают конечных пользователей. Невозможно автоматически обнаруживать ошибки CSS, ошибки макета / дизайна или просто плохой UX приложения. Например, вот простая кнопка HTML с установленной фиксированной шириной и текстом, который слишком длинный для размещения.

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

Этот отчет обратной связи позволяет пользователю выделить область на странице и отправить свое имя и сообщение на вашу панель управления RootCause. Благодаря этой информации разработчику становится ясно, о какой части приложения имеет в виду пользователь.

Конфиденциальные данные

Поскольку RootCause регистрирует большое количество данных во время сеанса пользователя, он также предоставляет несколько способов соблюдения данных и конфиденциальности пользователя. Например, диалоговое окно подтверждения может быть показано конечному пользователю, чтобы получить его или ее одобрение перед регистрацией ошибки. Вы также можете размыть конфиденциальные данные до того, как будет сделан снимок экрана, и использовать API для удаления любых нежелательных данных из сеанса до их регистрации. Более подробно об этом есть в документации.

Преимущества использования RootCause

Мы используем этот инструмент в нашей компании в течение последних 18 месяцев и выявили три основных преимущества:

1. Бесплатная помощь при тестировании
На нашем веб-сайте Bryntum мы демонстрируем все наши компоненты пользовательского интерфейса JavaScript, такие как диаграммы Ганта и доски Канбан. У нас включена функция RootCause в наших онлайн-примерах, поэтому, если посетители сталкиваются с ошибкой на нашем сайте, они неосознанно помогают нам улучшать наши продукты. Мы получаем понятный и работоспособный тестовый пример, не затрачивающий ни времени, ни усилий.

2. Автоматизация отчетов об обратной связи от конечных пользователей
Сбор отзывов с помощью кнопок обратной связи был популярен уже давно. RootCause можно настроить для отображения настраиваемой кнопки обратной связи для удобного сбора визуальных отчетов, отчетов об ошибках CSS, UX или запросов функций. Создание снимка экрана автоматически вместе с сообщением пользователя намного быстрее, чем принуждение пользователя вручную сделать снимок экрана и прикрепить его к электронному письму или заявке в системе отслеживания ошибок.

3. Автоматизация взаимодействия разработчика и контроля качества
Если у вас есть ручные тестировщики, тестирующие ваше приложение, RootCause избавит вас от многих утомительных ручных отчетов. Когда тестировщик обнаруживает исключение, оно автоматически регистрируется, и статус ошибки немедленно отображается тестеру (новая / воспроизведенная / исправленная). Не нужно делать скриншоты вручную и прикреплять их к заявке.

Океаны спасенного времени

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

Если вы готовы попробовать новый способ отладки, перейдите на https://therootcause.io и зарегистрируйтесь бесплатно. Мы предлагаем несколько различных планов, от бесплатного плана для любителей до корпоративного плана с множеством дополнительных функций. Также доступен пакет Docker для локальной установки.

Удачной охоты за ошибками!

Первоначально опубликовано на www.sencha.com 11 апреля 2017 г.