50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useReportWebVitals } from "next/web-vitals";
|
|
|
|
const TRACKED_METRICS = new Set(["INP", "LCP", "FCP"]);
|
|
const WEB_VITALS_ENABLED =
|
|
process.env.NEXT_PUBLIC_POLYWEATHER_WEB_VITALS === "true";
|
|
|
|
export function WebVitalsReporter() {
|
|
const pathname = usePathname();
|
|
|
|
if (!WEB_VITALS_ENABLED) {
|
|
return null;
|
|
}
|
|
|
|
useReportWebVitals((metric) => {
|
|
if (!TRACKED_METRICS.has(metric.name)) {
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
id: metric.id,
|
|
metric: metric.name,
|
|
navigationType: metric.navigationType,
|
|
pathname: pathname || "/",
|
|
rating: metric.rating,
|
|
value: metric.value,
|
|
};
|
|
|
|
const body = JSON.stringify(payload);
|
|
const url = "/api/vitals";
|
|
|
|
if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
|
|
const blob = new Blob([body], { type: "application/json" });
|
|
navigator.sendBeacon(url, blob);
|
|
return;
|
|
}
|
|
|
|
void fetch(url, {
|
|
body,
|
|
headers: { "Content-Type": "application/json" },
|
|
keepalive: true,
|
|
method: "POST",
|
|
});
|
|
});
|
|
|
|
return null;
|
|
}
|