/)
Когда в рабочей среде что-то ломается, вопросы, которые имеют наибольшее значение, труднее всего решить только с помощью метрик: кто пострадал, что именно они увидели и стоит ли ради этого будить кого-то среди ночи? Ответы на эти вопросы требуют более полной картины проблемы и ее влияния на ваших пользователей.
Именно здесь на помощь приходит мониторинг цифрового опыта (Digital Experience Monitoring, DEM) в Grafana Cloud. Объединяя наблюдаемость интерфейса (Frontend Observability) и синтетический мониторинг (Synthetic Monitoring), DEM связывает реальный пользовательский опыт с проактивным тестированием, помогая инженерным командам понять масштабы проблемы, исследовать ее причину и устранить ее быстрее — и все это в рамках Grafana Cloud.
В этой статье мы рассмотрим некоторые из последних обновлений DEM в Grafana Cloud и расскажем, как начать работу. Вы также можете узнать больше, посмотрев видео ниже.
Сначала давайте разберемся: что такое мониторинг цифрового опыта?
Мониторинг цифрового опыта в Grafana Cloud дает полное представление о том, как пользователи взаимодействуют с вашими веб-приложениями, объединяя данные о реальных пользователях и проактивные синтетические проверки.
DEM помогает вашей команде достичь следующих результатов:
- Видимость реальных пользователей: знайте, как пользователи на самом деле воспринимают ваше веб-приложение, а не только то, о чем говорят ваши бэкенд-метрики.
Видимость реальных пользователей: знайте, как пользователи на самом деле воспринимают ваше веб-приложение, а не только то, о чем говорят ваши бэкенд-метрики.
- Проактивное обнаружение: выявляйте проблемы до того, как с ними столкнутся пользователи, с помощью автоматических проверок критических пользовательских сценариев.
Проактивное обнаружение: выявляйте проблемы до того, как с ними столкнутся пользователи, с помощью автоматических проверок критических пользовательских сценариев.
- Сквозная корреляция: связывайте сигнал интерфейса с лежащим в его основе бэкенд-трейсом.
Сквозная корреляция: связывайте сигнал интерфейса с лежащим в его основе бэкенд-трейсом.
- Более быстрое устранение: сократите среднее время восстановления с часов до минут.
Более быстрое устранение: сократите среднее время восстановления с часов до минут.
Запись сеансов (Session Replay): посмотрите точно на то, что видели ваши пользователи
Функция записи сеансов в Grafana Cloud Frontend Observability позволяет визуально воспроизвести то, что пользователь видел и делал в вашем веб-приложении. Ваша команда может в точности увидеть пользовательский опыт и соотнести его с сигналами мониторинга реальных пользователей, такими как Core Web Vitals, действия пользователей и трейсы, что делает этот инструмент мощным средством для расследования багов и анализа первопричин.
Запись сеансов работает на базе Faro, библиотеки инструментирования JavaScript с открытым исходным кодом от Grafana для сбора данных мониторинга реальных пользователей. Давайте рассмотрим, как ее настроить.
Шаг 1: Добавьте инструментирование Replay в Faro
Мы начинаем с добавления веб-SDK Faro в наше веб-приложение. При инициализации Faro мы добавляем инструментирование Replay наряду со стандартными веб-инструментами Faro:
Во время инициализации конфигурация по умолчанию ориентирована на конфиденциальность («privacy first»), но вы можете дополнительно настроить параметры маскирования, конфиденциальности и выборки в соответствии с вашими потребностями. Например, вы можете замаскировать определенные типы ввода или записывать сеансы только для определенного процента пользователей.
Шаг 2: Сгенерируйте данные сеанса
Как только веб-приложение инструментировано, мы можем увидеть его в действии. В этом примере мы будем использовать QuickPizza, наше демонстрационное веб-приложение, которое позволяет создавать комбинации пиццы. На сайте мы нажмем несколько кнопок и поработаем с приложением точно так же, как это сделал бы реальный пользователь. Вся эта активность записывается и отправляется во Frontend Observability.
Шаг 3: Найдите записи сеансов
Затем мы перейдем в приложение Frontend Observability, откроем раздел Sessions и прокрутим вниз, чтобы найти записи наших сеансов.
Шаг 4: Изучите воспроизведение
Наши сеансы заполнены, и мы можем выбрать один из них для воспроизведения. Конфиденциальная информация маскируется на стороне клиента, что означает, что она никогда не отправляется в Grafana Cloud, но вы все равно можете четко отслеживать движения мыши и действия с DOM. Для просмотра записей сеансов у вас есть два варианта: вы можете открыть сеанс напрямую со страницы сведений о сеансе или нажать зеленую кнопку, чтобы открыть проигрыватель в новой вкладке. Мы рекомендуем второй вариант, так как он позволяет смотреть запись параллельно с полным пользовательским путем, который всегда синхронизирован с состоянием проигрывателя.
Проигрыватель воспроизведения дает вам полный контроль над воспроизведением:
- Элементы управления воспроизведением: воспроизведение, пауза и пропуск десяти секунд вперед или назад
Элементы управления воспроизведением: воспроизведение, пауза и пропуск десяти секунд вперед или назад
- Регулируемая скорость: от 0,25x до 16x, что упрощает просмотр длинных сеансов
Регулируемая скорость: от 0,25x до 16x, что упрощает просмотр длинных сеансов
- Пропуск периодов бездействия: пропуск спокойных частей записи, чтобы вы могли сосредоточиться на важном
Пропуск периодов бездействия: пропуск спокойных частей записи, чтобы вы могли сосредоточиться на важном
Сбоку вы можете видеть путь пользователя с метками времени, показывающими, что происходило как у пользователя, так и в браузере. В этом же окне можно просматривать ошибки, переходить прямо к ним, а также фильтровать и сортировать их.
Именно здесь функция записи сеансов становится по-настоящему мощной. Поскольку записи сопоставлены с существующей телеметрией Faro, вы можете перейти от ошибки интерфейса на дашборде прямо к записи этого сеанса, посмотреть, что именно делал пользователь в момент возникновения ошибки, а затем еще глубже изучить связанные трейсы.
Чтобы узнать больше о записи сеансов в Frontend Observability, ознакомьтесь с этой статьей в блоге и нашей технической документацией.
Синтетический мониторинг и наблюдаемость интерфейса: вместе еще лучше
Grafana Cloud Synthetic Monitoring выполняет автоматические проверки ваших критических пользовательских сценариев, позволяя выявлять проблемы до того, как их увидят реальные пользователи, в то время как Grafana Cloud Frontend Observability фиксирует то, с чем реально сталкиваются ваши пользователи, превращая производительность интерфейса в метрики, которые можно измерять и на которые можно влиять. Вместе они составляют основу мониторинга цифрового опыта в Grafana Cloud, предоставляя вам как проактивный взгляд, так и представление о реальном цифровом опыте ваших пользователей.
Недавно мы упростили переключение между Synthetic Monitoring и Frontend Observability при расследовании инцидентов, обеспечив сквозную корреляцию от синтетической проверки до интерфейсного взаимодействия и лежащих в его основе трейсов.
Каждый раз, когда выполняется проверка браузера в Synthetic Monitoring, она пассивно создает соответствующий сеанс Frontend Observability, и этот сеанс представляет собой полностью контролируемый, повторяемый запуск пользовательского сценария. Изнутри проверки теперь можно напрямую подтянуть данные Frontend Observability в качестве контекста и перейти прямо к тому самому сеансу, который был создан в ходе этого запуска. Оказавшись в этом сеансе, вы получаете доступ к записи сеанса, пути пользователя и трейсам.
Ваши синтетические браузерные проверки больше не ограничиваются простым успехом или неудачей. Вы получаете обратную связь от каждого запуска, поэтому при сбое проверки можете точно увидеть, что произошло. Это значит, что вы наконец-то сможете ответить на вопрос, который задает каждый дежурный инженер: является ли этот сбой реальной проблемой для пользователя и сколько пользователей пострадало?
Разбор неудачной проверки
Давайте перейдем в Synthetic Monitoring, чтобы увидеть интеграцию в действии. Мы уже настроили браузерную проверку, имитирующую типичный пользовательский сценарий QuickPizza, и только что получили оповещение о том, что эта проверка завершилась с ошибкой.
- Откройте дашборд проверок. Сразу же мы видим проверку, завершившуюся с ошибкой.
Откройте дашборд проверок. Сразу же мы видим проверку, завершившуюся с ошибкой.
- Найдите неудачный запуск. Внизу, в проводнике временных точек, мы можем увидеть каждый отдельный запуск, включая те, которые завершились с ошибкой. Мы выберем один из них.
Найдите неудачный запуск. Внизу, в проводнике временных точек, мы можем увидеть каждый отдельный запуск, включая те, которые завершились с ошибкой. Мы выберем один из них.
- Просмотрите сеанс интерфейса (frontend). Когда мы прокручиваем страницу вниз, мы видим кнопку с надписью View Frontend Session. Одним кликом она открывает сеанс Frontend Observability для этого конкретного запуска.
Просмотрите сеанс интерфейса (frontend). Когда мы прокручиваем страницу вниз, мы видим кнопку с надписью View Frontend Session. Одним кликом она открывает сеанс Frontend Observability для этого конкретного запуска.
В этом представлении есть все необходимое для расследования: воспроизведение сеанса, представляющее собой пошаговое визуальное воспроизведение каждого действия, выполненного проверкой; метрики пользовательского опыта этого запуска; полный путь пользователя и стоящие за ним трассировки. Всего за несколько кликов мы перешли от оповещения к неудачному запуску и просмотру того, что именно произошло во время проверки.
Узнать больше
Чтобы узнать больше, посетите страницу решений Digital Experience Monitoring или изучите каждый инструмент подробнее в технической документации по Frontend Observability и Synthetic Monitoring.
Grafana Cloud — это самый простой способ начать работу с Digital Experience Monitoring. У нас есть щедрый бесплатный тарифный план, который включает 100 тыс. тестовых запусков в месяц и многое другое. Зарегистрируйтесь бесплатно прямо сейчас!
Теги
/)
/)
/)