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:

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
```
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
```

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;

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'));

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:

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

Session URL Returns Null

Symptom: LogRocket.sessionURL returns null or undefined.

Solutions:

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
});

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

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:

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()]
})

Initialization Order
- LogRocket must be initialized before store creation
- Ensure LogRocket.init() is called first

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:

Console Capture Disabled

Verify console capture is enabled (default is true):

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

Timing Issue
- Logs before LogRocket init are not captured
- Ensure LogRocket initializes early
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:

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;
    }
  }
});

Requests Before Init
- Network requests made before LogRocket.init() are not captured
- Initialize early to capture all requests
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:

Use Dynamic Import

Load LogRocket asynchronously:

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

Code Splitting

Split LogRocket into separate chunk:

// webpack.config.js
optimization: {
  splitChunks: {
    cacheGroups: {
      logrocket: {
        test: /[\\/]node_modules[\\/]logrocket/,
        name: 'logrocket',
        chunks: 'all'
      }
    }
  }
}

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:

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
  }
});

Sampling

Record only a percentage of sessions:

// Record 50% of sessions
const shouldInitLogRocket = Math.random() < 0.5;

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

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
    });
  }
}

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:

Input Sanitization

Enable automatic input sanitization:

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

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>

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;
    }
  }
});

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:

Enable Cross-Domain Tracking

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

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

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:

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

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
  }
});

Webpack Configuration

Ensure source maps are generated:

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

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:

Open DevTools → Network tab
Filter by "lr-ingest" or "logrocket"
Look for requests to:
- https://r.lr-ingest.com/i (initialization)
- https://r.lr-ingest.io/rec/... (recording data)
Check for 200 status codes
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

Email: support@logrocket.com
Dashboard: Help widget in bottom-right corner
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:

शीर्ष पर वापस जाएँ