45 lines
2.5 KiB
TypeScript
45 lines
2.5 KiB
TypeScript
export interface WebVitalsClientOptions {
|
|
endpoint?: string;
|
|
sampleRate?: number;
|
|
}
|
|
|
|
export function webVitalsClient(options: WebVitalsClientOptions = {}): string {
|
|
const endpoint = JSON.stringify(options.endpoint ?? "/__wrnexus/metrics/vitals");
|
|
const sampleRate = Math.max(0, Math.min(1, options.sampleRate ?? 0.1));
|
|
return `(function(){
|
|
if (!window.PerformanceObserver || Math.random() > ${sampleRate}) return;
|
|
var endpoint = ${endpoint};
|
|
var cls = 0;
|
|
var lcp = 0;
|
|
var inp = 0;
|
|
var flushed = false;
|
|
function rating(name, value) {
|
|
if (name === "LCP") return value <= 2500 ? "good" : value <= 4000 ? "needs-improvement" : "poor";
|
|
if (name === "INP") return value <= 200 ? "good" : value <= 500 ? "needs-improvement" : "poor";
|
|
if (name === "CLS") return value <= 0.1 ? "good" : value <= 0.25 ? "needs-improvement" : "poor";
|
|
return "unknown";
|
|
}
|
|
function send(name, value) {
|
|
var body = JSON.stringify({ name: name, value: value, rating: rating(name, value), route: location.pathname, navigationType: performance.getEntriesByType("navigation")[0]?.type });
|
|
if (navigator.sendBeacon) navigator.sendBeacon(endpoint, new Blob([body], { type: "application/json" }));
|
|
else fetch(endpoint, { method: "POST", headers: { "content-type": "application/json" }, body: body, keepalive: true }).catch(function(error){ console.warn("[wrnexus:observability] web-vitals delivery failed", error); });
|
|
}
|
|
function flush() {
|
|
if (flushed) return;
|
|
flushed = true;
|
|
if (lcp) send("LCP", lcp);
|
|
if (inp) send("INP", inp);
|
|
if (cls) send("CLS", cls);
|
|
}
|
|
function observe(type, callback, options) {
|
|
try { new PerformanceObserver(callback).observe(options); }
|
|
catch(error) { console.warn("[wrnexus:observability] PerformanceObserver unavailable for " + type, error); }
|
|
}
|
|
observe("largest-contentful-paint", function(list){ var entries=list.getEntries(); var last=entries[entries.length-1]; if(last) lcp = Math.max(lcp, last.startTime); }, {type:"largest-contentful-paint",buffered:true});
|
|
observe("layout-shift", function(list){ list.getEntries().forEach(function(e){ if(!e.hadRecentInput) cls += e.value; }); }, {type:"layout-shift",buffered:true});
|
|
observe("event", function(list){ list.getEntries().forEach(function(e){ inp=Math.max(inp,e.duration||0); }); }, {type:"event",durationThreshold:40,buffered:true});
|
|
addEventListener("visibilitychange", function(){ if(document.visibilityState === "hidden") flush(); });
|
|
addEventListener("pagehide", flush, { once: true });
|
|
})();`;
|
|
}
|