Session Replay

Session Replay позволяет увидеть в точности то, что пользователи делали на вашем сайте, записывая их взаимодействия, движения мыши, прокрутку и клики.

Обзор

StatusRadar использует rrweb для конфиденциальной записи сессий с поддержкой:

Снимков DOM: фиксирует структуру страницы и её изменения
Записи событий: движения мыши, клики, прокрутка, ввод
Контроля конфиденциальности: автоматически маскирует чувствительные данные
Сжатия: gzip-сжатие для эффективного хранения

Включение Session Replay

Шаг 1: Включите в настройках приложения

Перейдите в Dashboard → Observability → Apps
Откройте своё приложение → Settings
Включите «Session Replay»
Настройте Replay Storage Quota (ГБ/месяц)
Сохраните настройки

Шаг 2: Включите в SDK

import { StatusRadarRUM } from '@statusradar/rum';

const rum = new StatusRadarRUM({
  apiKey: 'your-api-key-here',
  appId: 'your-app-id-here',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',

  // Enable session replay
  sessionReplay: {
    enabled: true,
    sampleRate: 1.0,              // Record 100% of sessions
    maskAllInputs: true,          // Mask all input fields
    maskTextSelector: '.sensitive', // Mask elements with class
    blockSelector: '.private',    // Block elements from recording
    ignoreClass: 'sr-ignore',     // Ignore elements with class
    inlineStylesheet: true,       // Inline CSS for accuracy
    recordCanvas: false           // Don't record canvas elements
  }
});

rum.start();

Параметры конфигурации

Частота выборки (Sample Rate)

Управляйте тем, какой процент сессий записывать:

sessionReplay: {
  enabled: true,
  sampleRate: 0.1  // Record 10% of sessions
}

Контроль конфиденциальности

Маскирование всех полей ввода

sessionReplay: {
  maskAllInputs: true  // Masks all <input>, <textarea>, <select>
}

Маскирование конкретных элементов

sessionReplay: {
  maskTextSelector: '.password, .credit-card, .ssn'
}

Исключение элементов из записи

sessionReplay: {
  blockSelector: '.admin-panel, [data-sensitive]'
}

HTML-атрибуты

Помечайте элементы прямо в HTML:

<!-- Mask this input -->
<input type="text" class="sr-mask" />

<!-- Block this section from recording -->
<div class="sr-block">
  Sensitive content here
</div>

<!-- Ignore this element completely -->
<div class="sr-ignore">
  Never recorded
</div>

Просмотр записей

Навигация в Dashboard

Перейдите в Dashboard → Observability → Apps → [Your App]
Откройте вкладку «Sessions»
Нажмите на любую сессию, чтобы посмотреть запись

Элементы управления плеером записей

Play/Pause: пробел или клик по кнопке
Скорость: воспроизведение 1x, 2x, 4x
Пропуск бездействия: автоматический пропуск долгих пауз
Режим инспекции: клик по элементам для просмотра деталей
Таймлайн: переход к конкретной метке времени

Метаданные сессии

Каждая сессия включает:

Длительность: общая продолжительность сессии
Просмотры страниц: посещённые страницы
Ошибки: JavaScript-ошибки во время сессии
Браузер: user agent, ОС, устройство
География: страна, город (если доступно)
Производительность: среднее время загрузки страницы

Сценарии использования

Отладка проблем, о которых сообщили пользователи

Пользователь: «Кнопка оформления заказа не работает»

Найдите сессии по ID пользователя или email
Посмотрите запись, чтобы увидеть точное поведение
Выявите проблему (кнопка скрыта, JS-ошибка и т. д.)

Оптимизация UX

Просматривайте записи, чтобы выявить:

Rage clicks (повторные клики по элементам, которые не реагируют)
Dead clicks (клики без какого-либо действия)
Паттерны отказа от заполнения форм
Запутанные сценарии навигации

Анализ воронок конверсии

Фильтруйте сессии по:

Конвертировавшие vs отказавшиеся
Страница входа
Страница выхода
Время на сайте

Конфиденциальность и соответствие требованиям

Автоматическое маскирование

StatusRadar автоматически маскирует:

Поля паролей (type="password")
Поля ввода данных карт (определяются по шаблону)
Номера социального страхования
Email-адреса (если настроено)

Соответствие GDPR

// Don't start replay until user consents
if (userHasConsented()) {
  rum.configure({
    sessionReplay: { enabled: true }
  });
}

Хранение данных

Настройте период хранения в настройках приложения:

7 дней
30 дней
90 дней
Произвольный

Квоты хранилища

Данные записей сжимаются (gzip) перед хранением.

Типичные размеры сессий:

Простая страница: 50–100 КБ
Сайт e-commerce: 200–500 КБ
Насыщенный SPA: 500 КБ–2 МБ

Пример: квота 1 ГБ ≈ 2 000–10 000 сессий в зависимости от сложности

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

Session Replay добавляет минимальные накладные расходы:

Начальный бандл: +3 КБ gzip (ленивая загрузка)
Память: ~5 МБ для 10-минутной сессии
CPU: <1% в современных браузерах
Сеть: пакетные выгрузки каждые 10 секунд

Расширенная конфигурация

Условная запись

Записывайте только при определённых условиях:

const rum = new StatusRadarRUM({
  apiKey: 'your-api-key',
  appId: 'your-app-id',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',

  sessionReplay: {
    enabled: true,
    // Only record if user encounters error
    startRecordingOn: 'error',
    // Or record after specific event
    startRecordingAfter: () => {
      return window.location.pathname.includes('/checkout');
    }
  }
});

Запись canvas

Включите для приложений с элементами canvas:

sessionReplay: {
  recordCanvas: true,
  sampling: {
    canvas: 15  // Record canvas at 15 FPS
  }
}

Скриншот при ошибке

Делайте скриншот при возникновении ошибки:

rum.on('error', (error) => {
  rum.captureScreenshot({
    includeInReplay: true
  });
});

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

Запись не ведётся

Проверьте квоту: Dashboard → Observability → Apps → Usage
Убедитесь, что sessionReplay.enabled = true
Проверьте консоль браузера на ошибки
Убедитесь, что sample rate > 0

В записи отсутствуют стили

sessionReplay: {
  inlineStylesheet: true,  // Inline CSS
  inlineImages: true       // Inline small images
}

Слишком большой размер файла записи

Снизьте sample rate
Отключите запись canvas
Исключите тяжёлые элементы (реклама, видео)
Снизьте FPS записи

sessionReplay: {
  sampling: {
    scroll: 100,    // Record scroll every 100ms
    mousemove: 50,  // Record mouse move every 50ms
    input: 500      // Record input every 500ms
  }
}

Справочник по API

Запуск/остановка записи

// Start recording
rum.startReplay();

// Stop recording
rum.stopReplay();

// Check if recording
if (rum.isReplayActive()) {
  console.log('Recording active');
}

Получение URL сессии

const sessionUrl = rum.getSessionReplayUrl();
console.log('View replay:', sessionUrl);

Дальнейшие шаги

Пользовательские события — отслеживайте события приложения
Отслеживание ошибок — отладка с контекстом записей
Управление квотами — следите за использованием хранилища

On this page