Skip to main content

​
What Is Session Replay?

Voidr Session Replay captures and reconstructs real user sessions in your web application. You can see exactly what users experienced:
  • Clicks and navigation
  • Errors and console logs
  • Network requests and performance
  • UI behavior over time
All sessions are replayed inside an interactive player with full technical context.

​
What Is It Used For?

  • Generate automated tests from real usage
  • Analyze how features are actually used

​
Installation (1 Minute)

​
Step 1: Add the Script to the <head> of Your HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Application</title>

  <!-- Voidr Session Replay -->
  <script src="https://cdn.voidr.com/collector/latest/recorder.min.js"></script>
  <script>
    VoidrCollector.init({
      apiKey: "your-api-key-here",
      user: {
        id: "user-123"
      }
    });
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

​
Step 2: Get Your API Key

  1. Go to: https://app.voidr.com/settings/api-keys
  2. Click Generate New Key
  3. Copy and paste it into your code

​
Step 3: Verify It’s Working

Open your application and visit: https://app.voidr.com/sessions You should see your session appearing in real time.
No npm, webpack, or build step required.
Just copy, paste, and it works.

​
What Is Captured?

​
User Interactions

  • Clicks (buttons, links, elements)
  • Form inputs
  • Scroll and navigation
  • Mouse events (hover, movement)

​
Errors and Console

  • JavaScript errors (window.onerror)
  • Unhandled promise rejections
  • Console logs (optional)
  • Full stack traces

​
Network Requests

  • Fetch and XHR calls
  • Status codes and response times
  • Performance timing (DNS, SSL, TTFB)
  • Third-party requests

​
Privacy by Design

  • Sensitive data is anonymized server-side
  • Passwords, credit cards, IDs are always masked
  • Capture behavior is fully configurable

​
Configuration Parameters

​
Configuration Structure

Session Replay configuration is organized by areas of responsibility: 
VoidrCollector.init({
  // Authentication
  apiKey: "your-key",

  // Identification
  applicationId: "app-name",
  environment: "production",

  // User Context
  user: {
    id: "user-123",
    email: "john.dewey@example.com",
    name: "John Dewey"
  },

  // Recording Control
  samplingRate: 0.1,
  sessionTimeout: 30,

  // Capture
  networkCapture: true,
  captureConsole: true,

  // Privacy
  dataMasking: {
    inputs: true,
    text: false,
    blockSelectors: ["[data-sensitivity=\\"block\\"]"]
  },

  // Custom Metadata
  meta: { "user_plan": "premium" }
})
Each section controls a specific aspect of Session Replay behavior.

​
Quick Reference Table

ParameterTypeRequiredDefaultDescription
apiKeystring✅ Yes—Authentication key
user.idstring✅ Yes—Unique user identifier
user.emailstringNonullUser email
user.namestringNonullUser name
applicationIdstringNonullApplication identifier
environmentstringNonullproduction, staging, etc
samplingRatenumberNo0.1Sampling rate (0 to 1)
sessionTimeoutnumberNo30Inactivity timeout (minutes)
networkCapturebooleanNotrueCapture network requests
captureConsolebooleanNotrueCapture console logs
dataMasking.inputsbooleanNofalseMask input values
dataMasking.textbooleanNofalseMask all page text
dataMasking.blockSelectorsarrayNosee belowCSS selectors to block
metaobjectNonullCustom metadata

​
Parameter Details

​
1. apiKey (required)

What it does: Authenticates your application with the Voidr platform. 
VoidrCollector.init({
  apiKey: "voidr_live_abc123",
  user: { id: "123" }
});

​
2. user.id (required)

What it does: Identifies the user using your application. Important: This value must be stable across sessions (always the same for the same user). 
VoidrCollector.init({
  apiKey: "your-key",
  user: {
    id: "user-42"
  }
});
Tip: If there’s no login, use a unique browser ID (localStorage).

​
3. user.email and user.name (optional)

What it does: Adds information to facilitate search and session identification. 
VoidrCollector.init({
  apiKey: "your-key",
  user: {
    id: "user-42",
    email: "john.dewey@example.com",
    name: "John Dewey"
  }
});
⚠️ Privacy: Emails are automatically anonymized on the server (e.g., j***@c******.com).
What it does: Separates sessions when you have multiple applications. 
VoidrCollector.init({
  apiKey: "your-key",
  applicationId: "admin-dashboard",
  user: { id: "user-123" }
});
Identifies the environment where the session occurred
(e.g. production, staging).

​
samplingRate

Controls how many sessions are recorded.
  • 1.0 → 100% of sessions
  • 0.1 → 10% of sessions (default)
Sampling happens at session start and applies for the entire session.

​
sessionTimeout

Defines how long inactivity ends a session. 
VoidrCollector.init({
  sessionTimeout: 60 // minutes
});

​
networkCapture

Captures Fetch and XHR requests. 
VoidrCollector.init({
  networkCapture: false
});
Sensitive headers are never captured.

​
captureConsole

Captures console.log, warn, error, and info. 
VoidrCollector.init({
  captureConsole: false
});

​
dataMasking.inputs

Masks all input values before sending data. 
VoidrCollector.init({
  dataMasking: {
    inputs: true
  }
});

​
dataMasking.text

Masks all visible text on the page. 
VoidrCollector.init({
  dataMasking: {
    text: true
  }
});
Use only for highly regulated environments.

​
dataMasking.blockSelectors

Completely blocks elements from capture. 
VoidrCollector.init({
  dataMasking: {
    blockSelectors: [
      '[data-sensitivity="block"]',
      '.pii-data',
      '#private-section',
      'input[type="password"]'
    ]
  }
});
Blocking is cascading: child elements are also blocked.

​
meta (Custom Metadata)

Adds searchable metadata to sessions. 
VoidrCollector.init({
  meta: {
    plan: "enterprise",
    feature_flags: ["new-checkout", "dark-mode"]
  }
});

​
Privacy Protection

​
Server-Side (Automatic)

Voidr always masks:
  • Emails
  • Phone numbers
  • IDs (CPF, SSN, etc)
  • Credit cards and CVV
  • Passwords
No configuration required.

​
Client-Side (Configurable)

VoidrCollector.init({
  dataMasking: {
    inputs: true,
    blockSelectors: ['.payment-section']
  }
});

​
Full Example

<!-- Voidr Session Replay -->
<script src="https://cdn.voidr.com/collector/latest/recorder.min.js"></script>
<script>
  VoidrCollector.init({
    apiKey: "voidr_live_your_api_key_here",
    applicationId: "my-web-app",
    environment: "production",
    user: {
      id: "user-123",
      email: "john.dewey@example.com",
      name: "John Dewey"
    },
    samplingRate: 0.1,
    sessionTimeout: 30,
    networkCapture: true,
    captureConsole: true,
    dataMasking: {
      inputs: true,
      blockSelectors: [
        '[data-sensitivity="block"]',
        '.payment-section',
        '.credit-card-form',
        'input[type="password"]'
      ]
    },
    meta: {
      user_plan: "premium",
      app_version: "2.5.0",
      release_channel: "stable"
    }
  });
</script>

​
Where to View Sessions

Access the session player at: https://app.voidr.com/user-monitoring

​
Support

Need help?
Contact your Forward Deployment Engineer (FDE).