LogRocket Troubleshooting & Debugging | OpsBlu Docs

LogRocket Troubleshooting & Debugging

Troubleshooting playbook and diagnostics checklist for LogRocket implementation issues.

Common Issues & Solutions

Sessions Not Recording

Symptom: LogRocket appears to be initialized, but sessions don't appear in the dashboard.

Possible Causes & Solutions:

  1. Incorrect App ID

    • Verify you're using the correct app ID format: your-app/project-name
    • Check LogRocket dashboard Settings → Installation for your exact app ID
    • Ensure no typos or extra spaces
    // Correct
LogRocket.init('acme-corp/production');

// Incorrect
LogRocket.init('acme-corp-production'); // Missing slash
LogRocket.init('production'); // Missing org name

  2. Ad Blockers or Privacy Extensions

    • LogRocket is blocked by many ad blockers and privacy extensions
    • Test in incognito mode without extensions
    • Consider implementing a first-party proxy (see below)
    • Check browser console for network errors
    // Check if LogRocket is being blocked
console.log('LogRocket sessionURL:', LogRocket.sessionURL);
// If null or undefined after page load, likely blocked

  3. CSP (Content Security Policy) Issues

    • LogRocket requires specific CSP directives
    • Add to your CSP header:
    script-src https://*.logrocket.io https://*.lr-ingest.io;
connect-src https://*.logrocket.io https://*.lr-ingest.io;
img-src https://*.logrocket.io https://*.lr-ingest.io;

  4. Initialization Timing

    • LogRocket must be initialized before user interactions
    • Initialize as early as possible in app lifecycle
    // Good - early initialization
import LogRocket from 'logrocket';
LogRocket.init('your-app/project');

// Then initialize React, Vue, etc.
ReactDOM.render(<App />, document.getElementById('root'));

  5. Network Requests Blocked

    • Check Network tab for failed requests to:
      • https://r.lr-ingest.com/i
      • https://r.lr-ingest.io/rec/...
    • If blocked, check firewall, corporate proxy, or network policies

Verification Steps:

  1. Open browser console
  2. Type: LogRocket.sessionURL
  3. Should return a URL like: https://app.logrocket.com/your-app/sessions/abc123
  4. If null, check above issues

Session URL Returns Null

Symptom: LogRocket.sessionURL returns null or undefined.

Solutions:

  1. Not Yet Available

    • Session URL is not immediately available after init
    • Use callback pattern:
    LogRocket.getSessionURL(sessionURL => {
  console.log('Session URL:', sessionURL);
  // Use sessionURL here
});

  2. Initialization Failed

    • Verify LogRocket.init() was called successfully
    • Check for JavaScript errors in console
    • Ensure no conflicts with other scripts

  3. User Opted Out

    • If user has Do Not Track enabled or opted out
    • Check opt-out status:
    // Check if recording is disabled
if (LogRocket.sessionURL === null) {
  console.log('LogRocket not recording (possibly opted out or blocked)');
}

Redux/Vuex/NgRx State Not Captured

Symptom: Session replays don't show Redux/Vuex/NgRx actions or state.

Solutions:

  1. Middleware Not Installed

    • Verify middleware is properly added:
    // Redux
import LogRocket from 'logrocket';
const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware())
);

// Vuex
const store = new Vuex.Store({
  plugins: [LogRocket.vuexPlugin()]
});

// NgRx
StoreModule.forRoot(reducers, {
  metaReducers: [LogRocket.ngrxMiddleware()]
})

  2. Initialization Order

    • LogRocket must be initialized before store creation
    • Ensure LogRocket.init() is called first

  3. Actions/State Sanitized

    • Check if your sanitization config is too aggressive
    • Temporarily disable sanitizers to test:
    const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware({
    // actionSanitizer: action => action, // Disable temporarily
    // stateSanitizer: state => state     // Disable temporarily
  }))
);

Console Logs Not Appearing

Symptom: Console errors/logs don't show up in LogRocket session replay.

Solutions:

  1. Console Capture Disabled

    • Verify console capture is enabled (default is true):
    LogRocket.init('your-app/project', {
  console: {
    isEnabled: true, // Explicitly enable
    shouldAggregateConsoleErrors: true
  }
});

  2. Timing Issue

    • Logs before LogRocket init are not captured
    • Ensure LogRocket initializes early

  3. Log Level Filtering

    • LogRocket captures logs, warnings, and errors by default
    • Check if you're filtering specific levels in dashboard

Network Requests Missing

Symptom: Network tab in session replay is empty or incomplete.

Solutions:

  1. Sanitization Too Aggressive

    • Check if network sanitization is blocking requests:
    LogRocket.init('your-app/project', {
  network: {
    requestSanitizer: request => {
      // Make sure you're returning the request
      return request;
    }
  }
});

  2. Requests Before Init

    • Network requests made before LogRocket.init() are not captured
    • Initialize early to capture all requests

  3. Third-Party Requests

    • Some third-party requests may be filtered
    • Check LogRocket settings for domain filtering

High Bundle Size Impact

Symptom: LogRocket SDK significantly increases bundle size.

Solutions:

  1. Use Dynamic Import

    • Load LogRocket asynchronously:
    // Load LogRocket only when needed
if (shouldEnableLogRocket()) {
  import('logrocket').then(LogRocket => {
    LogRocket.default.init('your-app/project');
  });
}

  2. Code Splitting

    • Split LogRocket into separate chunk:
    // webpack.config.js
optimization: {
  splitChunks: {
    cacheGroups: {
      logrocket: {
        test: /[\\/]node_modules[\\/]logrocket/,
        name: 'logrocket',
        chunks: 'all'
      }
    }
  }
}

  3. Conditional Loading

    • Only load in production or for specific users:
    if (process.env.NODE_ENV === 'production') {
  import('logrocket').then(LogRocket => {
    LogRocket.default.init('your-app/project');
  });
}

Expected Size:

  • LogRocket SDK: ~30KB gzipped
  • Redux plugin: ~2KB additional
  • Total impact typically under 35KB gzipped

Performance Impact

Symptom: App feels slower after adding LogRocket.

Solutions:

  1. Reduce Recording Fidelity

    • Lower DOM snapshot frequency:
    LogRocket.init('your-app/project', {
  dom: {
    baseHref: window.location.origin,
    // Reduce recording quality for performance
    recordCrossOriginIframes: false,
    recordInputs: false // Disable if not needed
  }
});

  2. Sampling

    • Record only a percentage of sessions:
    // Record 50% of sessions
const shouldInitLogRocket = Math.random() < 0.5;

if (shouldInitLogRocket) {
  LogRocket.init('your-app/project');
}

  3. Conditional Recording

    • Only record for authenticated users or specific scenarios:
    function initLogRocketForUser(user) {
  if (user.isAuthenticated || user.plan === 'premium') {
    LogRocket.init('your-app/project');
    LogRocket.identify(user.id, {
      email: user.email,
      plan: user.plan
    });
  }
}

  4. Disable Heavy Features

    • Turn off features you don't need:
    LogRocket.init('your-app/project', {
  network: {
    isEnabled: true,
    requestSanitizer: request => {
      // Exclude large requests
      if (request.body && request.body.length > 10000) {
        return null;
      }
      return request;
    }
  },
  console: {
    isEnabled: true,
    shouldAggregateConsoleErrors: false // Reduce processing
  }
});

Sensitive Data Appearing in Sessions

Symptom: PII or sensitive data visible in session replays.

Solutions:

  1. Input Sanitization

    • Enable automatic input sanitization:
    LogRocket.init('your-app/project', {
  dom: {
    inputSanitizer: true, // Sanitize all inputs
    textSanitizer: true   // Sanitize text content
  }
});

  2. CSS Privacy Classes

    • Add CSS classes to elements that should be hidden:
    <!-- Text will be hidden in replays -->
<div class="lr-hide">Sensitive content here</div>

<!-- Input value will be masked -->
<input type="text" class="lr-mask" />

<!-- Element completely excluded from recording -->
<div class="lr-block">Completely hidden</div>

  3. Network Request Sanitization

    • Sanitize sensitive request/response data:
    LogRocket.init('your-app/project', {
  network: {
    requestSanitizer: request => {
      // Remove authorization headers
      if (request.headers['Authorization']) {
        request.headers['Authorization'] = 'REDACTED';
      }

      // Remove sensitive body fields
      if (request.body) {
        const body = JSON.parse(request.body);
        if (body.password) body.password = 'REDACTED';
        if (body.ssn) body.ssn = 'REDACTED';
        request.body = JSON.stringify(body);
      }

      return request;
    },

    responseSanitizer: response => {
      // Sanitize response data
      if (response.body) {
        const body = JSON.parse(response.body);
        if (body.creditCard) body.creditCard = 'REDACTED';
        response.body = JSON.stringify(body);
      }

      return response;
    }
  }
});

  4. Redux/Vuex State Sanitization

    • Sanitize state management data:
    const store = createStore(
  rootReducer,
  applyMiddleware(
    LogRocket.reduxMiddleware({
      stateSanitizer: state => ({
        ...state,
        user: {
          ...state.user,
          ssn: 'REDACTED',
          creditCard: 'REDACTED'
        }
      })
    })
  )
);

Cross-Domain Tracking Not Working

Symptom: Sessions break when users navigate between domains.

Solutions:

  1. Enable Cross-Domain Tracking

    LogRocket.init('your-app/project', {
  crossDomainTracking: true,
  shouldParseXHRBlob: true
});

  2. Add Allowed Domains

    • Configure allowed domains in LogRocket dashboard:
      • Settings → Privacy → Allowed Domains
      • Add all domains where tracking should persist

  3. URL Parameter Passing

    • Ensure session ID parameter is preserved in links:
    // LogRocket automatically adds session ID to links
// But ensure you're not stripping query params
<a href="https://other-domain.com/page">Link</a>
// Becomes: https://other-domain.com/page?lr-session-id=abc123

Source Maps Not Working

Symptom: Stack traces show minified code instead of original source.

Solutions:

  1. Upload Source Maps

    • Use LogRocket CLI to upload source maps:
    npm install -g logrocket-cli
logrocket upload --app your-app --release 1.0.0 ./build

  2. Configure Release Tracking

    • Tag sessions with release version:
    LogRocket.init('your-app/project', {
  release: '1.0.0', // Match uploaded source map version
  console: {
    shouldAggregateConsoleErrors: true
  }
});

  3. Webpack Configuration

    • Ensure source maps are generated:
    // webpack.config.js
module.exports = {
  devtool: 'source-map', // Generate source maps
  // ...
};

  4. Verify Upload

    • Check LogRocket dashboard under Settings → Source Maps
    • Ensure version matches release tag

Diagnostic Tools & Workflows

Browser Console Debugging

Check Initialization:

// Verify LogRocket is loaded
console.log('LogRocket loaded:', typeof LogRocket !== 'undefined');

// Check session URL
console.log('Session URL:', LogRocket.sessionURL);

// Get session URL with callback
LogRocket.getSessionURL(url => console.log('Session:', url));

// Check version
console.log('LogRocket version:', LogRocket.version);

Monitor Network Requests:

  1. Open DevTools → Network tab
  2. Filter by "lr-ingest" or "logrocket"
  3. Look for requests to:
    • https://r.lr-ingest.com/i (initialization)
    • https://r.lr-ingest.io/rec/... (recording data)
  4. Check for 200 status codes
  5. If 403/404, check app ID and API keys

Console Debug Mode:

LogRocket.init('your-app/project', {
  console: {
    isEnabled: true
  },
  network: {
    isEnabled: true
  }
});

// Enable verbose logging
localStorage.setItem('logrocket.debug', 'true');

LogRocket Dashboard Tools

Live View:

  • Navigate to Sessions → Live Sessions
  • See sessions in real-time as they're recorded
  • Verify events, console logs, network requests appear

Session Search:

  • Use search filters to find specific sessions:
    • By user email
    • By error message
    • By custom events
    • By URL visited
    • By date range

Session Inspector:

  • Click into any session to see:
    • Console tab (all logs, warnings, errors)
    • Network tab (all requests/responses)
    • Redux/Vuex/NgRx tab (state management)
    • Events timeline
    • Session metadata (browser, device, location)

Integration Verification

Sentry Integration:

// Verify LogRocket URL is attached to Sentry events
Sentry.captureException(new Error('Test error'));

// Check Sentry dashboard for LogRocket session URL in error details

Slack Integration:

  • Trigger an error or event that should alert Slack
  • Verify message appears with session URL
  • Check LogRocket dashboard → Integrations → Slack for status

Redux Integration:

// Dispatch test action
store.dispatch({ type: 'TEST_ACTION', payload: 'test' });

// Check session replay Redux tab for action

Escalation & Support

When to Contact LogRocket Support

Contact support when:

  • Sessions consistently fail to record across multiple browsers/environments
  • Critical features (console logs, network, state) not capturing
  • Source maps not working after following documentation
  • Integration issues not resolved by troubleshooting
  • Suspected platform bug or outage

How to Contact Support

  1. Email: support@logrocket.com
  2. Dashboard: Help widget in bottom-right corner
  3. Documentation: https://docs.logrocket.com/

Information to Provide

When contacting support, include:

  • App ID: Your LogRocket app ID
  • Session URL: Link to affected session (if available)
  • Browser/Device: Browser version, OS, device type
  • Code Sample: Relevant initialization and configuration code
  • Error Messages: Console errors, network errors, screenshots
  • Steps to Reproduce: Clear steps to reproduce the issue
  • Environment: Production, staging, local development

Support Ticket Template

Subject: [Issue Type] - Brief Description

App ID: your-app/project-name
Environment: Production/Staging/Development

Issue Description:
[Detailed description of the problem]

Expected Behavior:
[What should happen]

Actual Behavior:
[What actually happens]

Steps to Reproduce:
1. [Step one]
2. [Step two]
3. [Step three]

Session URL (if available):
https://app.logrocket.com/your-app/sessions/abc123

Browser/Device:
- Browser: Chrome 120 / Safari 17 / Firefox 115
- OS: Windows 11 / macOS 14 / iOS 17
- Device: Desktop / iPhone 15 / Samsung Galaxy S23

Code Sample:
```javascript
LogRocket.init('your-app/project', {
  // your configuration
});

Error Messages: [Console errors, network errors, screenshots]

Additional Context: [Any other relevant information]


---

## Preventive Maintenance

### Regular Monitoring

**Weekly Checks:**
- Review error rates in LogRocket dashboard
- Check session volume trends
- Verify integrations are working (Sentry, Slack, etc.)
- Spot-check recent sessions for quality

**Monthly Reviews:**
- Audit privacy settings and sanitization rules
- Review team access and permissions
- Check source map uploads are current
- Verify billing and session limits

**Quarterly Audits:**
- Review all LogRocket configuration
- Update sanitization rules for new features
- Audit integrations for relevance
- Review retention policies and compliance

### Automated Monitoring

**Session Volume Alerts:**
```javascript
// Monitor if LogRocket stops recording
setInterval(() => {
  const sessionURL = LogRocket.sessionURL;
  if (!sessionURL && expectedToRecord) {
    // Alert your monitoring system
    console.error('LogRocket not recording sessions');
  }
}, 60000); // Check every minute

Error Rate Monitoring:

  • Set up LogRocket alerts for error spikes
  • Configure Slack/email notifications
  • Create dashboards for key metrics

Best Practices Checklist

LogRocket initialized early in application lifecycle User identification implemented after authentication Sensitive data sanitized (inputs, network, state) Source maps uploaded and versioned correctly Integrations tested and monitored (Sentry, Slack, etc.) Privacy settings reviewed and compliant Session limits and billing monitored Team access and permissions audited Documentation updated for configuration changes Support escalation process defined

Additional Resources:

Back to top