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 linkingIn 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: 0initially - Use privacy controls - Mask sensitive data
- Sample in production - 1-10% is typical
- Review regularly - Watch replays to understand user behavior