LogRocket Integrations | Blue Frog Docs

LogRocket Integrations

Integrations connecting LogRocket with state management, error tracking, support tools, and observability platforms.

Integration Overview

LogRocket's power multiplies when integrated with your existing development and support tools. Rather than being a standalone dashboard, LogRocket becomes a contextual layer that enriches error reports, support tickets, and monitoring dashboards with session replays and user context.

This guide covers the most popular LogRocket integrations and how to implement them effectively.

State Management Integrations

Redux Integration

LogRocket's Redux middleware captures every action and state change, making it invaluable for debugging state-related issues.

Installation:

npm install logrocket logrocket-redux

Setup:

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

// Initialize LogRocket first
LogRocket.init('your-app/project-name');

// Add Redux middleware
const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware())
);

export default store;

Advanced Configuration:

import LogRocket from 'logrocket';

const store = createStore(
  rootReducer,
  applyMiddleware(
    LogRocket.reduxMiddleware({
      // Sanitize actions with sensitive data
      actionSanitizer: action => {
        if (action.type === 'USER_LOGIN') {
          return {
            ...action,
            payload: {
              ...action.payload,
              password: 'REDACTED'
            }
          };
        }
        return action;
      },

      // Sanitize state with sensitive data
      stateSanitizer: state => {
        return {
          ...state,
          auth: {
            ...state.auth,
            token: 'REDACTED'
          }
        };
      }
    })
  )
);

Benefits:

  • See every Redux action in the session timeline
  • Inspect state at any point in time
  • Correlate user behavior with state changes
  • Debug complex state-related bugs with full context

Vuex Integration (Vue.js)

Installation:

npm install logrocket logrocket-vuex

Setup:

import LogRocket from 'logrocket';
import createPlugin from 'logrocket-vuex';
import Vuex from 'vuex';

LogRocket.init('your-app/project-name');

const store = new Vuex.Store({
  plugins: [createPlugin(LogRocket)],
  // ... your store configuration
});

export default store;

With Sanitization:

import createPlugin from 'logrocket-vuex';

const store = new Vuex.Store({
  plugins: [
    createPlugin(LogRocket, {
      // Filter out sensitive mutations
      filter: mutation => {
        return mutation.type !== 'SET_PASSWORD';
      },

      // Transform state before recording
      transformer: state => {
        return {
          ...state,
          user: {
            ...state.user,
            creditCard: 'REDACTED'
          }
        };
      }
    })
  ]
});

NgRx Integration (Angular)

Installation:

npm install logrocket logrocket-ngrx

Setup:

import LogRocket from 'logrocket';
import { StoreModule } from '@ngrx/store';
import { NgModule } from '@angular/core';

// Initialize LogRocket
LogRocket.init('your-app/project-name');

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      metaReducers: [LogRocket.ngrxMiddleware()]
    })
  ]
})
export class AppModule {}

With Sanitization:

const ngrxMiddleware = LogRocket.ngrxMiddleware({
  actionSanitizer: action => {
    if (action.type === '[Auth] Login Success') {
      return {
        ...action,
        token: 'REDACTED'
      };
    }
    return action;
  },

  stateSanitizer: state => {
    return {
      ...state,
      auth: {
        ...state.auth,
        sensitiveData: 'REDACTED'
      }
    };
  }
});

Error Tracking Integrations

Sentry Integration

Enrich Sentry error reports with LogRocket session replays.

Installation:

npm install logrocket @sentry/browser

Setup:

import LogRocket from 'logrocket';
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';

// Initialize LogRocket
LogRocket.init('your-app/project-name');

// Initialize Sentry
Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0
});

// Link LogRocket sessions to Sentry events
LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Automatic Integration:

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

LogRocket.init('your-app/project-name');
setupLogRocketReact(LogRocket);

// Automatically sends LogRocket session URL with Sentry errors
LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra('LogRocket', sessionURL);
    scope.setTag('LogRocket', sessionURL);
  });
});

Benefits:

  • See session replay directly from Sentry error reports
  • Understand user context that led to the error
  • Reproduce errors with full session context
  • Prioritize errors based on user impact

Bugsnag Integration

Setup:

import LogRocket from 'logrocket';
import Bugsnag from '@bugsnag/js';

LogRocket.init('your-app/project-name');
Bugsnag.start({ apiKey: 'YOUR_BUGSNAG_API_KEY' });

// Attach LogRocket URL to Bugsnag reports
LogRocket.getSessionURL(sessionURL => {
  Bugsnag.addMetadata('LogRocket', {
    sessionURL: sessionURL
  });
});

Rollbar Integration

Setup:

import LogRocket from 'logrocket';
import Rollbar from 'rollbar';

LogRocket.init('your-app/project-name');

const rollbar = new Rollbar({
  accessToken: 'YOUR_ROLLBAR_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true
});

// Add LogRocket URL to Rollbar payloads
LogRocket.getSessionURL(sessionURL => {
  rollbar.configure({
    payload: {
      logRocketSession: sessionURL
    }
  });
});

Support and Communication Tools

Intercom Integration

Attach LogRocket session URLs to Intercom conversations.

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Identify user in LogRocket
LogRocket.identify('user-123', {
  name: 'Jane Doe',
  email: 'jane@example.com'
});

// Add LogRocket URL to Intercom user metadata
LogRocket.getSessionURL(sessionURL => {
  window.Intercom('update', {
    'LogRocket Session URL': sessionURL
  });
});

Automatic Session Sharing:

// Update Intercom whenever session URL is available
LogRocket.getSessionURL(sessionURL => {
  if (window.Intercom) {
    window.Intercom('update', {
      logrocket_url: sessionURL
    });
  }
});

Zendesk Integration

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Add LogRocket URL to Zendesk tickets
LogRocket.getSessionURL(sessionURL => {
  if (window.zE) {
    window.zE('webWidget', 'updateSettings', {
      webWidget: {
        contactForm: {
          fields: [
            {
              id: 'logrocket_session',
              prefill: { '*': sessionURL }
            }
          ]
        }
      }
    });
  }
});

Slack Integration

Send notifications to Slack when specific events or errors occur.

Using Webhooks:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Send critical errors to Slack
window.addEventListener('error', (event) => {
  LogRocket.getSessionURL(sessionURL => {
    fetch('YOUR_SLACK_WEBHOOK_URL', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: `🚨 Error in Production`,
        attachments: [{
          color: 'danger',
          fields: [
            {
              title: 'Error Message',
              value: event.message,
              short: false
            },
            {
              title: 'LogRocket Session',
              value: sessionURL,
              short: false
            },
            {
              title: 'User',
              value: 'jane@example.com',
              short: true
            }
          ]
        }]
      })
    });
  });
});

Native Slack Integration: Configure in LogRocket dashboard:

  1. Navigate to Settings → Integrations → Slack
  2. Connect your Slack workspace
  3. Configure alert rules (e.g., when errors spike, when specific events occur)
  4. Sessions will automatically be posted to designated channels

Jira Integration

Automatically create Jira tickets with LogRocket session replays attached.

Via LogRocket Dashboard:

  1. Go to Settings → Integrations → Jira
  2. Connect your Jira instance
  3. Configure issue type, project, and field mappings
  4. Create tickets directly from LogRocket sessions

Manual Integration:

import LogRocket from 'logrocket';

async function createJiraTicket(summary, description) {
  const sessionURL = LogRocket.sessionURL;

  await fetch('YOUR_JIRA_API_ENDPOINT', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      fields: {
        project: { key: 'PROJ' },
        summary: summary,
        description: `${description}\n\nLogRocket Session: ${sessionURL}`,
        issuetype: { name: 'Bug' }
      }
    })
  });
}

Observability and Monitoring Integrations

Datadog Integration

Setup:

import LogRocket from 'logrocket';
import { datadogRum } from '@datadog/browser-rum';

LogRocket.init('your-app/project-name');

datadogRum.init({
  applicationId: 'YOUR_DATADOG_APP_ID',
  clientToken: 'YOUR_DATADOG_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'your-service',
  version: '1.0.0'
});

// Add LogRocket URL to Datadog RUM sessions
LogRocket.getSessionURL(sessionURL => {
  datadogRum.setGlobalContext({
    logRocketSession: sessionURL
  });
});

New Relic Integration

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Add LogRocket URL to New Relic custom attributes
LogRocket.getSessionURL(sessionURL => {
  if (window.newrelic) {
    window.newrelic.setCustomAttribute('logRocketSession', sessionURL);
  }
});

Splunk Integration

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Send events to Splunk HEC with LogRocket context
LogRocket.getSessionURL(sessionURL => {
  const event = {
    time: Date.now(),
    sourcetype: 'logrocket',
    event: {
      sessionURL: sessionURL,
      userID: 'user-123',
      eventType: 'session-started'
    }
  };

  fetch('YOUR_SPLUNK_HEC_ENDPOINT', {
    method: 'POST',
    headers: {
      'Authorization': 'Splunk YOUR_HEC_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(event)
  });
});

Analytics and Product Tools

Segment Integration

Installation:

npm install logrocket @logrocket/segment-integration

Setup:

import LogRocket from 'logrocket';
import LogRocketSegment from '@logrocket/segment-integration';

// Initialize LogRocket
LogRocket.init('your-app/project-name', {
  plugins: [LogRocketSegment()]
});

// Segment analytics will now include LogRocket session URLs
window.analytics.identify('user-123', {
  name: 'Jane Doe',
  email: 'jane@example.com'
});

Google Analytics Integration

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Send LogRocket URL to GA as custom dimension
LogRocket.getSessionURL(sessionURL => {
  if (window.gtag) {
    gtag('config', 'GA_MEASUREMENT_ID', {
      custom_map: { dimension1: 'logrocket_session' }
    });

    gtag('event', 'logrocket_session', {
      logrocket_session: sessionURL
    });
  }
});

Amplitude Integration

Setup:

import LogRocket from 'logrocket';
import amplitude from 'amplitude-js';

LogRocket.init('your-app/project-name');
amplitude.getInstance().init('YOUR_AMPLITUDE_API_KEY');

// Add LogRocket URL to Amplitude user properties
LogRocket.getSessionURL(sessionURL => {
  const identify = new amplitude.Identify().set('logrocket_session', sessionURL);
  amplitude.getInstance().identify(identify);
});

Custom Integrations

Webhook Integration

Send session data to any endpoint when specific conditions are met.

Example: Custom Webhook on Error:

import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');

// Monitor for errors and send to custom endpoint
window.addEventListener('error', (event) => {
  LogRocket.getSessionURL(sessionURL => {
    fetch('https://your-api.com/logrocket-events', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        type: 'error',
        message: event.message,
        sessionURL: sessionURL,
        timestamp: new Date().toISOString(),
        user: {
          id: 'user-123',
          email: 'jane@example.com'
        }
      })
    });
  });
});

API Integration

Use LogRocket's API to programmatically access session data.

Example: Fetch Session Metadata:

// Server-side example (Node.js)
const fetch = require('node-fetch');

async function getLogRocketSession(sessionId) {
  const response = await fetch(
    `https://api.logrocket.io/v1/sessions/${sessionId}`,
    {
      headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN'
      }
    }
  );

  const session = await response.json();
  return session;
}

Integration Best Practices

General Guidelines

✅ Do:

  • Initialize LogRocket before other tracking tools
  • Test integrations in non-production environments first
  • Document which integrations are enabled and why
  • Monitor integration performance impact
  • Use sanitization to protect sensitive data across integrations

❌ Don't:

  • Send LogRocket URLs to public/untrusted systems
  • Integrate without understanding data flow and privacy implications
  • Forget to update integrations when LogRocket or partner tools update
  • Over-integrate (choose integrations that add real value)

Privacy Considerations

When integrating LogRocket with other tools:

  • Ensure all integrated tools comply with your privacy policy
  • Sanitize data before sending to external systems
  • Obtain user consent where required
  • Document data flows in your DPA (Data Processing Agreement)
  • Regularly audit which integrations have access to session data

Performance Optimization

  • Load integration scripts asynchronously when possible
  • Use LogRocket.getSessionURL() callback pattern to avoid blocking
  • Batch events to external systems when feasible
  • Monitor bundle size impact of integration libraries
  • Consider using server-side integrations for heavy processing

Additional Resources:

↑ Back to top
// SYS.FOOTER