Performance Monitoring

Track Core Web Vitals and performance metrics.

Core Web Vitals

RUM automatically collects Google's Core Web Vitals:

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	≤2.5s	2.5-4s	>4s
FID (First Input Delay)	≤100ms	100-300ms	>300ms
CLS (Cumulative Layout Shift)	≤0.1	0.1-0.25	>0.25

Additional metrics:

• FCP - First Contentful Paint
• TTFB - Time to First Byte
• INP - Interaction to Next Paint

Enabling Performance Tracking

SimplrRUM.init({
  apiKey: 'pk_live_xxx',
  applicationId: 'my-app',
  trackPerformance: true  // Enabled by default
});

Long Task Detection

Tasks blocking the main thread >50ms are captured:

// Automatically tracked
// No configuration needed

// In dashboard, you'll see:
// - Task duration
// - Attribution (which script caused it)
// - Timing relative to page load

Network Request Tracking

Track API calls and resource loading:

SimplrRUM.init({
  trackNetwork: true,
  allowedUrls: [
    /api\.yourapp\.com/,
    /cdn\.yourapp\.com/
  ],
  blockedUrls: [
    /analytics\./,
    /tracking\./
  ]
});

Captured data:

• URL (sanitized)
• Method (GET, POST, etc.)
• Status code
• Duration
• Request/response size

React Performance

Monitor component render performance:

import { useRenderPerformance } from '@simplr-ai/js/react';

function HeavyComponent() {
  useRenderPerformance('HeavyComponent');

  return <ExpensiveRender />;
}

Track async operations:

import { useTrackAsync } from '@simplr-ai/js/react';

function DataLoader() {
  const trackAsync = useTrackAsync();

  const loadData = async () => {
    await trackAsync('loadUserData', async () => {
      return await fetchUserData();
    });
  };

  return <button onClick={loadData}>Load</button>;
}

Performance Data Structure

interface PerformanceMetrics {
  lcp_avg: number;    // milliseconds
  fid_avg: number;    // milliseconds
  cls_avg: number;    // score (0-1+)
  fcp_avg: number;    // milliseconds
  ttfb_avg: number;   // milliseconds
  inp_avg: number;    // milliseconds
}

Viewing Performance Data

Performance metrics are available in the RUM dashboard:

1. Go to Dashboard > RUM
2. Select a time range
3. View Web Vitals trends
4. Drill into slow pages

You can also query via API:

curl https://api.simplr-ai.com/v1/rum/sessions \
  -H "X-API-Key: sk_live_xxx"