RUM Quickstart Guide
Get started with Real User Monitoring in less than 5 minutes.
Step 1: Create an Observability App
- Navigate to Dashboard → Observability → Apps
- Click "Create App"
- Fill in the details:
- Name: My Website
- Type: Frontend (RUM)
- Domains:
example.com, www.example.com(comma-separated)
- Click "Create"
- Copy your API Key (shown once)
Step 2: Install the RUM SDK
Add to your <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>Step 3: Verify Data Collection
- Open your website in a browser
- Navigate to Dashboard → Observability → Apps → [Your App]
- You should see:
- Session count increasing
- Events appearing in real-time
- Core Web Vitals metrics
Configuration Options
Basic Configuration
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');What Gets Tracked Automatically?
Page Load Events
- DNS lookup time
- TCP connection time
- DOM parsing time
- Resource loading time
- Total page load time
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)
Navigation
- Page views
- SPA route changes
- Back/forward navigation
Errors
- JavaScript errors
- Unhandled promise rejections
- Resource load failures
Framework Integration
For React, Vue.js, Next.js, and other frameworks, add the RUM script to your main HTML template:
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>
)
}Verifying Installation
Browser Console
Check for RUM initialization:
console.log(window.StatusRadarRUM);
// Should output: { version: "1.0.0", sessionId: "...", ... }Network Tab
Look for POST requests to rum.statusradar.dev/v1/ingest with:
- Status code: 202 (Accepted)
- Payload: Compressed event data
Dashboard
Navigate to Dashboard → Observability → Apps and verify:
- ✅ Sessions count > 0
- ✅ Events count > 0
- ✅ Last event timestamp recent
Common Issues
No data appearing in dashboard
- Check domain whitelist: Ensure your domain is added to the app
- Verify API key: Check browser console for authentication errors
- Check CORS: Look for CORS errors in console
- Verify endpoint: Ensure
https://rum.statusradar.dev/v1/ingestis reachable
High event count
Events include: pageload, vitals, errors, clicks, console logs, network requests.
To reduce:
rum.configure({
trackInteractions: false, // Disable click tracking
trackConsole: false, // Disable console logs
trackNetwork: false // Disable network requests
});Next Steps
- Session Replay - Enable session recording
- Custom Events - Track business metrics
- Error Tracking - Set up error alerting
- Quota Management - Monitor usage
On this page
- Step 1: Create an Observability App
- Step 2: Install the RUM SDK
- Step 3: Verify Data Collection
- Configuration Options
- Basic Configuration
- What Gets Tracked Automatically?
- Page Load Events
- Core Web Vitals
- Navigation
- Errors
- Framework Integration
- React (public/index.html)
- Vue.js (public/index.html)
- Next.js (pages/_document.js)
- Verifying Installation
- Browser Console
- Network Tab
- Dashboard
- Common Issues
- No data appearing in dashboard
- High event count
- Next Steps