Устранение неполадок RUM

Частые проблемы и решения для Real User Monitoring.

Данные не появляются в Dashboard

1. Проверьте белый список доменов

Проблема: события не принимаются из-за CORS

Решение:

1. Перейдите в Dashboard → Observability → Apps → [Your App] → Settings
2. Проверьте «Allowed Domains»
3. Добавьте свой домен: example.com, www.example.com
4. Сохраните настройки

Проверка в браузере:

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

2. Проверьте API Key

Проблема: недействительный или отсутствующий API key

Решение:

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

Ошибка в консоли браузера:

401 Unauthorized: Invalid API key

3. Проверьте инициализацию SDK

Проблема: RUM SDK не загружен или не запущен

Решение:

// 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. Сетевая доступность

Проблема: не удаётся достучаться до endpoint RUM

Решение:

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

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

Проверка в браузере:

• Откройте вкладку Network
• Найдите запросы к rum.statusradar.dev
• Статус должен быть 202 (Accepted)
• Ответ: {"status":"ok"}

5. Блокировщики рекламы

Проблема: блокировщик рекламы блокирует запросы RUM

Решение:

• Endpoint RUM использует rum.statusradar.dev (не домен, связанный с аналитикой)
• Попросите пользователей добавить домен в белый список
• Или используйте собственный домен (план Pro)

Определение блокировщика рекламы:

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

Слишком много событий / превышение квоты

1. Уменьшите отслеживание кликов

Проблема: слишком много событий кликов

Решение:

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

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

2. Уменьшите отслеживание логов консоли

Проблема: логируется слишком много сообщений консоли

Решение:

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

3. Применяйте выборку к высокочастотным событиям

Проблема: конкретные события возникают слишком часто

Решение:

// 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. Отключите отслеживание сети

Проблема: отслеживается каждый сетевой запрос

Решение:

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

Проблемы с Session Replay

1. Запись не ведётся

Проблема: сессии не записываются

Решение:

// 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. В записи отсутствуют стили

Проблема: запись выглядит сломанной, отсутствует CSS

Решение:

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

3. Запись слишком большая

Проблема: квота хранилища быстро исчерпывается

Решение:

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. Чувствительные данные в записи

Проблема: пароли/данные карт видны в записи

Решение:

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

Проблемы с производительностью

1. SDK замедляет страницу

Проблема: RUM добавляет заметную задержку

Решение:

// 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. Растёт использование памяти

Проблема: страница использует слишком много памяти

Решение:

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

1. Сбой preflight-запроса

Проблема: сбой OPTIONS-запроса

Консоль браузера:

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

Решение:

1. Убедитесь, что домен добавлен в настройки приложения
2. Включите субдомен при необходимости: www.example.com
3. Подождите 1–2 минуты, пока кеш обновится
4. Выполните жёсткое обновление браузера (Ctrl+Shift+R)

2. Разработка на localhost

Проблема: ошибка CORS при локальной разработке

Решение:

// 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. Стек-трейсы не деобфусцированы

Проблема: минифицированные стек-трейсы в dashboard

Решение:

# 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. Показан неверный исходный файл

Проблема: стек-трейс указывает на неверный файл

Решение:

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

Проблемы интеграции

React

Проблема: RUM не отслеживает смену маршрутов

Решение:

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

Проблема: навигация в SPA не отслеживается

Решение:

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

Next.js

Проблема: RUM загружается на стороне сервера

Решение:

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

Данные не соответствуют ожиданиям

1. Число сессий кажется низким

Возможные причины:

• Sample rate < 100%
• Блокировщики рекламы
• Пользователи быстро уходят (< 10 секунд)
• Боты отфильтрованы

Проверка:

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

2. Отсутствующие события

Возможные причины:

• Фильтры событий отбрасывают события
• Выборка по конкретным событиям
• События вызваны до инициализации SDK

Решение:

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

3. Дублирующиеся события

Проблема: одно и то же событие отслеживается дважды

Решение:

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

Инструменты отладки

Включение режима отладки

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

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

Инспекция состояния RUM

// 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());

Инспекция сети

# 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}'

Получение помощи

Проверьте статус-страницу

https://status.statusradar.dev — проверьте наличие сбоев сервиса

Каналы поддержки

• Документация: https://statusradar.dev/docs
• Email: [email protected]
• Discord: https://discord.gg/statusradar

Предоставьте отладочную информацию

При сообщении о проблемах приложите:

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

Дальнейшие шаги

• Обзор RUM — обзор возможностей
• Пользовательские события — продвинутое отслеживание событий
• Session Replay — конфигурация записи
• Observability-приложения — настройки приложения