name: logrocket description: Implements session replay and error tracking with LogRocket for debugging user issues. Use when adding session recording, error monitoring, and performance tracking to React applications.

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

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

logrocket

SKILL.md