Настройка Session Replay (LogRocket/FullStory) для сайта
Ваш клиент сообщает о баге, который невозможно воспроизвести. Логов и скриншотов недостаточно. Вы тратите часы на дебаг, а проблема может быть в редком сценарии. Session Replay решает это: вы буквально смотрите через плечо пользователя, видя каждый клик, скролл и сетевой запрос. За 10 минут вы находите то, на что ушли бы дни.
Мы внедрили Session Replay на 50+ проектах — от интернет-магазинов до SaaS-платформ. Знаем, где спотыкаются даже опытные команды: утечка PII, просадка производительности, неочевидные настройки маскировки. Ниже — проверенные подходы, которые экономят время и нервы.
Почему стоит интегрировать Session Replay с Sentry?
Связка LogRocket + Sentry даёт суперсилу: на каждую ошибку мы получаем видео сессии пользователя. Это сокращает время отладки в 5–10 раз по сравнению с традиционным логгированием. Для интеграции используем вызов LogRocket.getSessionURL, который возвращает прямую ссылку на запись, и сохраняем её в контексте ошибки: Sentry.configureScope(scope => scope.setExtra('sessionURL', sessionURL)). Теперь любой баг можно расследовать с полным контекстом действий пользователя.
Как организовать маскировку данных?
Перед продакшном обязательно скрыть пароли, платёжные данные, персональные поля. В LogRocket для этого используется параметр inputSanitizer: true — все текстовые поля маскируются. Гибкая настройка через requestSanitizer позволяет скрыть заголовки авторизации. Если нужно спрятать конкретные элементы, добавляем CSS-класс lr-hide. В FullStory также есть API-методы для маскировки — по селекторам или атрибутам. На практике маскировка всех PII-полей занимает около 30 минут.
Сравнение инструментов
LogRocket vs FullStory
| Критерий | LogRocket | FullStory |
|---|---|---|
| Основной фокус | Debugging + Redux/Network | UX analytics + DX Data |
| Интеграция с ошибками | Встроенная, с трейсами | Через интеграции |
| Privacy-маскировка | Гибкая (CSS, API) | Гибкая (CSS, API) |
| Ценовая модель | По сессиям/месяц, от $500/мес | По пользователям, от $600/мес |
| Self-hosted | Нет | Нет |
Open-source альтернатива с self-hosting — OpenReplay. Он уступает по удобству, но даёт полный контроль над данными.
OpenReplay vs LogRocket
| Критерий | OpenReplay | LogRocket |
|---|---|---|
| Self-hosted | Да | Нет |
| Интеграция с Sentry | Через API | Встроенная |
| Маскировка данных | CSS-селекторы | CSS, API |
| Производительность | Средняя | Высокая |
| Цена | Бесплатно (self-hosted) | От $500/мес |
LogRocket лучше подходит для отладки сложных багов, а FullStory — для UX-аналитики. По нашим наблюдениям, команды, использующие LogRocket, находят корень проблемы в среднем на 60% быстрее.
Техническая реализация
Установка 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 есть прямая ссылка на запись сессии пользователя, в которой баг воспроизошёл.
Как мы настраиваем Session Replay
Процесс настройки под ключ
Мы выполняем работу в несколько этапов: аналитика текущей архитектуры → проектирование интеграции → реализация (установка, маскировка, кастомные фильтры) → тестирование на стейджинге → деплой в продакшн. В результате вы получаете готовый инструмент с настроенными дашбордами и алертами.
Примерный план работ
- Аудит текущего сбора данных и privacy-требований (1 день).
- Установка и настройка LogRocket/FullStory с маскировкой (1–2 дня).
- Интеграция с Sentry/Datadog (0.5 дня).
- Настройка фильтров сессий и дашбордов (1 день).
- Тестирование и передача документации (0.5 дня).
Что входит в нашу работу
- Установка и настройка LogRocket/FullStory
- Маскировка PII (пароли, email, платежи)
- Интеграция с Sentry/Datadog/Bugsnag
- Настройка фильтров сессий (по браузерам, событиям, пользователям)
- Создание дашбордов для UX-аналитики
- Документация по использованию и доступам
- Обучение команды (1 час онлайн)
Сроки и стоимость
Сроки зависят от сложности интеграции: от 1 до 5 дней. Стоимость рассчитывается индивидуально — оценим ваш проект бесплатно. Экономия времени команды может достигать 40 часов в месяц при использовании интеграции с Sentry. Свяжитесь с нами для консультации.
Почему нам доверяют
Мы занимаемся настройкой аналитических инструментов более 5 лет. Реализовали 50+ проектов по Session Replay для интернет-магазинов, SaaS-платформ и корпоративных порталов. Гарантируем корректную работу и полное соблюдение privacy-стандартов. Закажите настройку Session Replay у нас.