Session Recording

Mtrix's session recording feature captures user interactions to help you understand exactly how users navigate and interact with your application.

Privacy-First Approach

Session recording in Mtrix is designed with privacy as the top priority:

• Automatic input masking: Form fields are redacted by default

• Custom element exclusion: Mark sensitive areas with data-mtrix-record="false"

• Sampling control: Record only a percentage of sessions

• Storage controls: Control how long recordings are retained

Enabling Session Recording

Enable session recording during initialization:

mtrix.init({
  organizationId: 'your-organization-id',
  projectId: 'your-project-id',
  environment: 'production',
  options: {
    sessionRecording: {
      tracking: true,
      sampleRatio: 0.1,           // Record 10% of sessions
      priority: 'error',          // Always record sessions with errors
      maskTextInputs: true,       // Redact text input values
      excludeSelectors: ['.private', '[data-sensitive]'] // Don't record these elements
    }
  }
});

What Gets Recorded

Session recordings include:

• Mouse movements and clicks

• Scrolling behavior

• Page navigation

• Form interactions (without capturing sensitive data)

• DOM changes

• Console errors

• Network requests (headers only, not payloads)

Advanced Recording Options

Trigger-Based Recording

Instead of recording all sessions, record based on specific triggers:

mtrix.init({
  // ... other config
  options: {
    sessionRecording: {
      tracking: false, // Disable automatic recording
      sampleRatio: 0   // 0% sampling rate
    }
  }
});

// Later, start recording based on a condition
function startRecordingOnError() {
  window.addEventListener('error', (event) => {
    // Force recording for this session due to error
    mtrix.forceRecording();
    
    // Track the error event
    mtrix.trackEvent('JavaScriptError', {
      message: event.message,
      filename: event.filename,
      lineno: event.lineno,
      colno: event.colno
    });
  });
}

Recording Control

Control recording programmatically:

// Start recording for high-value users
if (userValue > 1000) {
  mtrix.forceRecording();
}

// Stop recording on sensitive pages
if (window.location.pathname.includes('/account/settings')) {
  mtrix.stopRecording();
}

DOM Snapshots

Mtrix takes snapshots of the DOM to provide context for user interactions:

// Example: Force a DOM snapshot after dynamic content loads
function captureAfterLoad() {
  const observer = new MutationObserver((mutations) => {
    // Check if our target content has loaded
    if (document.querySelector('.dynamic-content')) {
      // Force recording and snapshot
      mtrix.forceRecording();
      // Disconnect after capturing
      observer.disconnect();
    }
  });
  
  // Start observing
  observer.observe(document.body, { childList: true, subtree: true });
}

Use Cases for Session Recordings

• Error investigation: Understand what led to an error

• Conversion optimization: See why users abandon forms or checkouts

• User experience research: Observe real user behavior

• Customer support: Understand user issues without requiring reproduction steps

By leveraging Mtrix's experimentation, performance monitoring, and session recording features, you can gain deep insights into user behavior and continually optimize your application for better user experience and business outcomes.