Перейти к основному содержимому
Перейти к основному содержимому

Воспроизведение сессий

Воспроизведение сессий в ClickStack захватывает и воссоздаёт взаимодействия пользователей с вашим веб-приложением, позволяя визуально воспроизвести в точности то, что пользователь видел и делал во время своей сессии. Вместо видеозаписи SDK фиксирует изменения DOM, движения мыши, клики, прокрутку, ввод с клавиатуры, логи консоли, сетевые запросы (XHR, Fetch, WebSocket) и исключения JavaScript, а затем воссоздаёт этот пользовательский опыт в браузере.

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

Инструментирование вашего приложения​

ClickStack полностью совместим с OpenTelemetry, поэтому вы можете отправлять браузерную телеметрию (трейсы, исключения) с помощью стандартного JavaScript SDK OpenTelemetry или любого из языковых SDK ClickStack. Однако для session replay требуется ClickStack Browser SDK (@hyperdx/browser), который расширяет OpenTelemetry SDK возможностями записи сессий, захвата консоли и сетевых запросов. Если вам нужны только трейсы без session replay, любой совместимый с OTel браузерный SDK будет работать с ClickStack.

Примеры ниже используют ClickStack Browser SDK. Добавление session replay в ваше приложение включает всего три шага: установка пакета, инициализация SDK, после чего все действия пользователя автоматически записываются — дополнительные изменения в коде не требуются.

Совет

Инициализируйте SDK в месте, которое гарантированно загружается при старте вашего приложения. Например, в приложении Next.js это может быть корневой layout.js. Это обеспечивает немедленный запуск записи сессий и захват полного пользовательского опыта.

npm install @hyperdx/browser

import HyperDX from '@hyperdx/browser';

HyperDX.init({
  url: 'http://your-otel-collector:4318',
  apiKey: 'YOUR_INGESTION_API_KEY', // не указывайте для Managed ClickStack
  service: 'my-frontend-app',
  tracePropagationTargets: [/api.myapp.domain/i],
  consoleCapture: true,
  advancedNetworkCapture: true,
});
Примечание

Опция tracePropagationTargets ключевая для связывания session replay с бэкенд-трейсами — укажите здесь домен вашего API, чтобы включить полноценный распределённый трейсинг от фронтенда до бэкенда. Полный список опций SDK, включая настройки конфиденциальности, кастомные действия, React error boundaries и source maps, приведён в справочнике по Browser SDK.

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

Просмотр реплеев сессий​

Перейдите в раздел Client Sessions на левой боковой панели в интерфейсе ClickStack (HyperDX). В этом представлении перечислены все записанные браузерные сессии с указанием их длительности и количества событий.

Поиск реплеев сессий

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

Воспроизведение реплея сессии

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

От сессии к трейсу​

Когда вы выбираете сетевой запрос или ошибку на таймлайне сессии, вы можете перейти на вкладку Trace, чтобы отследить этот запрос через ваши backend-сервисы — просматривая связанные логи, спаны и запросы к базе данных, которые были вызваны этим действием пользователя.

Это работает, так как конфигурация tracePropagationTargets связывает спаны браузера со спанами сервера через заголовок traceparent, формируя единый распределённый трейc от клика пользователя до самой базы данных. Подробный пошаговый разбор этого на практике, включая инструментирование как frontend-, так и backend-частей, см. в статье Instrumenting your NextJS application with OpenTelemetry and ClickStack.

Переход от воспроизведения сессии к backend-трейсам в ClickStack

От трассы к сессии​

Корреляция работает и в обратном направлении. При просмотре трассы в представлении Search щёлкните на неё, чтобы открыть подробную информацию о трассе, затем выберите вкладку Session Replay, чтобы увидеть, что именно видел и делал пользователь в момент формирования этой трассы. Это особенно полезно при расследовании ошибок или медленных запросов — вы можете начать с проблемы на стороне бэкенда и сразу увидеть, как происходящее выглядело для пользователя.

Представление трассы с воспроизведением сессии

Как хранятся данные сессии​

Данные для воспроизведения сессий хранятся в отдельной таблице hyperdx_sessions в ClickHouse, отдельно от логов и трейсов. Каждое событие сессии — это строка с полем Body, содержащим полезную нагрузку события, и отображением LogAttributes, в котором хранятся метаданные события. Столбцы Body и LogAttributes вместе содержат детали реальных событий сессии, которые используются для восстановления воспроизведения.

Полную информацию о схеме таблицы см. в разделе Таблицы и схемы, используемые ClickStack.

Попробуйте на практике​

Есть два способа увидеть session replay в действии:

  • Живой пример — перейдите на clickpy.clickhouse.com, повзаимодействуйте с приложением, затем посмотрите запись своей сессии на play-clickstack.clickhouse.com в источнике ClickPy Sessions. Подробности об инструментации ClickPy см. в записи в блоге Instrumenting your NextJS application with OpenTelemetry and ClickStack.
  • Локальный демонстрационный пример — Session Replay Demo пошагово показывает, как проинструментировать демонстрационное приложение, включая локальный запуск ClickStack и просмотр записей сессий.

Узнать больше​

  • Демонстрация Session Replay — интерактивное локальное демо‑приложение с пошаговыми инструкциями
  • Справочник по Browser SDK — все варианты конфигурации SDK, source maps, пользовательские действия и расширенные настройки
  • Поиск — синтаксис поиска для фильтрации сессий и событий
  • Дашборды — создание визуализаций и дашбордов на основе данных сессий и трассировок
  • Оповещения — настройка оповещений по ошибкам, задержкам и другим сигналам
  • Архитектура ClickStack — как ClickHouse, HyperDX и OTel collector интегрируются друг с другом