Privacy Controls

TraceScout provides comprehensive privacy controls to help you comply with data protection regulations and protect sensitive user information.

Input Masking

Mask All Inputs

The safest option for production environments:

TraceScout.init({
  // ... required options
  recordingMaskAllInputs: true,
});

When enabled, all input values appear as ***** in recordings.

Selective Masking

Use CSS classes to mask specific elements:

<!-- This input will be masked -->
<input type="text" class="tracescout-mask" placeholder="Credit Card">

<!-- This text will be masked -->
<span class="tracescout-mask">Sensitive data here</span>

TraceScout.init({
  recordingMaskAllInputs: false,  // Don't mask everything
  recordingMaskTextClass: 'tracescout-mask',  // Mask elements with this class
});

Blocking Elements

Completely exclude elements from recording:

<!-- This entire section won't appear in recordings -->
<div class="tracescout-block">
  <input type="password" name="password">
  <input type="text" name="ssn" placeholder="Social Security Number">
  <input type="text" name="credit-card" placeholder="Credit Card">
</div>

TraceScout.init({
  recordingBlockClass: 'tracescout-block',
});

Important

Blocked elements appear as empty placeholders in recordings. Users won't see what was typed or displayed in these areas.

Ignoring Interactions

Prevent recording of interactions with specific elements:

<!-- Clicks and interactions with this button won't be recorded -->
<button class="tracescout-ignore">Admin Panel</button>

<!-- Form interactions won't be tracked -->
<form class="tracescout-ignore">
  ...
</form>

TraceScout.init({
  recordingIgnoreClass: 'tracescout-ignore',
});

Privacy-First Configuration

Recommended settings for maximum privacy:

TraceScout.init({
  apiKey: 'ts_api_xxx',
  organizationId: 'xxx',
  projectId: 'xxx',
  environment: 'production',
  
  // Privacy settings
  recordingMaskAllInputs: true,           // Mask all form inputs
  recordingBlockClass: 'pii-data',        // Block PII sections
  recordingIgnoreClass: 'no-track',       // Ignore admin areas
  recordingMaskTextClass: 'sensitive',    // Mask sensitive text
  
  // Don't capture these
  recordingRecordCanvas: false,           // No canvas recording
  recordingCollectFonts: false,           // No font collection
});

HTML Attributes

Use data attributes for fine-grained control:

<!-- Block this element -->
<div data-tracescout-block>Sensitive content</div>

<!-- Mask text in this element -->
<span data-tracescout-mask>user@email.com</span>

<!-- Ignore interactions -->
<button data-tracescout-ignore>Secret Action</button>

Network Request Privacy

Control what network data is captured:

TraceScout.init({
  // Network monitoring settings
  captureRequestHeaders: false,   // Don't capture request headers
  captureResponseHeaders: false,  // Don't capture response headers
  captureRequestBody: false,      // Don't capture request payloads
  captureResponseBody: false,     // Don't capture response payloads
  
  // Exclude specific endpoints
  excludeEndpoints: [
    '/api/auth/*',      // Exclude auth endpoints
    '/api/payments/*',  // Exclude payment endpoints
  ],
});

Console Privacy

Filter sensitive console output:

TraceScout.init({
  // Console capture settings
  consoleCapture: {
    enabled: true,
    levels: ['warn', 'error'],  // Only capture warnings and errors
    maxMessageLength: 500,       // Truncate long messages
    excludePatterns: [
      /password/i,
      /credit.?card/i,
      /ssn/i,
    ],
  },
});

User Data

Control what user data is stored:

// Don't include PII in user identification
TraceScout.setUser('user-id-123', {
  // Safe to include
  plan: 'premium',
  accountAge: 365,
  
  // Avoid including
  // email: 'user@example.com',  // PII
  // name: 'John Doe',           // PII
  // phone: '555-1234',          // PII
});

Sampling

Reduce data collection with sampling:

TraceScout.init({
  // Only record 10% of sessions
  sampleRate: 0.1,
  
  // Or use a function for dynamic sampling
  shouldRecord: (context) => {
    // Record all error sessions
    if (context.hasErrors) return true;
    // Sample 10% of normal sessions
    return Math.random() < 0.1;
  },
});

GDPR Compliance

Cookie Consent Integration

// Wait for consent before initializing
function initTraceScout() {
  if (hasUserConsent('analytics')) {
    TraceScout.init({
      // ... config
    });
  }
}

// Listen for consent changes
window.addEventListener('consent-updated', (e) => {
  if (e.detail.analytics) {
    initTraceScout();
  } else {
    TraceScout.destroy?.();
  }
});

Data Subject Requests

// Stop recording and clear local data
function handleDataDeletionRequest() {
  TraceScout.stopSessionRecording();
  TraceScout.clearSessionStorage();
  
  // Note: Server-side data must be deleted via API
  // Contact support for data deletion requests
}

Best Practices

Privacy Checklist

Enable recordingMaskAllInputs in production
Block sections containing PII with CSS classes
Don't capture request/response bodies with sensitive data
Use sampling to reduce data collection
Integrate with your consent management platform
Document what data is collected in your privacy policy

Example: E-commerce Site

TraceScout.init({
  // ... required options
  
  // Mask all inputs by default
  recordingMaskAllInputs: true,
  
  // Block checkout and payment sections
  recordingBlockClass: 'checkout-sensitive',
  
  // Exclude payment endpoints
  excludeEndpoints: [
    '/api/checkout/*',
    '/api/payment/*',
  ],
  
  // Sample 20% of sessions
  sampleRate: 0.2,
});

<div class="checkout-sensitive">
  <input type="text" placeholder="Card Number">
  <input type="text" placeholder="CVV">
  <input type="text" placeholder="Billing Address">
</div>