Session Replay
Record and replay user sessions to understand how users interact with your application. Debug issues faster by watching exactly what users experienced.
Overview
Session replay captures user interactions with your application, allowing you to replay sessions to understand user behavior and debug issues. Unlike external services, Temps session replay is fully self-hosted with complete data ownership.
Key Features
- DOM recording with mutations
- Event timeline visualization
- Console log capture
- Network activity recording
- Error correlation
- Privacy controls
Benefits
- Debug issues faster
- Understand user behavior
- Complete data ownership
- No external dependencies
- GDPR compliant
- Unlimited recordings
Features
- Name
DOM Recording- Description
Captures DOM snapshots and mutations, CSS styles, input events (with privacy controls)
- Name
Event Timeline- Description
Visual timeline of all interactions (clicks, scrolls, navigation, errors)
- Name
Console Logs- Description
Captures browser console output during session
- Name
Network Activity- Description
Records API requests and responses (optional)
- Name
Performance Metrics- Description
FPS, memory usage, page load times
- Name
Error Correlation- Description
Links sessions to error events for debugging
Privacy Controls
Session replay includes comprehensive privacy controls to protect user data.
Automatic Redaction
- Password inputs (always masked)
- Credit card fields (always masked)
- Email addresses (configurable)
- Phone numbers (configurable)
- Custom selectors
User Consent
- Opt-in mode (user consent required)
- Opt-out mode (user can disable)
- Geo-based rules (GDPR compliance)
- Sampling rate (record % of sessions)
Setup
Configure Session Replay
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
function App() {
return (
<TempsAnalyticsProvider
projectId="my-app"
sessionReplay={{
enabled: true,
sampling: 0.1, // Record 10% of sessions
privacy: {
maskAllInputs: false,
maskTextContent: false,
blockSelector: '.sensitive-data',
maskSelector: 'input[type="password"], input[type="email"]'
}
}}
>
<YourApp />
</TempsAnalyticsProvider>
);
}
Replay Player
The replay player provides a full-featured interface for watching session recordings.
Player Features:
- Playback controls (play, pause, speed adjustment)
- Timeline scrubber
- Event markers (clicks, navigation, errors)
- Console panel
- Network panel
- Device viewport emulation
Storage Optimization: Session recordings are compressed using efficient algorithms. Average session (~5 minutes) uses ~500KB storage.