Session Replay

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

Обзор

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

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

Включение Session Replay

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

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

Шаг 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

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

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

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

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

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

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

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

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

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

1. Найдите сессии по ID пользователя или email
2. Посмотрите запись, чтобы увидеть точное поведение
3. Выявите проблему (кнопка скрыта, 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
  });
});

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

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

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

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

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

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

1. Снизьте sample rate
2. Отключите запись canvas
3. Исключите тяжёлые элементы (реклама, видео)
4. Снизьте 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);

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

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