Skip to content
ClickHouse Docs
ClickHouse DocsClickHouse Docs
49.6kGet Started

Демо воспроизведения сеанса

View as MarkdownEdit this pageReport an issueSet up docs MCP

Обзор

Демо-приложение для воспроизведения сеанса — это обозреватель документации, созданный на чистом JavaScript. Оно показывает, насколько простым может быть подключение воспроизведения сеанса: один тег script и один вызов инициализации — и все действия пользователя автоматически фиксируются.

Репозиторий включает две ветки:

  • main — версия с полностью настроенным воспроизведением сеанса, готовая к немедленному использованию
  • pre-instrumented — чистая версия без инструментирования, с комментариями в коде, которые показывают, где его нужно добавить

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

Подробнее о том, что такое воспроизведение сеанса и как оно вписывается в ClickStack, см. на странице функции Session Replay.

Предварительные требования

  • Установлены Docker и Docker Compose
  • Доступны порты 3000, 4317, 4318 и 8080

Запуск демо

Клонируйте репозиторий

git clone https://github.com/ClickHouse/clickstack-session-replay-demo
cd clickstack-session-replay-demo

Запустите ClickStack

docker-compose up -d clickstack

Получите ключ API

  1. Откройте HyperDX по адресу http://localhost:8080
  2. Создайте аккаунт или войдите в него, если это необходимо
  3. Перейдите в Team Settings → API Keys
  4. Скопируйте свой ключ API для приёма данных
Ключ API ClickStack
  1. Задайте его как переменную окружения:
export CLICKSTACK_API_KEY='your-api-key-here'

Запустите демо-приложение

docker-compose --profile demo up demo-app

Откройте http://localhost:3000 в браузере и взаимодействуйте с приложением — ищите темы, фильтруйте по категориям, просматривайте примеры кода и добавляйте элементы в закладки.

Демо-приложение для воспроизведения сеанса

Все взаимодействия автоматически собираются ClickStack Browser SDK.

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

Вернитесь в HyperDX по адресу http://localhost:8080 и в левой боковой панели перейдите в Client Sessions.

Поиск воспроизведения сеанса

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

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

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

Инструментирование

Демонстрационное приложение показывает, как мало кода нужно, чтобы включить воспроизведение сеанса. Для этого достаточно внести в приложение всего два изменения:

1. Подключите SDK (app/public/index.html):

<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>

2. Выполните инициализацию ClickStack (app/public/js/app.js):

window.HyperDX.init({
  url: 'http://localhost:4318',
  apiKey: window.CLICKSTACK_API_KEY,
  service: 'clickhouse-session-replay-demo',
  consoleCapture: true,
  advancedNetworkCapture: true,
});

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

Попробуйте сами

Чтобы с нуля настроить в приложении сбор телеметрии, переключитесь на ветку pre-instrumented:

git checkout pre-instrumented

Эта ветка содержит то же приложение без какой-либо инструментации ClickStack. Комментарии в коде в app/public/index.html и app/public/js/app.js точно указывают, куда добавить два приведённых выше фрагмента кода. После этого перезапустите демо-приложение, и ваши действия в приложении начнут отображаться в ClickStack.

Устранение неполадок

Сеансы не отображаются в HyperDX

  1. Проверьте консоль браузера на наличие ошибок
  2. Убедитесь, что ClickStack запущен: docker-compose ps
  3. Убедитесь, что задан API key: echo $CLICKSTACK_API_KEY
  4. Измените временной диапазон в представлении Client Sessions (попробуйте Last 15 minutes)
  5. Принудительно обновите страницу в браузере: Cmd+Shift+R (Mac) или Ctrl+Shift+R (Windows/Linux)

Ошибки 401 Unauthorized

API-ключ задан неверно. Убедитесь, что вы:

  1. Экспортировали его в терминале: export CLICKSTACK_API_KEY='your-key'
  2. Запустили демо-приложение в том же терминале, где экспортировали его
  3. Получили ключ в интерфейсе HyperDX (а не использовали случайно сгенерированную строку)

Очистка

Остановите сервисы:

docker-compose down

Удалите все данные:

docker-compose down -v

Подробнее

Navigation