Logrocket

LogRocket

Session replay platform with error tracking, performance monitoring, and product analytics. Captures every user interaction for debugging.

Quick Start

npm install logrocket logrocket-react

Basic Setup

// logrocketSetup.ts
import LogRocket from 'logrocket';

LogRocket.init('your-app-id/your-project');

// main.tsx - Import setup FIRST
import './logrocketSetup';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

User Identification

import LogRocket from 'logrocket';

// Identify user after login
function onLogin(user) {
  LogRocket.identify(user.id, {
    name: user.name,
    email: user.email,

    // Custom attributes
    subscriptionType: user.plan,
    createdAt: user.createdAt,
  });
}

// Anonymous session (before login)
LogRocket.identify('anonymous-user-123');

Custom Events

import LogRocket from 'logrocket';

// Basic event
LogRocket.track('Button Clicked');

// Event with properties
LogRocket.track('PurchaseComplete', {
  revenue: 42.99,
  productCategory: 'Clothing',
  productSku: 4887369299,
  couponApplied: true,
  customerSegments: ['aef34b', '97cb20'],
});

// Form submission
LogRocket.track('FormSubmitted', {
  formName: 'contact',
  success: true,
});

// Feature usage
LogRocket.track('FeatureUsed', {
  featureName: 'export',
  format: 'csv',
});

React Error Boundary

import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';

// After LogRocket.init()
setupLogRocketReact(LogRocket);

This automatically captures:

• React component errors
• Error boundary crashes
• Component stack traces

Manual Error Logging

import LogRocket from 'logrocket';

try {
  // risky operation
} catch (error) {
  LogRocket.captureException(error);
}

// With extra context
LogRocket.captureException(error, {
  tags: {
    component: 'PaymentForm',
    userId: 'user_123',
  },
  extra: {
    orderId: 'order_456',
    attemptNumber: 3,
  },
});

Console Logging

LogRocket captures console logs automatically. Add custom context:

import LogRocket from 'logrocket';

// Log with structured data
LogRocket.log('Processing order', { orderId: 'order_123', items: 3 });
LogRocket.info('User action', { action: 'checkout_started' });
LogRocket.warn('Rate limit approaching', { remaining: 10 });
LogRocket.error('Payment failed', { reason: 'insufficient_funds' });

Redux Integration

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

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

With Redux Toolkit

import { configureStore } from '@reduxjs/toolkit';
import LogRocket from 'logrocket';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(LogRocket.reduxMiddleware()),
});

Network Request Logging

LogRocket captures network requests automatically. Sanitize sensitive data:

LogRocket.init('app-id/project', {
  network: {
    requestSanitizer: (request) => {
      // Remove authorization header
      if (request.headers['Authorization']) {
        request.headers['Authorization'] = '[REDACTED]';
      }

      // Sanitize request body
      if (request.body) {
        const body = JSON.parse(request.body);
        if (body.password) {
          body.password = '[REDACTED]';
        }
        request.body = JSON.stringify(body);
      }

      return request;
    },
    responseSanitizer: (response) => {
      // Sanitize response body
      if (response.body) {
        const body = JSON.parse(response.body);
        if (body.token) {
          body.token = '[REDACTED]';
        }
        response.body = JSON.stringify(body);
      }
      return response;
    },
  },
});

Privacy & Sanitization

Mask Sensitive Data

LogRocket.init('app-id/project', {
  dom: {
    // Mask all inputs
    inputSanitizer: true,

    // Mask specific elements
    textSanitizer: true,

    // Mask by CSS selector
    privateAttributeBlocklist: ['data-private'],
  },
});

HTML Masking

<!-- Mask specific elements -->
<input type="password" data-private />
<div data-private>Sensitive content</div>

<!-- Or use CSS class -->
<div class="lr-hide">Hidden from replay</div>

Block Recording

<!-- Completely hide from DOM -->
<div data-logrocket-hidden>
  This content won't appear in recordings
</div>

Conditional Recording

Only record certain users or conditions:

import LogRocket from 'logrocket';

// Check condition before initializing
if (shouldRecordUser(user)) {
  LogRocket.init('app-id/project');
  LogRocket.identify(user.id, { name: user.name });
}

// Or start/stop recording
LogRocket.startRecording();
LogRocket.stopRecording();

Sample Rate

LogRocket.init('app-id/project', {
  shouldSendData: () => {
    // Record 10% of sessions
    return Math.random() < 0.1;
  },
});

Session URL

Get the session URL for support tickets:

import LogRocket from 'logrocket';

LogRocket.getSessionURL((sessionURL) => {
  // Send to support system
  console.log('Session URL:', sessionURL);

  // Or add to error reports
  Sentry.setExtra('sessionURL', sessionURL);
});

Integration with Error Tracking

Sentry

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

LogRocket.getSessionURL((sessionURL) => {
  Sentry.configureScope((scope) => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Custom Integration

import LogRocket from 'logrocket';

LogRocket.getSessionURL((sessionURL) => {
  // Add to your error tracking
  errorTracker.setContext('logrocket_session', sessionURL);

  // Or send to your backend
  fetch('/api/session', {
    method: 'POST',
    body: JSON.stringify({ sessionURL, userId: currentUser.id }),
  });
});

Next.js Integration

// app/providers.tsx
'use client';

import { useEffect } from 'react';
import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';

export function LogRocketProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      LogRocket.init('app-id/project');
      setupLogRocketReact(LogRocket);
    }
  }, []);

  return <>{children}</>;
}

// app/layout.tsx
import { LogRocketProvider } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LogRocketProvider>
          {children}
        </LogRocketProvider>
      </body>
    </html>
  );
}

Configuration Options

LogRocket.init('app-id/project', {
  // Console options
  console: {
    isEnabled: true,
    shouldAggregateConsoleErrors: true,
  },

  // Network options
  network: {
    isEnabled: true,
    requestSanitizer: (request) => request,
    responseSanitizer: (response) => response,
  },

  // DOM options
  dom: {
    isEnabled: true,
    inputSanitizer: true,
    textSanitizer: false,
    baseHref: 'https://yourdomain.com',
  },

  // Release tracking
  release: process.env.NEXT_PUBLIC_VERSION,

  // Parent domain (for cross-subdomain tracking)
  parentDomain: 'yourdomain.com',

  // Merge IDs (connect anonymous with identified)
  mergeImmediately: true,
});

TypeScript

import LogRocket from 'logrocket';

interface UserTraits {
  name: string;
  email: string;
  plan: 'free' | 'pro' | 'enterprise';
  createdAt: string;
}

function identifyUser(userId: string, traits: UserTraits) {
  LogRocket.identify(userId, traits);
}

interface PurchaseEvent {
  productId: string;
  amount: number;
  currency: string;
}

function trackPurchase(event: PurchaseEvent) {
  LogRocket.track('Purchase', event);
}

Performance Monitoring

LogRocket automatically captures:

• Page load times
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Time to Interactive (TTI)
• Network request timing

Access in the LogRocket dashboard under Performance.

Best Practices

1. Initialize early - Import setup file before other modules
2. Identify users - Connect sessions to user accounts
3. Sanitize data - Never record passwords or tokens
4. Use conditional recording - Sample in production
5. Track key events - Conversions, errors, feature usage
6. Integrate with error tracking - Link sessions to Sentry/etc
7. Use private attributes - Mark sensitive DOM elements