You are an expert in integrating LogRocket for error tracking and session replay.

## Key Points

- Console logs
- Network requests and responses
- DOM clicks and inputs
- Redux/Vuex/NgRx state changes
- DOM mutations (pixel-perfect replay)
- Network requests and responses (with timing)
- Console output
- JavaScript errors with stack traces
- User clicks and interactions
- Always call `LogRocket.identify()` after authentication so sessions are tied to real users and searchable by user ID.
- Use `requestSanitizer` and `responseSanitizer` to strip auth tokens, passwords, and PII from network recordings.
- Apply `data-private` attributes to forms handling credit cards, SSNs, or other sensitive inputs.

## Quick Example

```bash
npm install logrocket
```

```bash
npm install logrocket logrocket-react
```

LogRocket — Error Tracking

You are an expert in integrating LogRocket for error tracking and session replay.

Core Philosophy

Overview

LogRocket is a frontend monitoring platform that combines session replay with error tracking and product analytics. It records DOM changes, network requests, console logs, and JavaScript errors so you can replay exactly what the user experienced when an error occurred. Use LogRocket when understanding the user experience leading to errors is as important as knowing the error itself.

Setup & Configuration

JavaScript Browser

npm install logrocket

import LogRocket from "logrocket";

LogRocket.init("your-org/your-app", {
  release: "1.2.0",
  console: {
    isEnabled: true,
  },
  network: {
    isEnabled: true,
    requestSanitizer: (request) => {
      // Scrub Authorization headers
      if (request.headers["Authorization"]) {
        request.headers["Authorization"] = "[REDACTED]";
      }
      return request;
    },
  },
});

React

npm install logrocket logrocket-react

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

LogRocket.init("your-org/your-app");
setupLogRocketReact(LogRocket);

Redux Integration

npm install logrocket

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

const store = createStore(
  rootReducer,
  applyMiddleware(
    LogRocket.reduxMiddleware({
      stateSanitizer: (state) => {
        return {
          ...state,
          user: undefined, // Remove sensitive user state from recordings
        };
      },
      actionSanitizer: (action) => {
        if (action.type === "SET_PASSWORD") {
          return { ...action, payload: "[REDACTED]" };
        }
        return action;
      },
    })
  )
);

Sentry Integration

import LogRocket from "logrocket";
import * as Sentry from "@sentry/browser";

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

Core Patterns

Error Capturing

// Errors are captured automatically (uncaught exceptions, unhandled rejections)

// Capture a caught error explicitly
try {
  riskyOperation();
} catch (error) {
  LogRocket.captureException(error);
}

// Capture with extra context
LogRocket.captureException(error, {
  tags: { feature: "checkout" },
  extra: { orderId: "abc-123" },
});

// Capture a message
LogRocket.captureMessage("Unexpected empty cart at checkout");

Context and Breadcrumbs

LogRocket automatically captures breadcrumbs from:

• Console logs
• Network requests and responses
• DOM clicks and inputs
• Redux/Vuex/NgRx state changes

// Add custom event for product analytics and debugging context
LogRocket.track("CheckoutStarted", {
  cartItems: 3,
  cartTotal: 49.99,
});

User Identification

LogRocket.identify("user-42", {
  name: "Jane Doe",
  email: "user@example.com",
  plan: "enterprise",
  // Custom traits
  accountAge: 365,
});

Release Tracking

Set the release option in LogRocket.init() to your version string or git SHA.

Source Maps

LogRocket supports source maps uploaded via their CLI or configured in their dashboard. Stack traces in error reports are automatically deobfuscated.

npx @logrocket/cli upload-sourcemaps ./dist \
  --release=1.2.0 \
  --apikey=YOUR_API_KEY

Advanced Features

Session Replay

Session replay is LogRocket's core feature. Every session records:

• DOM mutations (pixel-perfect replay)
• Network requests and responses (with timing)
• Console output
• JavaScript errors with stack traces
• User clicks and interactions

You can search sessions by error, user, URL, or custom event.

Privacy Controls

LogRocket.init("your-org/your-app", {
  dom: {
    // Mask all text on the page by default
    textSanitizer: true,
    // Or mask specific elements with CSS class
    inputSanitizer: true,
  },
});

<!-- Mask specific elements -->
<div class="_lr-hide">Sensitive content</div>

<!-- Block recording of an element entirely -->
<div data-private>Credit card form</div>

Product Analytics / Funnels

// Track events for funnel analysis
LogRocket.track("ViewedProduct", { productId: "prod-123" });
LogRocket.track("AddedToCart", { productId: "prod-123", quantity: 1 });
LogRocket.track("CompletedPurchase", { orderId: "abc-123", total: 49.99 });

Build funnels in the LogRocket dashboard to see drop-off between steps and watch session replays of users who dropped off.

Performance Monitoring

LogRocket tracks Core Web Vitals (LCP, FID, CLS), page load times, and network request performance. View metrics aggregated by page, browser, or user segment.

Best Practices

• Always call LogRocket.identify() after authentication so sessions are tied to real users and searchable by user ID.
• Use requestSanitizer and responseSanitizer to strip auth tokens, passwords, and PII from network recordings.
• Apply data-private attributes to forms handling credit cards, SSNs, or other sensitive inputs.
• Integrate LogRocket with your error tracker (Sentry, Bugsnag) by attaching the session URL, giving you replay context on every error.
• Set a meaningful release value so you can filter sessions by application version.

Common Pitfalls

• Not sanitizing network requests, accidentally recording auth tokens and sensitive API payloads in session replays.
• Forgetting to add privacy attributes to sensitive DOM elements, recording PII in replays.
• Not calling LogRocket.identify(), making it impossible to find sessions for specific users when debugging support tickets.
• Including LogRocket in development, generating noise sessions that consume your quota.
• Not integrating with your error tracker, requiring manual correlation between error reports and session replays.

Anti-Patterns

Over-engineering for hypothetical scale. Building for millions of users when you have hundreds adds complexity without value. Solve today's problems first.

Ignoring the existing ecosystem. Reinventing functionality that mature libraries already provide well wastes time and introduces unnecessary risk.

Premature abstraction. Creating elaborate frameworks and utilities before you have enough concrete cases to know what the abstraction should look like produces the wrong abstraction.

Neglecting error handling at boundaries. Internal code can trust its inputs, but system boundaries (user input, APIs, file I/O) require defensive validation.

Skipping documentation for obvious code. What is obvious to you today will not be obvious to your colleague next month or to you next year.