LogRocket Setup & Implementation

Overview

LogRocket is a session replay and application monitoring platform that records everything users do on your website or web application. Unlike traditional analytics tools that rely on discrete events, LogRocket captures the complete user experience including DOM mutations, console logs, network requests, JavaScript errors, and Redux/Vuex/NgRx state changes. This session-first approach enables development and support teams to reproduce bugs, understand user behavior, and diagnose issues without guessing or requiring extensive logging.

Key Capabilities

Session Replay: Record and playback user sessions with perfect fidelity

• DOM recording captures all user interactions, clicks, scrolls, and navigation
• Console logs preserved for debugging context
• Network activity monitored (XHR, Fetch, WebSocket)
• Performance metrics tracked (page load, resource timing, Core Web Vitals)

Error Tracking and Debugging:

• JavaScript errors captured with full session context
• Source map support for production error debugging
• Stack traces showing original code (not minified/bundled)
• Network errors and failed API calls surfaced

State Management Integration:

• Redux DevTools integration with action replay
• Vuex state tracking
• NgRx support for Angular applications
• Custom state management through plugins

User Identification and Search:

• Identify users to associate sessions with customer data
• Search sessions by user properties, events, or errors
• Build cohorts based on user attributes or behavior

Privacy and Compliance:

• Input sanitization to protect sensitive data (passwords, credit cards, PII)
• Network request/response filtering
• CSS-based privacy controls for selective content hiding
• GDPR and compliance-friendly configuration options

When to Use LogRocket

Ideal For:

• Debugging production issues that are difficult to reproduce
• Understanding user flows and drop-off points
• Providing context for support tickets
• Monitoring application performance
• Analyzing the impact of code changes on user experience
• Identifying UX friction points

Not Ideal For:

• High-traffic public websites with anonymous users (session limits may apply)
• Sites with extremely strict privacy requirements prohibiting session recording
• Static content sites with minimal user interaction
• Applications where session replay would expose highly sensitive workflows

Implementation Phases

Phase 1: Discovery & Access

Account Setup and App Configuration

1. Create LogRocket Account: Sign up at logrocket.com and create your organization
2. Create Applications: Set up separate apps for each environment or use conditional initialization
   • Option A: Separate apps for dev, staging, production (cleaner separation)
   • Option B: Single app with conditional init based on environment (simpler config)
3. Collect App IDs: Document app ID for each environment (format: abc123/my-app-name)
4. Set Up Team Access: Invite team members and configure role-based access

Environment Strategy Decision

Privacy Requirements Definition

Define your privacy policy and identify sensitive data to protect:

Data to Sanitize:

• Form inputs: passwords, credit card numbers, SSNs, email addresses
• Network requests: auth tokens, API keys, personal information
• State: user credentials, payment details, health information
• DOM content: specific elements containing PII

Privacy Controls to Implement:

• Input sanitization patterns (e.g., .*password.*, .*cc.*)
• Network request/response filters
• CSS privacy classes (.logrocket-private, .logrocket-hidden)
• State redaction rules for Redux/Vuex/NgRx

User Identification Strategy

Plan when and how to identify users:

Identification Timing:

• On Authentication: Call LogRocket.identify() immediately after login
• On Page Load: Identify returning users if session persists
• Before Critical Actions: Ensure user identified before checkout, support contact, etc.

User Properties to Include:

// Example user identification
LogRocket.identify('user-123', {
  name: 'Jane Smith',
  email: 'jane@example.com',
  subscriptionType: 'premium',
  signupDate: '2024-01-15'
});

Considerations:

• Balance between useful data and privacy
• Never include passwords or sensitive credentials
• Consider GDPR implications of tracking email addresses
• Plan for anonymous vs. authenticated sessions

Source Map Upload Workflow

Plan how to upload source maps for production debugging:

Upload Methods:

• CLI Upload: logrocket upload command in CI/CD pipeline
• Webpack Plugin: Automatic upload during build
• Manual Upload: Via LogRocket dashboard (not recommended for production)

CI/CD Integration Planning:

• Obtain upload tokens from LogRocket dashboard
• Store tokens securely in CI/CD secrets
• Configure build pipeline to upload maps after production builds
• Version source maps to match deployed code

Phase 2: Instrumentation Build

SDK Installation

Install LogRocket via npm or yarn:

# NPM
npm install --save logrocket

# Yarn
yarn add logrocket

# CDN (not recommended for production)
<script src="https://cdn.logrocket.io/LogRocket.min.js"></script>

Early Initialization

Initialize LogRocket as early as possible in your application lifecycle:

// As early as possible in your app (before other code)
import LogRocket from 'logrocket';

LogRocket.init('abc123/my-app-name', {
  // Configuration options
  console: {
    shouldAggregateConsoleErrors: true
  },
  network: {
    requestSanitizer: request => {
      // Sanitize request headers/body
      return request;
    },
    responseSanitizer: response => {
      // Sanitize response data
      return response;
    }
  }
});

Privacy Configuration

Implement privacy controls:

Input Sanitization:

LogRocket.init('abc123/my-app-name', {
  dom: {
    inputSanitizer: true // Automatically sanitize all password fields
  }
});

CSS Privacy Classes:

<!-- Element content will be hidden in replays -->
<div class="logrocket-private">
  Sensitive content here
</div>

<!-- Element will not be recorded at all -->
<div class="logrocket-hidden">
  Completely hidden
</div>

Network Request Filtering:

LogRocket.init('abc123/my-app-name', {
  network: {
    requestSanitizer: request => {
      // Remove auth headers
      if (request.headers.Authorization) {
        request.headers.Authorization = '[REDACTED]';
      }

      // Filter request body
      if (request.body) {
        request.body = sanitizeBody(request.body);
      }

      return request;
    }
  }
});

State Management Integration

Integrate with Redux, Vuex, or NgRx:

Redux Integration:

import LogRocket from 'logrocket';
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware())
);

Vuex Integration:

import LogRocket from 'logrocket';
import { createStore } from 'vuex';

const store = createStore({
  // store config
  plugins: [LogRocket.vuexPlugin()]
});

State Sanitization:

LogRocket.reduxMiddleware({
  actionSanitizer: action => {
    if (action.type === 'SET_PASSWORD') {
      return {
        ...action,
        password: '[REDACTED]'
      };
    }
    return action;
  },
  stateSanitizer: state => {
    return {
      ...state,
      auth: {
        ...state.auth,
        token: '[REDACTED]'
      }
    };
  }
});

User Identification Implementation

Implement user identification throughout your application:

// After successful login
function handleLogin(user) {
  LogRocket.identify(user.id, {
    name: user.name,
    email: user.email,
    subscriptionType: user.subscription
  });
}

// On page load for logged-in users
if (currentUser) {
  LogRocket.identify(currentUser.id, {
    name: currentUser.name,
    email: currentUser.email
  });
}

Custom Event Tracking

Track key business events:

// Track custom events
LogRocket.track('Purchase Completed', {
  orderId: '12345',
  total: 99.99,
  items: 3
});

LogRocket.track('Feature Used', {
  feature: 'export-data',
  format: 'csv'
});

Phase 3: QA & Launch

Session URL Verification

Test that sessions are being recorded:

// Log session URL to console
LogRocket.getSessionURL(sessionURL => {
  console.log('LogRocket Session:', sessionURL);
});

Privacy Controls Testing

Verify sensitive data is properly sanitized:

1. Enter test data in password fields → Should be masked in replay
2. Submit forms with PII → Check network tab in replay for sanitization
3. Review Redux/Vuex actions → Verify sensitive state is redacted
4. Check elements with .logrocket-private class → Confirm hidden in replay

State Management Validation

For Redux/Vuex applications:

1. Trigger actions that modify state
2. Open LogRocket session replay
3. Navigate to Redux/Vuex tab
4. Verify actions appear in timeline
5. Check state snapshots are captured
6. Confirm sanitization rules are applied

Source Map Upload Testing

1. Generate production build with source maps
2. Upload source maps to LogRocket:

   logrocket upload --release=1.2.3 --dist=./dist
   

3. Trigger a JavaScript error in production
4. Open error in LogRocket
5. Verify stack trace shows original source code (not minified)

Integration Testing

Test third-party integrations:

Sentry Integration:

import * as Sentry from '@sentry/browser';
import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';

LogRocket.init('abc123/my-app-name');
setupLogRocketReact(LogRocket);

// Link Sentry errors to LogRocket sessions
LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Intercom Integration:

LogRocket.getSessionURL(sessionURL => {
  window.Intercom('update', {
    logrocket_session_url: sessionURL
  });
});

Configuration Reference

Essential Options

LogRocket.init('abc123/my-app-name', {
  // Release version for correlating sessions with deploys
  release: '1.2.3',

  // Console recording
  console: {
    shouldAggregateConsoleErrors: true,
    isEnabled: {
      log: true,
      info: true,
      debug: true,
      warn: true,
      error: true
    }
  },

  // DOM recording
  dom: {
    inputSanitizer: true,
    textSanitizer: false,
    baseHref: undefined
  },

  // Network recording
  network: {
    isEnabled: true,
    requestSanitizer: undefined,
    responseSanitizer: undefined
  },

  // Browser configuration
  browser: {
    urlSanitizer: undefined,
    isCrossDomainEnabled: false
  },

  // Performance options
  shouldCaptureIP: false,
  shouldDebugLog: false,
  shouldParseXHRBlob: false
});

Privacy Options

Deployment Artifacts

Required Documentation

Implementation Specification

• App ID mapping for each environment (dev, staging, production)
• Initialization configuration with privacy settings
• User identification strategy and timing
• Custom event catalog and naming conventions
• State management integration details (Redux/Vuex/NgRx)

Privacy Documentation

• Input sanitization rules and patterns
• Network request/response filtering logic
• CSS privacy class usage guidelines
• State redaction rules for sensitive data
• Compliance considerations (GDPR, CCPA, HIPAA)

Source Map Upload Configuration

• Upload credentials and token management
• CI/CD integration details
• Build versioning strategy
• Rollback procedures for source map issues

Integration Documentation

• Error tracking integration (Sentry, Bugsnag)
• Support tool integration (Intercom, Zendesk, Help Scout)
• Monitoring platform integration (Datadog, New Relic)
• Analytics integration (Google Analytics, Segment)

Linked Runbooks

• Install or Embed the Tag or SDK - Detailed installation methods and code examples
• Event Tracking - Custom event tracking and user identification
• Data Layer Setup - Data structure and user properties
• Cross-Domain Tracking - Multi-domain session tracking
• Server-Side vs Client-Side - Architecture decisions and SSR support

Validation Checklist

Pre-Launch

• LogRocket SDK installed and initialized
• App ID correct for target environment
• Privacy settings configured (input sanitization, network filtering)
• User identification implemented at appropriate points
• State management integration tested (Redux/Vuex/NgRx)
• Source maps uploaded and verified
• Custom events tracked for key business actions
• Integration with error tracking/support tools working

Post-Launch

• Sessions appearing in LogRocket dashboard
• Session URLs accessible and playable
• Privacy controls working (sensitive data masked)
• Errors captured with full session context
• Source maps resolving correctly in error stack traces
• User identification working (sessions associated with users)
• State/action timeline populated (if using Redux/Vuex/NgRx)
• Network requests captured (XHR/Fetch)
• Console logs preserved
• No performance degradation from LogRocket overhead

Troubleshooting Common Issues

Best Practices

1. Initialize Early: Call LogRocket.init() as early as possible in your app lifecycle
2. Protect Privacy: Always configure input sanitization and network filtering before launch
3. Identify Users: Call identify() immediately after authentication for better session search
4. Version Releases: Set release option to correlate sessions with code deploys
5. Upload Source Maps: Automate source map uploads in CI/CD for production debugging
6. Monitor Performance: Track impact of LogRocket on page load and runtime performance
7. Sanitize State: Redact sensitive data in Redux/Vuex/NgRx state before recording
8. Limit Session Volume: Use sampling or conditional init to control session volumes
9. Test Privacy: Regularly audit session replays to ensure sensitive data is protected
10. Integrate Tools: Connect LogRocket with error tracking and support tools for unified workflow

Change Log & Owners

Ownership Model

Engineering Team

• Responsibilities: SDK installation, configuration, source map uploads
• Review Cadence: With each release/deployment
• Contacts: Engineering lead, DevOps team

Privacy/Compliance Team

• Responsibilities: Privacy policy approval, sanitization rule review
• Review Cadence: Quarterly privacy audits
• Contacts: Privacy officer, legal team

Support Team

• Responsibilities: Using LogRocket for support ticket triage
• Training: Onboarding on session replay and search
• Contacts: Support team lead

Change Management

Configuration Changes

• Who can approve: Engineering lead
• Process: Test in staging → Privacy review → Production deployment
• Rollback plan: Revert to previous configuration via code repository

Source Map Management

• Who can upload: CI/CD automation or engineering team
• Credentials: Stored in secure secrets manager
• Access audit: Quarterly review of who has upload credentials

Outstanding Tasks & Questions

• Determine session sampling strategy for high-traffic periods
• Finalize list of API endpoints to exclude from network recording
• Set up automated alerts for LogRocket SDK errors
• Create runbook for troubleshooting missing sessions
• Document escalation path for privacy concerns
• Plan integration with new support tool (if applicable)