How do you set up performance monitoring for production applications?

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

// Send metrics to analytics
function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    // Additional context
    url: window.location.href,
    userAgent: navigator.userAgent,
    connection: navigator.connection?.effectiveType,
    deviceMemory: navigator.deviceMemory,
    timestamp: Date.now(),
  });

  // Use sendBeacon for reliability
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics', body);
  } else {
    fetch('/api/analytics', {
      method: 'POST',
      body,
      keepalive: true,
    });
  }
}

// Collect all Core Web Vitals
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

// Custom performance marks
performance.mark('app-interactive');
performance.measure('time-to-interactive', 'navigationStart', 'app-interactive');

const tti = performance.getEntriesByName('time-to-interactive')[0];
sendToAnalytics({ name: 'TTI', value: tti.duration });