LogRocket Server-Side vs Client-Side

LogRocket's Primary Approach: Client-Side

LogRocket is fundamentally a client-side session replay and monitoring tool. It captures user interactions, browser events, console logs, and network requests from the browser, making it ideal for understanding frontend application behavior.

Core Client-Side Capabilities:

• Session replay (DOM snapshots and user interactions)
• Console logs and errors
• Network requests and responses
• Redux/Vuex/NgRx state changes
• Performance metrics (Core Web Vitals)
• User interactions (clicks, scrolls, inputs)

Why Client-Side: LogRocket's value proposition centers on seeing what users see and experiencing what users experience. This requires running in the browser where user interactions, visual state, and frontend errors occur.

When Client-Side is the Right Choice

Use client-side LogRocket for:

• Debugging frontend bugs and user-reported issues
• Understanding user behavior and friction points
• Monitoring JavaScript errors and console warnings
• Tracking Redux/Vuex/NgRx state changes
• Analyzing network requests from the browser
• Performance monitoring (page load, Core Web Vitals)
• Support ticket triage (attach session replays)

Implementation:

// Browser (React, Vue, Angular, etc.)
import LogRocket from 'logrocket';

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

LogRocket.identify('user-123', {
  email: 'user@example.com',
  plan: 'Professional'
});

LogRocket.track('Feature Used', {
  featureName: 'Export Data'
});

Server-Side Use Cases

While LogRocket is primarily client-side, there are scenarios where server-side integration adds value.

1. User Identification from Backend

Identify users from your server after authentication to ensure consistency.

Node.js Example:

// server/auth.js
const fetch = require('node-fetch');

async function identifyUserInLogRocket(userId, userProperties) {
  // Use LogRocket API to identify user server-side
  await fetch('https://api.logrocket.io/v1/identify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.LOGROCKET_API_KEY}`
    },
    body: JSON.stringify({
      userId: userId,
      properties: userProperties
    })
  });
}

// After successful login
app.post('/login', async (req, res) => {
  const user = await authenticateUser(req.body);

  // Identify in LogRocket from server
  await identifyUserInLogRocket(user.id, {
    email: user.email,
    plan: user.subscription.plan,
    role: user.role
  });

  res.json({ success: true, user });
});

Why: Ensures user identification happens even if client-side initialization fails or is blocked.

2. Server-Side Event Tracking

Track backend events that don't have client-side visibility.

Use Cases:

• API usage and rate limiting
• Background job completion
• Webhook processing
• Scheduled task execution
• Server-side payment processing

Implementation:

// server/events.js
const fetch = require('node-fetch');

async function trackServerEvent(userId, eventName, properties) {
  await fetch('https://api.logrocket.io/v1/track', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.LOGROCKET_API_KEY}`
    },
    body: JSON.stringify({
      userId: userId,
      event: eventName,
      properties: properties,
      timestamp: new Date().toISOString()
    })
  });
}

// Track server-side payment processing
app.post('/api/process-payment', async (req, res) => {
  const result = await processPayment(req.body);

  await trackServerEvent(req.user.id, 'Payment Processed', {
    amount: req.body.amount,
    status: result.status,
    provider: 'stripe',
    source: 'server'
  });

  res.json(result);
});

3. Enriching Client-Side Data with Server Context

Combine server-side context with client-side sessions.

Example: Add Server Metadata to User Profile

// server/user-enrichment.js
app.get('/api/user/profile', async (req, res) => {
  const user = await getUser(req.user.id);

  // Enrich LogRocket user profile with server-calculated data
  await identifyUserInLogRocket(user.id, {
    email: user.email,
    plan: user.subscription.plan,

    // Server-side calculated properties
    lifetimeValue: calculateLTV(user),
    totalApiCalls: getTotalApiCalls(user),
    accountAge: calculateAccountAge(user),
    lastServerActivity: user.lastApiRequest
  });

  res.json(user);
});

Client-Side vs Server-Side Comparison

Hybrid Approach: Best of Both Worlds

Combine client-side and server-side tracking for complete visibility.

Architecture:

1. Client-Side (Primary):

   • Session replay and user interactions
   • Frontend errors and console logs
   • Performance monitoring
   • User identification
   • Frontend event tracking

2. Server-Side (Supplemental):

   • Backend event tracking (API calls, webhooks)
   • User enrichment with server-calculated properties
   • Backup user identification

Implementation:

Client-Side (Browser):

// app.js
import LogRocket from 'logrocket';

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

// Identify user on load (if authenticated)
if (currentUser) {
  LogRocket.identify(currentUser.id, {
    email: currentUser.email,
    plan: currentUser.plan,
    role: currentUser.role
  });
}

// Track client-side events
LogRocket.track('Page Viewed', {
  page: window.location.pathname
});

Server-Side (Node.js API):

// server/analytics.js
const LogRocketAPI = {
  apiKey: process.env.LOGROCKET_API_KEY,

  async identify(userId, properties) {
    await fetch('https://api.logrocket.io/v1/identify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.apiKey}`
      },
      body: JSON.stringify({ userId, properties })
    });
  },

  async track(userId, eventName, properties) {
    await fetch('https://api.logrocket.io/v1/track', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.apiKey}`
      },
      body: JSON.stringify({
        userId,
        event: eventName,
        properties,
        timestamp: new Date().toISOString()
      })
    });
  }
};

// Track server-side API usage
app.post('/api/export-data', async (req, res) => {
  const data = await exportUserData(req.user.id);

  await LogRocketAPI.track(req.user.id, 'Data Exported', {
    recordCount: data.length,
    exportType: 'CSV',
    source: 'api'
  });

  res.json(data);
});

Server-Side Tracking Limitations

What Server-Side Cannot Do:

• Capture session replay (DOM snapshots, user interactions)
• Record console logs or JavaScript errors
• Monitor frontend performance (page load, Core Web Vitals)
• Track Redux/Vuex/NgRx state changes
• Capture network requests initiated from the browser

Workarounds: These capabilities are fundamental to LogRocket's value proposition and require client-side implementation. There is no server-side alternative.

API-Only Use Cases

For applications without a traditional frontend (APIs, mobile backends, CLIs), LogRocket's value is limited. Consider alternatives:

Better Alternatives for API-Only:

• Error Tracking: Sentry, Rollbar, Bugsnag
• APM: Datadog, New Relic, Dynatrace
• Logging: Splunk, Elasticsearch, CloudWatch

Why: LogRocket is designed for browser-based applications. For backend monitoring, use tools built for server-side observability.

Mobile Applications (React Native)

LogRocket does not currently support React Native or native mobile apps (iOS, Android).

Alternatives:

• Session Replay: Smartlook, UXCam, Appsee
• Error Tracking: Sentry, Bugsnag, Firebase Crashlytics
• Analytics: Mixpanel, Amplitude, Firebase Analytics

Web Views in Mobile Apps: If your mobile app uses web views, LogRocket can be embedded in those web views:

// WebView content
import LogRocket from 'logrocket';

LogRocket.init('your-app/project-name');
// Works within WebView, but not for native UI

Decision Framework

Choose Client-Side Only:

• Standard web applications (React, Vue, Angular, etc.)
• Focus on frontend debugging and user experience
• Session replay is primary value driver
• No need for server-side event tracking

Choose Hybrid (Client + Server):

• Need to track backend events (API usage, webhooks)
• Want to enrich user profiles with server-calculated data
• Backup user identification for reliability
• Complete visibility across frontend and backend

Consider Alternatives:

• Mobile native apps (use Smartlook, UXCam)
• API-only backends (use Sentry, Datadog, Splunk)
• Server-side only (use APM tools, not LogRocket)

Best Practices

Do:

• Prioritize client-side implementation for LogRocket
• Use server-side API for supplemental tracking (backend events, user enrichment)
• Document which events are tracked client-side vs server-side
• Test both client and server integrations in non-production environments

Don't:

• Rely solely on server-side tracking (misses core LogRocket value)
• Attempt to replicate session replay server-side (not possible)
• Use LogRocket for server-only applications (use APM tools instead)
• Forget to authenticate API requests with LogRocket API key

Configuration Checklist

Client-Side Setup:

• LogRocket SDK installed and initialized
• User identification implemented
• Custom event tracking for key actions
• Privacy controls configured (sanitization, CSS classes)
• State management plugins integrated (Redux, Vuex, NgRx)

Server-Side Setup (Optional):

• LogRocket API key obtained and secured
• Server-side user identification implemented
• Backend event tracking for API usage
• User enrichment with server-calculated properties
• API error handling and retry logic

Additional Resources:

• LogRocket JavaScript SDK
• LogRocket API Documentation
• User Identification