// Using web-vitals library
import { onLCP } from 'web-vitals';

onLCP((metric) => {
  console.log('LCP:', metric.value);
  // Send to analytics
  analytics.track('web-vital', {
    name: 'LCP',
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
  });
});

import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Log the interaction that caused the INP
  console.log('Attribution:', metric.attribution);
});

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
  // Log elements that shifted
  metric.entries.forEach((entry) => {
    console.log('Shifted element:', entry.sources);
  });
});

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

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });

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

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

// Measure custom user timing
performance.mark('feature-start');

// ... feature code ...

performance.mark('feature-end');
performance.measure('feature-duration', 'feature-start', 'feature-end');

const measure = performance.getEntriesByName('feature-duration')[0];
console.log('Feature took:', measure.duration, 'ms');

// Track user session with context
const sessionContext = {
  sessionId: generateSessionId(),
  userId: getUserId(),
  device: getDeviceType(),
  connection: navigator.connection?.effectiveType,
  viewport: `${window.innerWidth}x${window.innerHeight}`,
};

function trackMetric(metric) {
  sendToAnalytics({
    ...metric,
    ...sessionContext,
    timestamp: Date.now(),
    url: window.location.href,
  });
}