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