Руководство по быстрому старту RUM

Начните работу с Real User Monitoring менее чем за 5 минут.

Шаг 1: Создайте Observability-приложение

Перейдите в Dashboard → Observability → Apps
Нажмите «Create App»
Заполните данные:
- Name: My Website
- Type: Frontend (RUM)
- Domains: example.com, www.example.com (через запятую)
Нажмите «Create»
Скопируйте свой API Key (показывается один раз)

Шаг 2: Установите RUM SDK

Добавьте в <head>:

<script>
(function(w,d,s,r,k,a){
  w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
  a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
  d.head.appendChild(a);
})(window,document,'script','rum');

rum('init', {
  apiKey: 'your-api-key-here',
  appId: 'your-app-id-here',
  endpoint: 'https://rum.statusradar.dev/v1/ingest'
});
rum('start');
</script>

Шаг 3: Проверьте сбор данных

Откройте свой сайт в браузере
Перейдите в Dashboard → Observability → Apps → [Your App]
Вы должны увидеть:
- Рост числа сессий
- Появление событий в реальном времени
- Метрики Core Web Vitals

Параметры конфигурации

Базовая конфигурация

rum('init', {
  apiKey: 'your-api-key-here',     // Required: Your app API key
  appId: 'your-app-id-here',       // Required: Your app ID
  endpoint: 'https://rum.statusradar.dev/v1/ingest', // Required

  // Optional settings
  sampleRate: 1.0,                  // 0.0-1.0 (1.0 = 100% of sessions)
  sessionTimeout: 1800000,          // 30 minutes
  trackInteractions: true,          // Track clicks
  trackConsole: true,               // Capture console logs
  trackErrors: true,                // Capture JS errors
  sessionReplay: false              // Enable session replay (see session-replay.md)
});
rum('start');

Что отслеживается автоматически?

События загрузки страницы

Время DNS-разрешения
Время установки TCP-соединения
Время парсинга DOM
Время загрузки ресурсов
Общее время загрузки страницы

Core Web Vitals

LCP (Largest Contentful Paint)
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
FCP (First Contentful Paint)
TTFB (Time to First Byte)

Ошибки

JavaScript-ошибки
Необработанные отклонения промисов
Сбои загрузки ресурсов

Интеграция с фреймворками

Для React, Vue.js, Next.js и других фреймворков добавьте скрипт RUM в основной HTML-шаблон:

React (public/index.html)

<!DOCTYPE html>
<html>
  <head>
    <!-- Add RUM SDK -->
    <script>
    (function(w,d,s,r,k,a){
      w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
      a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
      d.head.appendChild(a);
    })(window,document,'script','rum');

    rum('init', {
      apiKey: '%REACT_APP_STATUSRADAR_KEY%',
      appId: '%REACT_APP_STATUSRADAR_APP_ID%',
      endpoint: 'https://rum.statusradar.dev/v1/ingest'
    });
    rum('start');
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Vue.js (public/index.html)

<!DOCTYPE html>
<html>
  <head>
    <!-- Add RUM SDK -->
    <script>
    (function(w,d,s,r,k,a){
      w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
      a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
      d.head.appendChild(a);
    })(window,document,'script','rum');

    rum('init', {
      apiKey: process.env.VUE_APP_STATUSRADAR_KEY,
      appId: process.env.VUE_APP_STATUSRADAR_APP_ID,
      endpoint: 'https://rum.statusradar.dev/v1/ingest'
    });
    rum('start');
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Next.js (pages/_document.js)

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script dangerouslySetInnerHTML={{
          __html: `
            (function(w,d,s,r,k,a){
              w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
              a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
              d.head.appendChild(a);
            })(window,document,'script','rum');

            rum('init', {
              apiKey: '${process.env.NEXT_PUBLIC_STATUSRADAR_KEY}',
              appId: '${process.env.NEXT_PUBLIC_STATUSRADAR_APP_ID}',
              endpoint: 'https://rum.statusradar.dev/v1/ingest'
            });
            rum('start');
          `
        }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Проверка установки

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

Проверьте инициализацию RUM:

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

Вкладка Network

Найдите POST-запросы к rum.statusradar.dev/v1/ingest со следующими признаками:

Код статуса: 202 (Accepted)
Payload: сжатые данные событий

Dashboard

Перейдите в Dashboard → Observability → Apps и проверьте:

✅ Число сессий > 0
✅ Число событий > 0
✅ Свежая метка времени последнего события

Частые проблемы

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

Проверьте белый список доменов: убедитесь, что ваш домен добавлен в приложение
Проверьте API key: посмотрите в консоли браузера ошибки аутентификации
Проверьте CORS: найдите в консоли ошибки CORS
Проверьте endpoint: убедитесь, что https://rum.statusradar.dev/v1/ingest доступен

Слишком много событий

События включают: pageload, vitals, errors, clicks, console logs, network requests.

Чтобы уменьшить число:

rum.configure({
  trackInteractions: false,  // Disable click tracking
  trackConsole: false,       // Disable console logs
  trackNetwork: false        // Disable network requests
});

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

Session Replay — включите запись сессий
Пользовательские события — отслеживайте бизнес-метрики
Отслеживание ошибок — настройте оповещения об ошибках
Управление квотами — следите за использованием

On this page