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

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

Sentry + SessionStack

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

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

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

Пользовательский опыт является ключом к вашему бизнесу и вашей суперсиле

«Что характерно для нашего случая, так это контекст, в котором мы работаем: мы одновременно создаем, запускаем и модернизируем несколько продуктов в короткие сроки и с очень ограниченной командой», - говорит Пол Лепревост, соучредитель и директор по опыту компании Onvey. «Мы готовы пойти на крайности только в том случае, если это максимизирует как пользовательский опыт, так и продуктивность инженеров».

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

Стремление предоставлять услуги без сбоев и ошибок не вызывает удивления. «Мы прилагаем много усилий для выявления и устранения проблем в кратчайшие сроки. Решение ошибок Agile является убедительным сигналом для нашей команды и пользователей: качество и надежность - главные приоритеты ». Однако, несмотря на все усилия, некоторые ошибки неизбежно проскользнут через разработку и контроль качества в производственную среду, где с ними столкнутся пользователи.

Onvey использует Sentry для обнаружения и сортировки ошибок как клиента, так и сервера, отправляя уведомления в реальном времени через канал Slack, чтобы вся команда была в курсе и сосредоточена. Хотя Sentry играет ключевую роль в регистрации и классификации проблем PHP во внутреннем интерфейсе и проблем JavaScript во внешнем интерфейсе, все же были случаи, когда разработчики Onvey теряли циклы, пытаясь воспроизвести ошибки, сильно зависящие от контекста.

SessionStack помогает Onvey понимать и анализировать поведение пользователей, которое привело к ошибке, и точно видеть, как возникли определенные проблемы. «Sentry - это наш центральный репозиторий и главный справочник по вопросам. И мы сочетаем это с идеальными видео SessionStack о поведении пользователей ».

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

Воспроизвести ошибку - непростая задача. С новой «интеграцией Sentry + SessionStack мы можем просто воспроизвести сеанс для заданной клиентской или серверной ошибки прямо с точки воздействия, не выходя из интерфейса Sentry », - рассказал Вильфрид Дюран, генеральный директор Onvey.

С проигрывателем SessionStack в Sentry инженеры могут перемещаться и фильтровать шаги временной шкалы, чтобы обнаружить любое предыдущее действие, которое могло привести к ошибке. Такой уровень контекста и понимания может значительно увеличить скорость разрешения проблемы.

«Sentry - это наш центр управления полетами для работы с ошибками и регрессами. Таким образом, чем быстрее мы сможем воспроизвести ошибку, тем меньше будет шагов по устранению неполадок. Чем выше наша уверенность в том, что мы правильно расставляем приоритеты, тем больше вероятность, что мы решим проблему, эффективно выполним итерацию и вернемся к созданию Pagescreen ».

Включите воспроизведение видео в Sentry всего за пять шагов

Шаг 1: Зарегистрируйтесь в SessionStack и добавьте свое веб-приложение. Это бесплатно!

Шаг 2. Добавьте фрагмент кода JavaScript в элемент заголовка вашего веб-приложения.

<!-- Begin SessionStack code -->
<script type="text/javascript">
    !function(a,b){var c=window;c.SessionStack=a,c[a]=c[a]||function(){
    c[a].q=c[a].q||[],c[a].q.push(arguments)},c[a].t=b;var d=document.createElement("script");
    d.async=1,d.src="https://cdn.sessionstack.com/sessionstack.js";
    var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(d,e);
    }("sessionstack","<YOUR TOKEN>");
</script>
<!-- End SessionStack Code -->

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

<!-- Begin SessionStack-Sentry code -->
<script type="text/javascript">
	sessionstack("getSessionId",function(s){s&&Raven.setDataCallback(function(t){return t
	.contexts=t.contexts||{},t.contexts.sessionstack={session_id:s,timestamp:(new Date).
	getTime()},t})});
</script>
<!-- End SessionStack-Sentry code -->

Шаг 3. Перейдите на страницу API Tokens в SessionStack, назовите свой токен (например, «Sentry token») и нажмите на знак +, чтобы создать новый токен.

Шаг 4: Вернитесь в свой проект Sentry, чтобы настроить плагин SessionStack. Найдите плагин SessionStack в All Integrations в настройках вашего проекта Sentry.

Нажмите Configure plugin, введите адрес электронной почты своей учетной записи SessionStack, только что созданный токен API и идентификатор веб-сайта. Идентификатор веб-сайта находится в разделе General на странице Settings вашей учетной записи SessionStack.

Шаг 5. В отчетах Sentry нажмите кнопку Play session, чтобы воспроизвести сеанс пользователя, начавшийся за пять секунд до возникновения ошибки.

Вот и все! По умолчанию SessionStack автоматически начинает запись при каждом посещении страницы.

Этот пост был написан Райаном Голдманом из Sentry и изначально размещен в блоге Sentry. Особая благодарность Полу Лепрево и Вильфриду Дюрану из Онви.

Есть бесплатный план, если вы хотите попробовать SessionStack.