Agent skill
session-replay
Set up session replay for visual debugging. Use when implementing DOM recording with privacy controls.
Install this agent skill to your Project
npx add-skill https://github.com/nexus-labs-automation/web-observability/tree/main/skills/session-replay
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
user-journey-tracking
Track user journeys with intent context and friction signals. Use when instrumenting funnels or multi-step flows.
bundle-performance
Monitor JavaScript bundle size and execution performance. Use when tracking bundle size, identifying large chunks, or optimizing load performance.
hydration-performance
Measure SSR hydration timing and issues. Use when tracking hydration performance, debugging hydration mismatches, or optimizing SSR/SSG applications.
error-tracking
Set up error tracking with actionable context. Use when configuring error capture or error boundaries.
source-map-setup
Configure source maps for readable stack traces. Use when setting up error tracking, debugging production issues, or configuring build tools.
route-transition-tracking
Measure time from navigation to page fully loaded and interactive. Use when tracking SPA navigation, route changes, or slow page transitions.
Didn't find tool you were looking for?