Real User Monitoring (RUM) Setup: Collect Web Vitals in Production

# Install as a production dependency
npm install web-vitals

# Or via CDN (no bundler needed)
# Add to your HTML:
# <script type="module">
#   import { onLCP, onCLS, onINP } from
#     'https://cdn.jsdelivr.net/npm/web-vitals@4/dist/web-vitals.js';
# </script>

# Verify the installed version
npm list web-vitals
# web-vitals@4.x.x

import { onLCP, onCLS, onINP, onFCP, onTTFB } from 'web-vitals';

// All five metrics with attribution for debugging
import {
  onLCP,
  onCLS,
  onINP,
  onFCP,
  onTTFB
} from 'web-vitals/attribution';

function handleMetric(metric) {
  console.log(metric.name, {
    value: metric.value,        // e.g. 2340 (ms for LCP)
    rating: metric.rating,     // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,       // change since last callback invocation
    id: metric.id,             // unique per page session
    navigationType: metric.navigationType, // 'navigate' | 'reload' | 'back-forward'
    attribution: metric.attribution,       // debug info (element, url, etc.)
  });
  sendToRUM(metric);
}

onLCP(handleMetric);
onCLS(handleMetric);
onINP(handleMetric);
onFCP(handleMetric);
onTTFB(handleMetric);

function sendToRUM(metric) {
  const payload = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    // Enrich with page context
    url: location.href,
    referrer: document.referrer,
    timestamp: Date.now(),
    // Connection info (when available)
    effectiveType: navigator.connection?.effectiveType ?? null,
    deviceMemory: navigator.deviceMemory ?? null,
  });

  const endpoint = '/api/rum';

  if (navigator.sendBeacon) {
    // Preferred: guaranteed delivery on page unload
    navigator.sendBeacon(endpoint, payload);
  } else {
    // Fallback: keepalive keeps request alive after navigation
    fetch(endpoint, {
      method: 'POST',
      body: payload,
      keepalive: true,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}

// api/rum.js (Express or Vercel Edge Function)
const VALID_METRICS = new Set(['LCP', 'CLS', 'INP', 'FCP', 'TTFB']);
const MAX_VALUE = { LCP: 60000, CLS: 5, INP: 60000, FCP: 30000, TTFB: 30000 };

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  let data;
  try {
    data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
  } catch {
    return res.status(400).json({ error: 'Invalid JSON' });
  }

  const { name, value, rating, delta, id, url, timestamp } = data;

  // Validate
  if (!VALID_METRICS.has(name)) return res.status(400).end();
  if (typeof value !== 'number' || value < 0 || value > MAX_VALUE[name]) {
    return res.status(400).end();
  }

  // Normalize page path for grouping
  let pagePath = '/unknown';
  try {
    pagePath = new URL(url).pathname.replace(/\/$/, '') || '/';
  } catch { /* ignore invalid URLs */ }

  // Infer device category from User-Agent (simplified)
  const ua = req.headers['user-agent'] ?? '';
  const device = /mobile|android|iphone/i.test(ua) ? 'mobile' : 'desktop';

  // Write to your database (pseudo-code)
  await db.query(
    `INSERT INTO rum_events
       (metric_id, metric_name, value, rating, delta, page_path, device, recorded_at)
     VALUES ($1, $2, $3, $4, $5, $6, $7, to_timestamp($8 / 1000.0))
     ON CONFLICT (metric_id, metric_name) DO NOTHING`,
    [id, name, value, rating, delta, pagePath, device, timestamp]
  );

  // Respond 204 No Content -- no body needed
  res.status(204).end();
}

-- Materialize as a view or scheduled job refreshed every hour
CREATE MATERIALIZED VIEW rum_p75_summary AS
SELECT
  metric_name,
  page_path,
  device,
  DATE_TRUNC('day', recorded_at)                    AS day,
  COUNT(*)                                           AS sample_count,
  PERCENTILE_CONT(0.75) WITHIN GROUP (
    ORDER BY value
  )                                                  AS p75_value,
  PERCENTILE_CONT(0.50) WITHIN GROUP (
    ORDER BY value
  )                                                  AS p50_value,
  ROUND(
    100.0 * COUNT(*) FILTER (WHERE rating = 'good')
    / NULLIF(COUNT(*), 0), 1
  )                                                  AS pct_good
FROM rum_events
WHERE recorded_at >= NOW() - INTERVAL '28 days'
GROUP BY 1, 2, 3, 4
ORDER BY 1, 2, 3, 4;

-- Refresh on a schedule
REFRESH MATERIALIZED VIEW CONCURRENTLY rum_p75_summary;

import Chart from 'chart.js/auto';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

const THRESHOLDS = {
  LCP: { good: 2500, poor: 4000, unit: 'ms' },
  CLS: { good: 0.1,  poor: 0.25, unit: '' },
  INP: { good: 200,  poor: 500,  unit: 'ms' },
};

function buildMetricChart(canvasId, metric, labels, data) {
  const { good, poor, unit } = THRESHOLDS[metric];
  new Chart(document.getElementById(canvasId), {
    type: 'line',
    data: {
      labels,
      datasets: [{
        label: `p75 ${metric}`,
        data,
        borderColor: '#22c55e',
        backgroundColor: 'rgba(34, 197, 94, 0.08)',
        tension: 0.3,
        pointRadius: 3,
      }],
    },
    options: {
      scales: {
        y: { beginAtZero: false },
        x: { type: 'time', time: { unit: 'day' } },
      },
      plugins: {
        annotation: {
          annotations: {
            goodLine: {
              type: 'line', yMin: good, yMax: good,
              borderColor: '#22c55e', borderDash: [4, 4],
              label: { content: `Good (${good}${unit})`, display: true },
            },
            poorLine: {
              type: 'line', yMin: poor, yMax: poor,
              borderColor: '#ef4444', borderDash: [4, 4],
              label: { content: `Poor (${poor}${unit})`, display: true },
            },
          },
        },
      },
    },
  });
}

-- Identify the worst-performing country/browser combinations for LCP
SELECT
  country_code,
  browser_family,
  COUNT(*)                                          AS sessions,
  ROUND(PERCENTILE_CONT(0.75) WITHIN GROUP (
    ORDER BY value
  ))                                                AS p75_lcp_ms,
  CASE
    WHEN PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) <= 2500 THEN 'good'
    WHEN PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) <= 4000 THEN 'needs-improvement'
    ELSE 'poor'
  END                                               AS rating
FROM rum_events
WHERE metric_name = 'LCP'
  AND recorded_at >= NOW() - INTERVAL '7 days'
  AND sample_count >= 50
GROUP BY 1, 2
HAVING COUNT(*) >= 50
ORDER BY p75_lcp_ms DESC
LIMIT 20;

// Run this on a cron job (e.g., every 15 minutes)
async function checkForRegressions() {
  const THRESHOLDS = { LCP: 2500, CLS: 0.1, INP: 200 };
  const POOR_THRESHOLDS = { LCP: 4000, CLS: 0.25, INP: 500 };

  const recent = await db.query(`
    SELECT metric_name, page_path, device,
      PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) AS p75
    FROM rum_events
    WHERE recorded_at >= NOW() - INTERVAL '2 hours'
    GROUP BY 1, 2, 3
    HAVING COUNT(*) >= 20
  `);

  for (const row of recent.rows) {
    const poorThreshold = POOR_THRESHOLDS[row.metric_name];
    if (poorThreshold && row.p75 > poorThreshold) {
      await sendSlackAlert({
        text: [
          `*RUM Regression Detected*`,
          `Metric: ${row.metric_name}`,
          `Page: ${row.page_path} (${row.device})`,
          `Current p75: ${Math.round(row.p75)}`,
          `Poor threshold: ${poorThreshold}`,
          `<${DASHBOARD_URL}?metric=${row.metric_name}&page=${row.page_path}|View dashboard>`,
        ].join('\n'),
      });
    }
  }
}

async function sendSlackAlert(payload) {
  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
}