Session Replay

Watch exactly what users did before an error occurred. Session replay captures DOM changes, clicks, scrolls, and inputs to recreate the user experience.

Enabling Session Replay

Session replay is disabled by default. Enable it in your SDK initialization:

import { Syntropy } from '@eclosion-tech/syntropy-browser';

Syntropy.init({
  projectId: 'your-project-id',
  recording: {
    enabled: true,
  },
});

Configuration Options

Syntropy.init({
  projectId: 'your-project-id',
  recording: {
    // Enable recording (default: false)
    enabled: true,
    
    // Mask all input values (default: true)
    maskAllInputs: true,
    
    // CSS class to mask text content
    maskTextClass: 'syntropy-mask',
    
    // CSS selector for elements to mask
    maskTextSelector: '.sensitive-data',
    
    // CSS class to block recording entirely
    blockClass: 'syntropy-block',
    
    // CSS selector for elements to block
    blockSelector: '.private-section',
    
    // CSS class for elements to ignore
    ignoreClass: 'syntropy-ignore',
    
    // Sample rate for recordings (0.0 - 1.0)
    sampleRate: 1.0,
  },
});

Privacy Controls

Session replay is designed with privacy in mind.

Masking Inputs

By default, all input values are masked. Users will see *** instead of actual typed values:

recording: {
  maskAllInputs: true, // Default
}

Masking Specific Elements

Add the syntropy-mask class to mask text content:

<span class="syntropy-mask">John Doe</span>
<!-- Appears as: ******* -->

<p class="syntropy-mask">user@example.com</p>
<!-- Appears as: ***************** -->

Blocking Elements

Add the syntropy-block class to completely hide elements:

<div class="syntropy-block">
  <!-- This entire element will be hidden in replays -->
  <img src="profile.jpg" />
  <p>Private information</p>
</div>

Custom Selectors

Use CSS selectors for more control:

recording: {
  maskTextSelector: '[data-sensitive], .pii',
  blockSelector: '.credit-card-form, #ssn-input',
}

Viewing Replays

Sessions List

Navigate to Sessions in the dashboard sidebar to see all recorded sessions:

• Filter by project
• See session duration, page count, and click count
• Identify sessions with errors
• Watch replays

From Error Details

When viewing an error, if the session has a recording, you'll see a "Watch Session Replay" button that takes you directly to the replay.

Replay Controls

The replay player includes:

• Play/pause
• Speed control (1x, 2x, 4x, 8x)
• Skip inactive periods
• Timeline scrubbing
• Full-screen mode

How It Works

Session replay uses rrweb to capture DOM changes efficiently:

1. Initial snapshot - Captures the full DOM on page load
2. Incremental updates - Records only changes (mutations, inputs, scrolls)
3. Chunked upload - Sends data in batches to minimize network overhead
4. Playback - Reconstructs the session in the dashboard

Performance Impact

Session recording is designed to be lightweight:

• ~50KB added to bundle (rrweb library)
• Minimal CPU usage - Uses MutationObserver, not polling
• Batched uploads - Sends every 10 seconds or 100 events
• Beacon on unload - Uses navigator.sendBeacon for reliability

Sampling

To reduce data volume, you can sample recordings:

recording: {
  enabled: true,
  sampleRate: 0.5, // Record 50% of sessions
}

Manual Control

Start and stop recording programmatically:

// Start recording manually
Syntropy.startRecording();

// Stop recording
await Syntropy.stopRecording();

// Check if recording
if (Syntropy.isRecording()) {
  console.log('Recording in progress');
}

Storage Considerations

Session recordings require more storage than regular events:

Data Type	Typical Size
Error event	1-5 KB
Session recording	1-5 MB

Plan your storage accordingly when enabling recording.