astro-web-vitals-pocketbase/src/core/index.ts

import type { Metric } from "web-vitals";
import { setupMetricCollection } from "./collect-vitals";
import { reportMetrics } from "./report-metrics";

declare global {
  interface Window {
    __web_vitals__?: {
      url: string;
      batchEnabled: boolean;
    };
  }
}

if (!window.__web_vitals__) {
  throw new Error(
    "Web Vitals integration is not properly configured. Please check your configuration."
  );
}

const queue = new Set<Metric>();
let timer: ReturnType<typeof setTimeout> | undefined;

function addToQueue(metric: Metric): void {
  console.log("Adding metric to queue:", metric);
  queue.add(metric);

  if (timer) {
    clearTimeout(timer);
  }

  timer = setTimeout(() => {
    flushQueue();
  }, 5000);
}

function flushQueue(): void {
  if (queue.size === 0) {
    return;
  }

  const metrics = [...queue];
  queue.clear();

  console.log("Flushing metrics:", metrics);

  reportMetrics(
    metrics,
    window.__web_vitals__!.url,
    window.__web_vitals__!.batchEnabled
  );

  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
}

// Initialize the web vitals collection
setupMetricCollection((metric: Metric) => {
  addToQueue(metric);
});

// Listen for events to flush the queue
addEventListener("visibilitychange", () => {
  if (document.visibilityState !== "hidden") {
    return;
  }

  flushQueue();
});
addEventListener("pagehide", () => {
  flushQueue();
});