Agent skill

logrocket

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.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/logrocket

SKILL.md

LogRocket

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

Quick Start

bash
npm install logrocket logrocket-react

Basic Setup

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

LogRocket.init('your-app-id/your-project');
typescript
// 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

typescript
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

typescript
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

tsx
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

typescript
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:

typescript
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

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

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

With Redux Toolkit

typescript
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:

typescript
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

typescript
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

html
<!-- 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

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

Conditional Recording

Only record certain users or conditions:

typescript
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

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

Session URL

Get the session URL for support tickets:

typescript
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

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

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

Custom Integration

typescript
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

tsx
// 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}</>;
}
tsx
// 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

typescript
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

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

Didn't find tool you were looking for?

Be as detailed as possible for better results