Record and replay user sessions to debug errors

Session Replay

Session Replay records user interactions so you can see exactly what happened before an error occurred.

How It Works

Recording - Overseer captures DOM mutations, mouse movements, clicks, and scrolls
Privacy - Sensitive data is masked before recording
Compression - Recordings are compressed and sent in batches
Playback - Replay sessions in the Codmir dashboard

Configuration

import { init } from '@codmir/overseer';

init({
  dsn: 'https://your-project.codmir.com/overseer',
  service: 'my-app',
  environment: 'production',
  
  // Enable replay
  enableReplay: true,
  
  // Record 10% of all sessions
  replaySampleRate: 0.1,
  
  // Record 100% of sessions with errors
  replayOnErrorSampleRate: 1.0,
});

Sampling Strategies

Development

init({
  replaySampleRate: 0,        // Don't record all sessions
  replayOnErrorSampleRate: 1, // Only record errors
});

Production

init({
  replaySampleRate: 0.1,      // 10% of sessions
  replayOnErrorSampleRate: 1, // All error sessions
});

High-Value Pages

// Start recording on checkout page
import { startReplay } from '@codmir/overseer';

function CheckoutPage() {
  useEffect(() => {
    startReplay();
  }, []);
  
  return <CheckoutForm />;
}

Privacy Controls

Mask All Inputs

init({
  maskAllInputs: true,
});

Replaces input values with *** in recordings.

Mask Specific Elements

init({
  maskSelectors: [
    '.credit-card',
    '[data-sensitive]',
    '#password',
    '.private-data',
  ],
});

Block Elements

Completely hide elements from recording:

<!-- Add data-overseer-block to hide -->
<div data-overseer-block>
  This content won't be recorded
</div>

Ignore Elements

Don't record interactions with specific elements:

<!-- Add data-overseer-ignore to skip -->
<input data-overseer-ignore type="text" />

Manual Control

Start Recording

import { startReplay } from '@codmir/overseer';

// Start recording manually
const sessionId = startReplay();
console.log('Recording session:', sessionId);

Stop Recording

import { stopReplay } from '@codmir/overseer';

// Stop recording
stopReplay();

Check Status

import { isReplayActive, getReplaySessionId } from '@codmir/overseer';

if (isReplayActive()) {
  console.log('Session ID:', getReplaySessionId());
}

What's Recorded

Recorded	Not Recorded
DOM changes	Input values (if masked)
Mouse movements	Network payloads
Clicks	LocalStorage data
Scrolls	Console logs
Page navigation	API responses
CSS changes

Linking Errors to Replays

Errors captured during a replay session are automatically linked:

captureException(error);
// Error event includes replayId for linking

In the Codmir dashboard, click "View Replay" on any error to see what the user was doing.

Performance Impact

Session Replay is designed to be lightweight:

CPU: < 1% overhead
Memory: ~5MB buffer
Network: Compressed batches, ~50KB/minute average
Bundle: ~5KB gzipped (tree-shakeable)

Best Practices

Start with error-only recording - Set replaySampleRate: 0 initially
Use privacy controls - Mask sensitive data
Sample in production - 1-10% is typical
Review regularly - Watch replays to understand user behavior