Налаштування Session Replay (LogRocket/FullStory)
Session Replay записує DOM-eventos, клики, прокрутку та мережеві запити користувачів і дозволяє відтворити їхню сесію як відео. Інструмент необхідний для налагодження неї́звичайних багів, аналізу воронок конверсії та UX-досліджень.
LogRocket vs FullStory
| Критерій | LogRocket | FullStory |
|---|---|---|
| Основний фокус | Налагодження + Redux/Network | UX аналітика + DX Data |
| Інтеграція з помилками | Вбудована, з трейсами | Через інтеграції |
| Маскування приватності | Гнучке | Гнучке |
| Модель цін | За сесіями/місяць | За користувачами |
| 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);
Маскування конфіденційних даних
Обов'язково перед production—паролі, платіжні дані, особисті поля:
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 дні.