DOU Проектор: как мы создавали Kuoll — веб-платформу для багфиксинга

От редакции:
В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на  Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. .

Идея

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

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

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

Реализация

Самый первый прототип был сделан за 2 дня. Я очень хотел убедить другого человека, что со мной стоит работать. Там много что не работало, а была только видимость функционала. Но это помогло хорошо объяснять другим людям, что я собираюсь сделать. Показывая прототип разным людям, я получал отличную обратную связь. Кроме того, так удалось привлечь в команду первых людей, которые видели как можно круто что-то делать и это их вдохновляло.

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

Самый первый прототип выглядел так: google chrome extension, который записывает весь код страницы при каждом изменении. И потом можно посмотреть набор этих страничек. Работало это очень медленно и только на специально созданном примере. Ночью, когда тихо, сделал первый скринкаст на 3 минуты, где показывал, как это работает. Позже написал пост с этим видео в Facebook группу минских тестировщиков. 500 просмотров, 50 регистраций. Нормально.

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

Как сейчас работает Kuoll

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

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

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

Многие переживают за приватность данных, поэтому пока пользователь не обратился в саппорт или пока не прозошёл js Error, собранные данные не покидают браузер пользователя. Приватные элементы страницы специально помечаются и не попадают в Kuoll-запись, а запросы на приватные URLы не записываются

Технологии

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

• Server: Google AppEngine — отлично масштабируется, простой деплоймент. Но в будущем хотим перейти на какой-нибудь более предсказуемый дешёвый сервис;
• Мы перешли с AngularJs на ReactJs, как-то быстрее идёт разработка. Компоненты  пишутся очень легко, цельная часть фреймворка;
• Код храним в закрытом беплатном репозитории BitBucket;
• Не стыдимся использовать Bootstrap. Поменяли цвета, шрифты;
• Много пишем на JavaScript. Grunt для сборки нам хорошо подходит. Много разных js библиотечек используем.

Для создания кастомных решений доступен API.

Результаты

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

Сейчас продуктом пользуются постоянно 2 компании на кастомной-альфа версией, 20 компаний попробовали, больше 200 зарегистрировались. В активе стартапа победа в локальных конкурсах StartupWiseGuys и StartupSauna.

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

В планах — привлечь первых 10 компаний пользователей, съездить на StartupSauna в Хельсинки, искать инвестиции, расширять команду разработчиков.

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