13 апреля 2016, 14:27

Как, наконец, исправить баги конечных пользователей

Минский стартап Kuoll, разрабатывающий сервис, который помогает быстрее исправлять ошибки в веб-приложениях делится небольшой историей создания и подробностями работы сервиса.

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

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

Но никто не создал, и мы решили сделать его сами. Знакомьтесь, Kuoll. Kuoll позволяет разработчику веб-приложения проанализировать ошибку, которая пришла от конечного пользователя так, как если бы ошибка воспроизводилась в браузере разработчика.

Как это работает?

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

Чтобы программист мог точно понять, почему произошла ошибка, мы сохраняем:
— весь код веб-страницы и изменения (DOM-Mutations) которые происходят со страницей;
— действия пользователя на странице в виде событий браузера;
— сетевые запросы и ответы (включая заголовки и содержимое);
— JavaScript Errors;
— Запись в console;
— Причинно-следственные связи между этими событиями.

Пример простейшей цепочки причинно-следственный связей:

1) пользователь щёлкнул на кнопке;
2) поэтому произошёл запрос на сервер;
3) поэтому пришёл ответ сервера;
4) поэтому на страницу был добавлен новый элемент.

Попробуйте сами:

Зайдите на https://kuoll.github.io. Там можно поиграться с небольшим todo-приложением и потом посмотреть, как выглядит запись.

Лень щёлкать мышкой в todo-приложении? Можете посмотреть видео: http://www.kuoll.com/.