RUM Troubleshooting

Common issues and solutions for Real User Monitoring.

No Data Appearing in Dashboard

1. Check Domain Whitelist

Problem: Events not accepted due to CORS

Solution:

1. Go to Dashboard → Observability → Apps → [Your App] → Settings
2. Check "Allowed Domains"
3. Add your domain: example.com, www.example.com
4. Save settings

Verify in browser:

// Console error:
// "CORS error: Domain not whitelisted"

2. Verify API Key

Problem: Invalid or missing API key

Solution:

// Check initialization
console.log(rum.config);
// Should show: { apiKey: '...', appId: '...', ... }

// Verify in network tab
// POST to rum.statusradar.dev/v1/ingest
// Headers: X-App-Token: your-api-key

Browser console error:

401 Unauthorized: Invalid API key

3. Check SDK Initialization

Problem: RUM SDK not loaded or started

Solution:

// Verify SDK loaded
console.log(window.StatusRadarRUM);
// Should output: { version: "1.0.0", ... }

// Check if started
rum.isActive();
// Should return: true

// Start if not running
if (!rum.isActive()) {
  rum.start();
}

4. Network Connectivity

Problem: Can't reach RUM endpoint

Solution:

# Test endpoint reachability
curl -I https://rum.statusradar.dev/v1/ingest

# Should return: 405 Method Not Allowed (POST required)

Check in browser:

• Open Network tab
• Look for requests to rum.statusradar.dev
• Status should be 202 (Accepted)
• Response: {"status":"ok"}

5. Ad Blockers

Problem: Ad blocker blocking RUM requests

Solution:

• RUM endpoint uses rum.statusradar.dev (not analytics-related domain)
• Ask users to whitelist domain
• Or use custom domain (Pro plan)

Detect ad blocker:

fetch('https://rum.statusradar.dev/v1/health')
  .then(() => console.log('RUM accessible'))
  .catch(() => console.warn('RUM blocked - possibly ad blocker'));

High Event Count / Quota Exceeded

1. Reduce Click Tracking

Problem: Too many click events

Solution:

rum.configure({
  trackInteractions: false  // Disable auto-tracking
});

// Or track only specific clicks
document.querySelector('.important-button').addEventListener('click', () => {
  rum.trackEvent('important_click');
});

2. Reduce Console Log Tracking

Problem: Logging too many console messages

Solution:

rum.configure({
  trackConsole: false,  // Disable completely
  // Or filter by level
  consoleLogLevels: ['error', 'warn']  // Only errors and warnings
});

3. Sample High-Volume Events

Problem: Specific events too frequent

Solution:

// Sample 10% of clicks
rum.trackEvent('click', data, { sampleRate: 0.1 });

// Or configure globally
rum.configure({
  sampleRates: {
    'click': 0.1,
    'mousemove': 0.01,
    'scroll': 0.05
  }
});

4. Disable Network Tracking

Problem: Tracking every network request

Solution:

rum.configure({
  trackNetwork: false,  // Disable completely
  // Or track only errors
  networkErrorsOnly: true
});

Session Replay Issues

1. Replay Not Recording

Problem: Sessions not being recorded

Solution:

// 1. Check if enabled
console.log(rum.config.sessionReplay.enabled);

// 2. Check sample rate
console.log(rum.config.sessionReplay.sampleRate);  // Should be > 0

// 3. Check quota
// Dashboard → Apps → Usage → Replay Storage

// 4. Verify recording
if (rum.isReplayActive()) {
  console.log('Recording active');
} else {
  console.log('Not recording - check config');
}

2. Replay Missing Styles

Problem: Replay looks broken, missing CSS

Solution:

rum.configure({
  sessionReplay: {
    enabled: true,
    inlineStylesheet: true,  // Inline CSS
    inlineImages: true,      // Inline images
    collectFonts: true       // Collect web fonts
  }
});

3. Replay Too Large

Problem: Hitting storage quota quickly

Solution:

rum.configure({
  sessionReplay: {
    enabled: true,
    sampleRate: 0.1,  // Record 10% of sessions

    // Reduce recording frequency
    sampling: {
      scroll: 200,      // Record scroll every 200ms
      mousemove: 100,   // Mouse move every 100ms
      input: 500        // Input every 500ms
    },

    // Block heavy elements
    blockSelector: '.ad, video, iframe, canvas',

    // Don't record canvas
    recordCanvas: false
  }
});

4. Sensitive Data in Replay

Problem: Passwords/credit cards visible in replay

Solution:

rum.configure({
  sessionReplay: {
    maskAllInputs: true,  // Mask all inputs by default
    maskTextSelector: '.password, .credit-card, [data-sensitive]',
    blockSelector: '.private, .admin-only'
  }
});

// Mark in HTML
<input type="text" class="sr-mask" /> <!-- Masked -->
<div class="sr-block">...</div> <!-- Blocked -->

Performance Issues

1. SDK Slowing Down Page

Problem: RUM adding noticeable lag

Solution:

// 1. Lazy load RUM
setTimeout(() => {
  loadRUM();
}, 1000);  // Load after 1 second

// 2. Reduce batch frequency
rum.configure({
  batchInterval: 30000  // Send every 30 seconds instead of 10
});

// 3. Disable heavy features
rum.configure({
  trackConsole: false,
  trackNetwork: false,
  sessionReplay: { enabled: false }
});

2. Memory Usage Growing

Problem: Page using too much memory

Solution:

// Limit event queue size
rum.configure({
  maxQueueSize: 500  // Drop old events if queue > 500
});

// Flush events more frequently
rum.configure({
  batchSize: 25,  // Send when 25 events (instead of 50)
  batchInterval: 5000  // Every 5 seconds
});

CORS Errors

1. Preflight Failed

Problem: OPTIONS request failing

Browser console:

Access to fetch at 'https://rum.statusradar.dev/v1/ingest' from origin
'https://example.com' has been blocked by CORS policy

Solution:

1. Verify domain added to app settings
2. Include subdomain if needed: www.example.com
3. Wait 1-2 minutes for cache to update
4. Hard refresh browser (Ctrl+Shift+R)

2. Localhost Development

Problem: CORS error in local development

Solution:

// Option 1: Add localhost to allowed domains
// Dashboard → Apps → Settings → Domains
// Add: localhost, localhost:3000, 127.0.0.1:3000

// Option 2: Use development mode (bypasses CORS)
const rum = new StatusRadarRUM({
  apiKey: 'dev-key',
  appId: 'dev-app',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',
  development: true  // Relaxes CORS (not for production!)
});

Source Maps

1. Stack Traces Not Deobfuscated

Problem: Minified stack traces in dashboard

Solution:

# 1. Upload source maps
npx @statusradar/cli upload-sourcemaps \
  --api-key YOUR_API_KEY \
  --app-id YOUR_APP_ID \
  --release 1.2.3 \
  --dir ./dist

# 2. Set release in RUM
rum.configure({
  release: '1.2.3'  // Must match uploaded version
});

# 3. Verify upload
# Dashboard → Apps → Releases → 1.2.3
# Should show uploaded source maps

2. Wrong Source File Shown

Problem: Stack trace points to wrong file

Solution:

// webpack.config.js
module.exports = {
  output: {
    devtoolModuleFilenameTemplate: (info) => {
      // Use relative path matching your file structure
      return `webpack:///${info.resourcePath}`;
    }
  }
};

Integration Issues

React

Problem: RUM not tracking route changes

Solution:

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function App() {
  const location = useLocation();

  useEffect(() => {
    rum.trackPageView({
      path: location.pathname,
      title: document.title
    });
  }, [location]);
}

Vue Router

Problem: SPA navigation not tracked

Solution:

// router/index.js
router.afterEach((to) => {
  rum.trackPageView({
    path: to.path,
    name: to.name
  });
});

Next.js

Problem: RUM loaded on server-side

Solution:

// pages/_app.js
import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Only run in browser
    if (typeof window !== 'undefined') {
      const rum = new StatusRadarRUM({...});
      rum.start();
    }
  }, []);

  return <Component {...pageProps} />;
}

Data Not Matching Expectations

1. Session Count Seems Low

Possible causes:

• Sample rate < 100%
• Ad blockers
• Users leaving quickly (< 10 seconds)
• Bots filtered out

Check:

console.log('Sample rate:', rum.config.sampleRate);
console.log('Session ID:', rum.getSessionId());

2. Missing Events

Possible causes:

• Event filters dropping events
• Sample rate on specific events
• Events fired before SDK initialized

Solution:

// Wait for RUM ready
rum.onReady(() => {
  // Now safe to track events
  rum.trackEvent('app_loaded');
});

3. Duplicate Events

Problem: Same event tracked twice

Solution:

// Ensure RUM only initialized once
if (!window.__rumInitialized) {
  window.__rumInitialized = true;
  const rum = new StatusRadarRUM({...});
  rum.start();
}

Debugging Tools

Enable Debug Mode

rum.configure({
  debug: true  // Log all events to console
});

// Or via URL parameter
// https://yoursite.com?rum_debug=true

Inspect RUM State

// Get current config
console.log(rum.config);

// Get session info
console.log({
  sessionId: rum.getSessionId(),
  userId: rum.getUserId(),
  isActive: rum.isActive(),
  isReplayActive: rum.isReplayActive()
});

// Get event queue
console.log('Pending events:', rum.getQueueSize());

// Get stats
console.log(rum.getStats());

Network Inspection

# Check endpoint health
curl https://rum.statusradar.dev/v1/health

# Test event ingestion
curl -X POST https://rum.statusradar.dev/v1/ingest \
  -H "X-App-Token: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"event_type":"test","timestamp":1234567890}'

Getting Help

Check Status Page

https://status.statusradar.dev - Check for service outages

Support Channels

• Documentation: https://statusradar.dev/docs
• Email: [email protected]
• Discord: https://discord.gg/statusradar

Provide Debug Info

When reporting issues, include:

// Copy this output
console.log(JSON.stringify({
  sdk_version: rum.version,
  config: rum.config,
  session_id: rum.getSessionId(),
  stats: rum.getStats(),
  user_agent: navigator.userAgent,
  url: window.location.href
}, null, 2));

Next Steps

• RUM Overview - Feature overview
• Custom Events - Advanced event tracking
• Session Replay - Replay configuration
• Observability Apps - App settings