session-replay
Set up session replay for visual debugging. Use when implementing DOM recording with privacy controls.
When & Why to Use This Skill
This Claude skill enables developers to implement session replay functionality for advanced visual debugging. It facilitates the setup of DOM recording to capture user interactions, allowing teams to reproduce complex frontend issues with precision. The skill emphasizes privacy-first implementation with robust data masking and performance optimization, supporting major platforms like Sentry, Datadog, and LogRocket to bridge the gap between error logs and actual user experiences.
Use Cases
- Reproducing intermittent or 'hard-to-replicate' frontend bugs by watching the exact visual sequence of user actions leading to a crash.
- Streamlining QA and customer support investigations by providing technical teams with visual context of user-reported errors.
- Identifying user friction and UI confusion points by analyzing session recordings to optimize user experience and interface design.
- Implementing privacy-compliant session monitoring by automatically masking sensitive PII, financial data, and credentials during recording.
| name | session-replay |
|---|---|
| description | Set up session replay for visual debugging. Use when implementing DOM recording with privacy controls. |
| priority | 3 |
Session Replay
Capture visual recordings of user sessions for debugging.
When to Use
- Reproducing hard-to-debug issues
- Understanding user confusion
- QA and support investigations
- Validating error context
Privacy Requirements (Must Do)
Mask by default:
- All text input fields
- Passwords and sensitive data
- Financial information
- Personal identifiers
- User photos/documents
- Chat messages
Performance Budget
| Resource | Limit |
|---|---|
| CPU | <3% additional |
| Memory | <10MB additional |
| Network | Batch uploads, compress |
| Bundle | Lazy load SDK |
Best Practices
| Do | Don't |
|---|---|
| Lazy load replay SDK | Include in main bundle |
| Mask all inputs by default | Allow recording of inputs |
| Sample sessions (10-20%) | Record 100% |
| Focus on error sessions | Record everything |
| Test privacy masking | Assume it works |
Sampling Strategy
replaysSessionSampleRate: 0.1 // 10% of sessions
replaysOnErrorSampleRate: 1.0 // 100% of error sessions
Implementation
Load vendor-specific configuration from references/platforms/*.md when generating code.
| Vendor | Config Reference |
|---|---|
| Sentry | references/platforms/sentry.md |
| Datadog | references/platforms/datadog.md |
| LogRocket | references/platforms/logrocket.md |
| FullStory | references/platforms/fullstory.md |
Related
skills/error-tracking- Correlating errors with replaysskills/user-journey-tracking- Session context