Настройка Session Replay (LogRocket/FullStory) для сайта
Session Replay записывает DOM-события, клики, скроллы и сетевые запросы пользователя и позволяет воспроизвести его сессию как видео. Инструмент незаменим при отладке нетипичных багов, анализе воронок конверсии и UX-исследованиях.
LogRocket vs FullStory
| Критерий | LogRocket | FullStory |
|---|---|---|
| Основной фокус | Debugging + Redux/Network | UX analytics + DX Data |
| Интеграция с ошибками | Встроенная, с трейсами | Через интеграции |
| Privacy-маскировка | Гибкая | Гибкая |
| Ценовая модель | По сессиям/месяц | По пользователям |
| Self-hosted | Нет | Нет |
Open-source альтернатива с self-hosting — OpenReplay.
Установка LogRocket
import LogRocket from 'logrocket';
LogRocket.init('your-app/project-id');
// Идентификация пользователя
LogRocket.identify(user.id, {
name: user.name,
email: user.email,
plan: user.subscriptionPlan
});
Для React добавляется logrocket-react для отслеживания компонентов:
import setupLogRocketReact from 'logrocket-react';
setupLogRocketReact(LogRocket);
Маскировка чувствительных данных
Обязательно перед продакшном — пароли, платёжные данные, персональные поля:
LogRocket.init('app/id', {
dom: {
inputSanitizer: true, // скрывает все inputs
textSanitizer: false
},
network: {
requestSanitizer: request => {
if (request.headers['Authorization']) {
request.headers['Authorization'] = '[redacted]';
}
return request;
}
}
});
Либо через CSS-класс lr-hide на конкретных элементах.
Привязка к ошибкам Sentry
LogRocket.getSessionURL(sessionURL => {
Sentry.configureScope(scope => {
scope.setExtra('sessionURL', sessionURL);
});
});
Теперь в каждой ошибке Sentry есть прямая ссылка на запись сессии пользователя, в которой баг воспроизошёл.
Сроки
Установка и базовая настройка маскировки — 1 день. Интеграция с Sentry/Datadog и настройка фильтров сессий — 2–3 дня.