Налаштування 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 у нас.