Web Vitals Monitoring Dashboard

// Import web vitals with attribution support
import { onCLS, onLCP, onINP, onFCP, onTTFB } from "web-vitals/attribution";

// Initialize tracking for all Core Web Vitals
export function initWebVitals(logService, eventName, routingMode = "mpa") {
  // Register all core web vitals observers with attribution
  onCLS(processMetric, { reportAllChanges: true });
  onLCP(processMetric, { reportAllChanges: true });
  onINP(processMetric, { reportAllChanges: true });
  onFCP(processMetric, { reportAllChanges: true });
  onTTFB(processMetric, { reportAllChanges: true });

  // Flush metrics on visibility change (user leaving page)
  addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      flushWebVitals();
    }
  }, true);

  // Flush before page unload
  addEventListener("beforeunload", flushWebVitals, true);
}

// Track route changes in Next.js App Router
export default function WebVitalsApp() {
  const pathname = usePathname();
  const previousPathname = useRef(pathname);

  useEffect(() => {
    // Initialize on mount with MPA mode
    import("../../../../utils/webVitalsTracker").then(module => {
      module.initWebVitals(
        LogServiceApp,
        "WEB_VITALS_ATTRIBUTION_APP",
        "mpa"
      );
    });
  }, []);

  useEffect(() => {
    // Handle route changes (SPA navigation)
    if (previousPathname.current !== pathname) {
      // Flush metrics from previous route
      webVitalsModule.current.flushWebVitals();
      
      // Update to new route with SPA mode
      webVitalsModule.current.updateRoute(pathname, "spa");
      previousPathname.current = pathname;
    }
  }, [pathname]);
}

// Flush metrics with device and page context
export function flushWebVitals() {
  const eventInfo = {
    // Device Information
    url: location.href,
    pathname: currentPathname,
    referrer: document.referrer,
    userAgent: navigator.userAgent,
    memory: navigator.deviceMemory,
    cpus: navigator.hardwareConcurrency,
    deviceWidth: window.innerWidth,
    deviceHeight: window.innerHeight,
    connection: {
      effectiveType: navigator.connection.effectiveType,
      rtt: navigator.connection.rtt,
      downlink: navigator.connection.downlink
    },
    
    // Web Vitals Metrics
    metrics: {
      LCP: { value, target, url, timeToFirstByte, ... },
      CLS: { value, largestShiftTarget, largestShiftSource, ... },
      INP: { value, interactionTarget, longestScript, ... },
      FCP: { value, timeToFirstByte, loadState, ... },
      TTFB: { value, dnsDuration, connectionDuration, ... }
    },
    
    // Context
    routingMode: "mpa" | "spa",
    pageType: "HOME" | "SRP" | "JD" | "OTHER",
    timestamp: new Date().toISOString()
  };

  // Log using deferred logging for better performance
  logService.logEventDefer(
    { name: "WEB_VITALS_ATTRIBUTION", category: "WEB_VITALS" },
    eventInfo
  );
}