Воспроизведение сеанса в ClickStack фиксирует и воссоздаёт взаимодействия пользователей в вашем веб-приложении, позволяя визуально воспроизвести в точности то, что пользователь видел и делал во время сеанса. Вместо видеозаписи SDK сохраняет изменения DOM, перемещения мыши, клики, прокрутку, ввод с клавиатуры, журналы консоли, сетевые запросы (XHR, Fetch, WebSocket) и исключения JavaScript, а затем воссоздаёт это в браузере.
Поскольку воспроизведения сеансов хранятся в ClickHouse вместе с вашими журналами, трассировками и метриками, вы можете перейти от просмотра действий пользователя к анализу серверных трассировок и запросов к базе данных, которые за этим стояли, — и всё это в несколько кликов. Поэтому воспроизведение сеанса полезно для отладки проблем в продакшене, понимания поведения пользователей, выявления проблемных мест в UX и визуального подтверждения проблем, о которых сообщает служба поддержки.
Инструментирование приложения
@hyperdx/browser), который расширяет OpenTelemetry SDK возможностями записи сеанса, захвата консоли и сетевых запросов. Если вам нужны только трассировки без воспроизведения сеанса, с ClickStack будет работать любой совместимый с OTel браузерный SDK.
В примерах ниже используется Browser SDK ClickStack. Чтобы добавить воспроизведение сеанса в приложение, достаточно трёх шагов: установить пакет, инициализировать 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', // опустите для Управляемого ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
yarn add @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // опустите для Управляемого ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
Для приложений, не использующих сборщик, подключите SDK напрямую с помощью тега script. При этом станет доступна глобальная переменная HyperDX, которую можно использовать так же, как пакет NPM.<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>
<script>
window.HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // опустите для Управляемого ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
</script>
Параметр tracePropagationTargets критически важен для связывания воспроизведения сеансов с трассировками на бэкенде — укажите в нём домен вашего API, чтобы включить полную распределённую трассировку от фронтенда до бэкенда. Полный список параметров SDK, включая настройки конфиденциальности, пользовательские actions, границы ошибок React и source maps, см. в справочнике по Browser SDK. Просмотр воспроизведений сеансов
tracePropagationTargets связывает спаны браузера со спанами сервера через заголовок traceparent, создавая единую распределённую трассировку от клика пользователя до самой базы данных. Подробный практический разбор, включая инструментирование как frontend, так и backend, см. в статье Инструментирование приложения NextJS с OpenTelemetry и ClickStack.
Корреляция работает и в обратную сторону. При просмотре трассировки в разделе Search нажмите на него, чтобы открыть подробную информацию, затем выберите вкладку Session replay, чтобы увидеть, что именно происходило у пользователя в момент записи этой трассировки. Это особенно полезно при расследовании ошибок или медленных запросов: вы можете начать с проблемы на стороне сервера и сразу увидеть ситуацию глазами пользователя.
Как хранятся данные сеанса
hyperdx_sessions в ClickHouse, отдельно от журналов и трассировок. Каждое событие сеанса представляет собой строку с полем Body, содержащим полезную нагрузку события, и полем LogAttributes типа map, в котором хранятся метаданные события. Столбцы Body и LogAttributes вместе содержат сведения о самих событиях сеанса, которые используются для восстановления воспроизведения.
Полную информацию о схеме таблицы см. в разделе Таблицы и схемы, используемые ClickStack.
Есть два способа посмотреть воспроизведение сеанса в действии:
Последнее изменение 10 июня 2026 г.
