Session Replay (LogRocket/FullStory) Setup for Website

Session Replay (LogRocket/FullStory) Setup

Session Replay records DOM events, clicks, scrolls, and network requests from users and allows you to replay their session as a video. The tool is essential for debugging unusual bugs, analyzing conversion funnels, and UX research.

LogRocket vs FullStory

Open-source alternative with self-hosting—OpenReplay.

LogRocket Installation

import LogRocket from 'logrocket';
LogRocket.init('your-app/project-id');

// User identification
LogRocket.identify(user.id, {
  name: user.name,
  email: user.email,
  plan: user.subscriptionPlan
});

For React, add logrocket-react for component tracking:

import setupLogRocketReact from 'logrocket-react';
setupLogRocketReact(LogRocket);

Masking Sensitive Data

Must do before production—passwords, payment data, personal fields:

LogRocket.init('app/id', {
  dom: {
    inputSanitizer: true, // hides all inputs
    textSanitizer: false
  },
  network: {
    requestSanitizer: request => {
      if (request.headers['Authorization']) {
        request.headers['Authorization'] = '[redacted]';
      }
      return request;
    }
  }
});

Or via the lr-hide CSS class on specific elements.

Binding to Sentry Errors

LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Now each Sentry error has a direct link to the session recording where the bug occurred.

Timeline

Setup and basic masking configuration—1 day. Integration with Sentry/Datadog and session filter setup—2–3 days.