@axiomhq/react/dist/esm/web-vitals.js

The official React package for Axiom

"use client";
import * as React from "react";
import { onCLS, onFID, onLCP, onINP, onFCP, onTTFB } from "web-vitals";
function useReportWebVitals(pushMetrics, flushMetrics) {
  const pushMetricsRef = React.useRef(pushMetrics);
  const flushMetricsRef = React.useRef(flushMetrics);
  React.useEffect(() => {
    const effectFlushMetrics = () => {
      flushMetricsRef.current();
    };
    onCLS(pushMetricsRef.current);
    onFID(pushMetricsRef.current);
    onLCP(pushMetricsRef.current);
    onINP(pushMetricsRef.current);
    onFCP(pushMetricsRef.current);
    onTTFB(pushMetricsRef.current);
    document.addEventListener("visibilitychange", effectFlushMetrics);
    return () => {
      document.removeEventListener("visibilitychange", effectFlushMetrics);
    };
  }, []);
}
const transformWebVitalsMetric = (metric) => {
  return {
    webVital: metric,
    _time: (/* @__PURE__ */ new Date()).getTime(),
    source: "web-vital",
    path: window.location.pathname
  };
};
const createWebVitalsComponent = (logger) => {
  const sendMetrics = (metric) => {
    logger.raw(transformWebVitalsMetric(metric));
  };
  const flushMetrics = () => {
    logger.flush();
  };
  return () => {
    useReportWebVitals(sendMetrics, flushMetrics);
    return /* @__PURE__ */ React.createElement(React.Fragment, null);
  };
};
export {
  createWebVitalsComponent,
  transformWebVitalsMetric,
  useReportWebVitals
};
//# sourceMappingURL=web-vitals.js.map