Skip to main content
Configure session replay to match your performance, privacy, and debugging needs.

​
Basic Configuration

Session replay is enabled by default in browser environments: 
import Proliferate from '@proliferate/sdk';

Proliferate.init({
  endpoint: 'https://api.proliferate.com/api/v1/errors',
  apiKey: 'pk_your_api_key',
  replay: {
    enabled: true,  // Default: true in browser
  },
});

​
Full Options Reference

Proliferate.init({
  replay: {
    // Enable/disable replay recording
    enabled: true,

    // Buffer limits
    maxBufferMinutes: 5,      // Max time span in buffer
    maxBufferEvents: 10000,   // Max events in buffer
    maxBufferBytes: 5242880,  // Max buffer size (5 MB)

    // Privacy options
    blockClass: 'no-capture',    // CSS class to exclude elements
    ignoreClass: 'ignore-input', // CSS class to ignore inputs
    maskTextClass: 'mask',       // CSS class to mask text
    maskAllInputs: true,         // Mask all input values

    // Performance options
    recordCanvas: false,              // Record canvas elements
    mutationThrottleBucketSize: 100,  // Mutations per element limit
    mutationThrottleRefillRate: 10,   // Refill rate per second

    // Idle detection
    idleTimeoutMs: 300000,  // Idle timeout (5 minutes)
  },
});

​
Buffer Configuration

​
maxBufferMinutes
number
default:"5"
How long replay data is kept in memory. Shorter values use less memory but provide less context.
​
maxBufferEvents
number
default:"10000"
Maximum number of recorded events. High-activity pages may hit this limit faster than the time limit.
​
maxBufferBytes
number
default:"5242880"
Maximum buffer size in bytes (5 MB). Useful for memory-constrained environments.

​
Privacy Configuration

​
blockClass
string
default:"no-capture"
CSS class that completely excludes elements from recording.
​
ignoreClass
string
default:"ignore-input"
CSS class that prevents input events from being recorded.
​
maskTextClass
string
default:"mask"
CSS class that masks text content.
​
maskAllInputs
boolean
default:"true"
Whether to mask all input values. Set to false only if you’re confident no sensitive data is entered.

​
Performance Configuration

​
recordCanvas
boolean
default:"false"
Whether to record canvas element content. Enable only if canvas content is essential for debugging.
​
mutationThrottleBucketSize
number
default:"100"
Token bucket size for mutation throttling. Higher values allow more mutations before throttling.
​
idleTimeoutMs
number
default:"300000"
How long before the user is considered idle (5 minutes). During idle, incremental recording pauses.

​
Manual Control

​
Starting Replay

// Initialize with replay disabled
Proliferate.init({
  replay: { enabled: false },
});

// Start later (e.g., after user consent)
await Proliferate.startReplay({
  maxBufferMinutes: 5,
  maskAllInputs: true,
});

​
Stopping Replay

Proliferate.stopReplay();
After stopping, the buffer is cleared and errors will have no replay attached.

​
Checking Status

const isRecording = Proliferate.isReplayRecording();
console.log('Replay recording:', isRecording);

​
Getting Buffer Stats

const stats = Proliferate.getReplayStats();

if (stats) {
  console.log('Event count:', stats.eventCount);
  console.log('Buffer size:', stats.sizeBytes, 'bytes');
  console.log('Has snapshot:', stats.hasFullSnapshot);
}

​
Conditional Recording

Proliferate.init({
  replay: {
    enabled: process.env.NODE_ENV === 'production',
  },
});

​
Configuration Examples

Proliferate.init({
  replay: {
    enabled: true,
    maskAllInputs: true,
    blockClass: 'sensitive-section',
    maxBufferMinutes: 2,  // Minimal retention
  },
});

Proliferate.init({
  replay: {
    enabled: true,
    maxBufferEvents: 5000,          // Lower event limit
    maxBufferBytes: 2 * 1024 * 1024, // 2 MB max
    mutationThrottleBucketSize: 50, // Aggressive throttling
    recordCanvas: false,
    idleTimeoutMs: 60000,           // 1 minute idle timeout
  },
});

Proliferate.init({
  replay: {
    enabled: true,
    maxBufferMinutes: 10,    // Longer buffer for debugging
    maxBufferEvents: 20000,  // More events
    maskAllInputs: false,    // See actual values in dev
  },
});

Proliferate.init({
  replay: {
    enabled: true,
    blockClass: 'payment-info',  // Block payment forms
    maskTextClass: 'pii',        // Mask personal info
    maxBufferMinutes: 5,
  },
});

<section class="checkout">
  <div class="shipping-info">
    <p class="pii">{user.address}</p>
  </div>
  <div class="payment-info">
    <CreditCardForm />  <!-- Completely blocked -->
  </div>
</section>