Session Replay

Session Replay allows you to watch exactly what users experienced on your website by recording their interactions, mouse movements, scrolls, and clicks.

Overview

StatusRadar uses rrweb for privacy-safe session recording with:

• DOM snapshots: Captures page structure and changes
• Event recording: Mouse moves, clicks, scrolls, inputs
• Privacy controls: Auto-masks sensitive data
• Compression: Gzip compression for efficient storage

Enabling Session Replay

Step 1: Enable in App Settings

1. Go to Dashboard → Observability → Apps
2. Click your app → Settings
3. Enable "Session Replay"
4. Configure Replay Storage Quota (GB/month)
5. Save settings

Step 2: Enable in SDK

import { StatusRadarRUM } from '@statusradar/rum';

const rum = new StatusRadarRUM({
  apiKey: 'your-api-key-here',
  appId: 'your-app-id-here',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',

  // Enable session replay
  sessionReplay: {
    enabled: true,
    sampleRate: 1.0,              // Record 100% of sessions
    maskAllInputs: true,          // Mask all input fields
    maskTextSelector: '.sensitive', // Mask elements with class
    blockSelector: '.private',    // Block elements from recording
    ignoreClass: 'sr-ignore',     // Ignore elements with class
    inlineStylesheet: true,       // Inline CSS for accuracy
    recordCanvas: false           // Don't record canvas elements
  }
});

rum.start();

Configuration Options

Sample Rate

Control which percentage of sessions to record:

sessionReplay: {
  enabled: true,
  sampleRate: 0.1  // Record 10% of sessions
}

Privacy Controls

Mask All Inputs

sessionReplay: {
  maskAllInputs: true  // Masks all <input>, <textarea>, <select>
}

Mask Specific Elements

sessionReplay: {
  maskTextSelector: '.password, .credit-card, .ssn'
}

Block Elements from Recording

sessionReplay: {
  blockSelector: '.admin-panel, [data-sensitive]'
}

HTML Attributes

Mark elements directly in HTML:

<!-- Mask this input -->
<input type="text" class="sr-mask" />

<!-- Block this section from recording -->
<div class="sr-block">
  Sensitive content here
</div>

<!-- Ignore this element completely -->
<div class="sr-ignore">
  Never recorded
</div>

Viewing Replays

Dashboard Navigation

1. Go to Dashboard → Observability → Apps → [Your App]
2. Click "Sessions" tab
3. Click any session to view replay

Replay Player Controls

• Play/Pause: Space bar or click button
• Speed: 1x, 2x, 4x playback
• Skip Inactivity: Auto-skip long pauses
• Inspect Mode: Click elements to see details
• Timeline: Jump to specific timestamp

Session Metadata

Each session includes:

• Duration: Total session length
• Page Views: Pages visited
• Errors: JavaScript errors during session
• Browser: User agent, OS, device
• Geography: Country, city (if available)
• Performance: Average page load time

Use Cases

Debug User-Reported Issues

User: "The checkout button doesn't work"

1. Search sessions by user ID or email
2. Watch replay to see exact behavior
3. Identify issue (button hidden, JS error, etc.)

Optimize UX

Watch recordings to identify:

• Rage clicks (repeated clicks on non-responsive elements)
• Dead clicks (clicks with no action)
• Form abandonment patterns
• Confusing navigation flows

Analyze Conversion Funnels

Filter sessions by:

• Converted vs abandoned
• Entry page
• Exit page
• Time on site

Privacy & Compliance

Auto-Masking

StatusRadar automatically masks:

• Password fields (type="password")
• Credit card inputs (detected by pattern)
• Social security numbers
• Email addresses (when configured)

GDPR Compliance

// Don't start replay until user consents
if (userHasConsented()) {
  rum.configure({
    sessionReplay: { enabled: true }
  });
}

Data Retention

Configure retention period in app settings:

• 7 days
• 30 days
• 90 days
• Custom

Storage Quotas

Replay data is compressed (gzip) before storage.

Typical session sizes:

• Simple page: 50-100 KB
• E-commerce site: 200-500 KB
• Rich SPA: 500KB-2MB

Example: 1GB quota ≈ 2,000-10,000 sessions depending on complexity

Performance Impact

Session Replay adds minimal overhead:

• Initial bundle: +3KB gzipped (lazy loaded)
• Memory: ~5MB for 10-minute session
• CPU: <1% on modern browsers
• Network: Batched uploads every 10 seconds

Advanced Configuration

Conditional Recording

Record only specific conditions:

const rum = new StatusRadarRUM({
  apiKey: 'your-api-key',
  appId: 'your-app-id',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',

  sessionReplay: {
    enabled: true,
    // Only record if user encounters error
    startRecordingOn: 'error',
    // Or record after specific event
    startRecordingAfter: () => {
      return window.location.pathname.includes('/checkout');
    }
  }
});

Canvas Recording

Enable for apps with canvas elements:

sessionReplay: {
  recordCanvas: true,
  sampling: {
    canvas: 15  // Record canvas at 15 FPS
  }
}

Screenshot on Error

Capture screenshot when error occurs:

rum.on('error', (error) => {
  rum.captureScreenshot({
    includeInReplay: true
  });
});

Troubleshooting

Replay not recording

1. Check quota: Dashboard → Observability → Apps → Usage
2. Verify sessionReplay.enabled = true
3. Check browser console for errors
4. Ensure sample rate > 0

Styles missing in replay

sessionReplay: {
  inlineStylesheet: true,  // Inline CSS
  inlineImages: true       // Inline small images
}

Large replay file size

1. Reduce sample rate
2. Disable canvas recording
3. Block heavy elements (ads, videos)
4. Reduce recording FPS

sessionReplay: {
  sampling: {
    scroll: 100,    // Record scroll every 100ms
    mousemove: 50,  // Record mouse move every 50ms
    input: 500      // Record input every 500ms
  }
}

API Reference

Start/Stop Recording

// Start recording
rum.startReplay();

// Stop recording
rum.stopReplay();

// Check if recording
if (rum.isReplayActive()) {
  console.log('Recording active');
}

Get Session URL

const sessionUrl = rum.getSessionReplayUrl();
console.log('View replay:', sessionUrl);

Next Steps

• Custom Events - Track application events
• Error Tracking - Debug with replay context
• Quota Management - Monitor storage usage