Session Replay

Pro Feature

Watch exactly how users interact with your website. Session Replay records mouse movements, clicks, scrolls, and page interactions so you can understand user behavior at the individual level.

---

Overview

Session Replay captures a video-like recording of user sessions without actually recording video. Using DOM snapshots and incremental changes, replays are lightweight (~50-100KB per session) yet provide complete fidelity of the user experience.

Key Benefits

• Debug Issues Faster: See exactly what users experienced before reporting a bug
• Identify UX Problems: Watch users struggle with confusing interfaces
• Improve Conversions: Understand why users abandon checkout or signup flows
• Validate Changes: Confirm that new features work as expected in production
• Privacy-First: Automatically masks sensitive data like passwords and credit cards

---

Enabling Session Replay

Step 1: Enable in Dashboard

1. Go to Settings → Your Website → Features
2. Toggle Session Replay to enabled
3. Configure your recording mode (see Trigger Modes)
4. Save changes

Step 2: Verify Installation

The tracking script automatically starts recording once enabled. Verify it's working:

1. Visit your website
2. Perform some interactions (clicks, scrolls, typing)
3. Go to Sessions in your Zenovay dashboard
4. Your session should appear within 30 seconds

---

Trigger Modes

Control when sessions are recorded and uploaded to optimize storage and focus on what matters most.

All Sessions (all)

Records and uploads every session.

Best for:

• Early-stage products needing maximum visibility
• Low-traffic websites
• Testing and QA environments

Configuration:

{
  "session_replay_trigger": "all"
}

Errors Only (errors_only)

Always records in background, but only uploads sessions where JavaScript errors occur. Uses retroactive capture to include events leading up to the error.

Best for:

• Production environments with high traffic
• Debugging-focused teams
• Cost-conscious usage

Configuration:

{
  "session_replay_trigger": "errors_only"
}

How it works:

1. Recording starts immediately in memory buffer
2. When an error occurs, buffer is flushed and uploaded
3. You get complete context of what happened before the error

Smart Mode (smart)

Intelligently uploads sessions based on multiple signals:

• JavaScript Errors: Any unhandled exception
• Frustration Signals: Rage clicks, dead clicks, form abandonment
• High-Value Visitors: Visitors showing purchase intent or engagement

Best for:

• Balanced coverage without overwhelming data
• Product teams focused on UX optimization
• E-commerce conversion optimization

Configuration:

{
  "session_replay_trigger": "smart"
}

Frustration detection includes:

• Rage clicks: 3+ clicks in the same area within 500ms
• Dead clicks: Clicks on non-interactive elements
• Form frustration: Multiple failed form submissions
• Scroll thrashing: Rapid up-down scrolling

---

Privacy Controls

Session Replay is designed with privacy as a core principle. Sensitive information is automatically protected.

Automatic Masking

By default, Zenovay masks:

• Password inputs (<input type="password">)
• Credit card fields (<input type="cc-number">, etc.)
• Social security numbers
• Email fields (configurable)
• Any element with data-private

Manual Masking

Add the mask attribute to any element:

<!-- Mask sensitive content -->
<div data-private>
  This content will be hidden in replays
</div>

<!-- Mask form field -->
<input type="text" name="ssn" data-private />

Block Recording Entirely

Exclude specific elements or sections from recording:

<!-- Don't record this section at all -->
<div data-private>
  <video><!-- Video content not recorded --></video>
</div>

GDPR Compliance

• No cookies required: Session Replay works with first-party data only
• Data minimization: Only DOM changes are recorded, not actual values
• Right to erasure: Sessions can be deleted on request
• Consent integration: Respect visitor consent preferences

See GDPR Compliance for detailed configuration.

---

Viewing Sessions

Session List

Navigate to Sessions in your dashboard to see all recorded sessions.

Filter by:

• Date range
• Device type
• Country
• Has errors
• Has frustration signals
• Session duration

Sort by:

• Most recent
• Longest duration
• Most errors
• Highest frustration score

Session Player

Click any session to open the replay player.

Player Features:

• Play/Pause: Standard playback controls
• Speed: 1x, 2x, 4x playback speed
• Timeline: Scrub to any point in the session
• Event Markers: See clicks, errors, and frustration events on timeline
• Console: View JavaScript errors that occurred
• Network: See failed API requests (Enterprise)

Keyboard Shortcuts:

• Space: Play/Pause
• ← / →: Skip 5 seconds
• 1 / 2 / 4: Set playback speed
• F: Toggle fullscreen

---

Session Metadata

Each session captures contextual information:

---

Integration with Error Tracking

When Error Tracking is enabled, session replays are automatically linked to errors.

Error Context

From any error in your error dashboard:

1. Click View Session
2. Replay opens at the moment the error occurred
3. Scrub backwards to see what led to the error

Stack Trace Correlation

Error stack traces are displayed alongside the replay timeline, showing exactly when and where code failed.

---

Storage & Retention

Data Storage

Session replay data is stored in Cloudflare R2 (S3-compatible storage) with:

• Encryption at rest: AES-256
• Geographic redundancy: Multi-region replication
• Edge caching: Fast playback from nearest location

Retention Periods

Sessions are automatically cleaned up after the retention period.

---

Performance Impact

Session Replay is designed for minimal impact:

Optimization Tips

1. Use appropriate trigger mode: errors_only or smart for high-traffic sites
2. Block heavy elements: Exclude videos, complex animations, iframes
3. Sample recording: Use sampling rate for very high traffic

---

Configuration Reference

Configure session replay via website settings:

{
  "feature_flags": {
    "enable_session_replay": true,
    "session_replay_trigger": "smart",
    "replay_sampling_rate": 0.02
  }
}

Options

---

Troubleshooting

Sessions Not Appearing

1. Check feature is enabled: Settings → Features → Session Replay
2. Verify trigger mode: errors_only won't upload until an error occurs
3. Check browser console: Look for Zenovay initialization messages
4. Wait for upload: Sessions upload when user leaves page or after 2 minutes

Replay Not Playing

1. Check data integrity: Session may have incomplete data
2. Try different browser: Some older browsers have playback issues
3. Reload the page: Clear browser cache and retry

Privacy Masking Not Working

1. Verify attribute syntax: Use data-private (not data-mask)
2. Check parent elements: Masking doesn't inherit from parents
3. Inspect DOM: Ensure attribute is present in rendered HTML

---

API Access

Access session data programmatically via the Sessions API.

List Sessions

GET /api/websites/:websiteId/sessions
Authorization: Bearer YOUR_API_KEY

Get Session Events

GET /api/replay/:sessionId
Authorization: Bearer YOUR_API_KEY

---

Best Practices

1. Start with smart mode - Get the most valuable sessions without overwhelming storage
2. Mask aggressively - When in doubt, mask sensitive content
3. Review regularly - Schedule weekly session review for UX insights
4. Share with team - Use session links to communicate issues
5. Combine with analytics - Use quantitative data to find sessions to watch

---

Next Steps

• Error Tracking - Automatically capture JavaScript errors
• Heatmaps - See aggregate click and scroll patterns
• GDPR Compliance - Configure privacy settings