@faststats/web 0.8.2 → 0.9.0

package/README.md

@@ -19,7 +19,7 @@ init({
 	extensions: [
 		outboundLinks(),
 		errorTracking(),
-		webVitals({ attribution: true }),
+		webVitals(),
 		sessionReplay({ recordConsole: true }),
 	],
 });

package/dist/error.js

@@ -3,7 +3,7 @@ import { r as getSessionContext, t as sendData } from "./chunks/send-data-Dplz7m
 import { t as getAnonymousId } from "./chunks/identifiers-xX7o7oZz.js";
 //#region src/error.ts
 const SDK_NAME = "@faststats/web";
-const SDK_VERSION = "0.8.2";
+const SDK_VERSION = "0.9.0";
 function errorTracking(options = {}) {
 	return {
 		name: "error-tracking",

package/dist/replay.d.ts

@@ -1,7 +1,7 @@
 import { t as AnalyticsExtension } from "./chunks/extensions-DW7tJY0T.js";
 import { record } from "@rrweb/record";
 import { LogLevel } from "@rrweb/rrweb-plugin-console-record";
-//#region ../../node_modules/.bun/@rrweb+types@2.1.1/node_modules/@rrweb/types/dist/index.d.ts
+//#region ../../node_modules/.bun/@rrweb+types@2.1.4/node_modules/@rrweb/types/dist/index.d.ts
 declare global {
   interface Window {
     FontFace: typeof FontFace;

package/dist/web-vitals.d.ts

@@ -4,27 +4,29 @@ export interface WebVitalsOptions {
   siteKey: string;
   baseUrl?: string;
   debug?: boolean;
-  attribution?: boolean;
   trackHash?: boolean;
   cookieless?: boolean;
 }
-export type WebVitalsExtensionOptions = Pick<WebVitalsOptions, "attribution">;
-export declare function webVitals(options?: WebVitalsExtensionOptions): AnalyticsExtension;
+export declare function webVitals(): AnalyticsExtension;
 export default class WebVitalsTracker {
   private readonly options;
   private readonly endpoint;
   private metrics;
   private started;
-  private flushing;
+  private sending?;
+  private generation;
+  private unsubscribe?;
+  private readonly sentMetrics;
   private initialUrl;
   private session;
   private cookieless;
   constructor(options: WebVitalsOptions);
   setCookielessMode(cookieless: boolean): void;
-  start(): Promise<void>;
+  start(): void;
   stop(discard?: boolean): void;
   onPageHidden(persisted?: boolean): void;
   private onMetric;
+  private discard;
   private flush;
 }
 //#endregion

package/dist/web-vitals.js

@@ -1,12 +1,43 @@
 import { a as sanitizeUrl, i as resolveBaseUrl, n as URLS, t as ANALYTICS_BASE } from "./chunks/api-urls-DWk43fu6.js";
 import { r as getSessionContext, t as sendData } from "./chunks/send-data-Dplz7m4c.js";
+import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals/attribution";
+//#region src/utils/web-vitals-collector.ts
+const collectors = /* @__PURE__ */ new WeakMap();
+function subscribeToVitals(subscriber) {
+	let collector = collectors.get(document);
+	if (!collector) {
+		collector = {
+			subscribers: /* @__PURE__ */ new Set(),
+			latest: /* @__PURE__ */ new Map()
+		};
+		collectors.set(document, collector);
+		const { latest, subscribers } = collector;
+		const report = (metric) => {
+			const snapshot = { ...metric };
+			snapshot.attribution = { ...metric.attribution };
+			latest.set(metric.name, snapshot);
+			for (const listener of subscribers) listener(snapshot);
+		};
+		const changes = { reportAllChanges: true };
+		onCLS(report, changes);
+		onINP(report, changes);
+		onLCP(report, changes);
+		onFCP(report);
+		onTTFB(report);
+	}
+	collector.subscribers.add(subscriber);
+	for (const metric of collector.latest.values()) subscriber(metric);
+	return () => {
+		collector.subscribers.delete(subscriber);
+	};
+}
+//#endregion
 //#region src/web-vitals.ts
-function webVitals(options = {}) {
+function webVitals() {
 	return {
 		name: "web-vitals",
-		async setup(context) {
+		setup(context) {
 			const tracker = new WebVitalsTracker({
-				...options,
 				siteKey: context.siteKey,
 				baseUrl: context.baseUrl,
 				debug: context.debug,
@@ -15,7 +46,7 @@ function webVitals(options = {}) {
 			});
 			context.on("pageHide", ({ persisted }) => tracker.onPageHidden(persisted));
 			context.on("consentChange", ({ cookieless }) => tracker.setCookielessMode(cookieless));
-			await tracker.start();
+			tracker.start();
 			return ({ discard }) => tracker.stop(discard);
 		}
 	};
@@ -32,7 +63,10 @@ var WebVitalsTracker = class {
 	endpoint;
 	metrics = /* @__PURE__ */ new Map();
 	started = false;
-	flushing = false;
+	sending;
+	generation = 0;
+	unsubscribe;
+	sentMetrics = /* @__PURE__ */ new Map();
 	initialUrl = "";
 	session = null;
 	cookieless;
@@ -44,77 +78,83 @@ var WebVitalsTracker = class {
 	setCookielessMode(cookieless) {
 		if (this.cookieless === cookieless) return;
 		this.cookieless = cookieless;
-		this.metrics.clear();
+		this.discard();
 		this.session = this.started ? getSessionContext(this.options.siteKey, cookieless) : null;
 	}
-	async start() {
+	start() {
 		if (this.started || typeof window === "undefined") return;
 		this.started = true;
-		this.initialUrl = sanitizeUrl(window.location.href, this.options.trackHash ?? false);
+		this.initialUrl = sanitizeUrl(window.performance?.getEntriesByType("navigation")[0]?.name || window.location.href, this.options.trackHash ?? false);
 		this.session = getSessionContext(this.options.siteKey, this.cookieless);
-		const vitals = this.options.attribution ? await import("web-vitals/attribution") : await import("web-vitals");
-		if (!this.started) return;
-		const changes = { reportAllChanges: true };
-		vitals.onCLS(this.onMetric, changes);
-		vitals.onINP(this.onMetric, changes);
-		vitals.onLCP(this.onMetric, changes);
-		vitals.onFCP(this.onMetric);
-		vitals.onTTFB(this.onMetric);
+		this.unsubscribe = subscribeToVitals(this.onMetric);
 	}
 	stop(discard = false) {
 		if (!this.started) return;
 		this.started = false;
-		if (discard) this.metrics.clear();
+		this.unsubscribe?.();
+		this.unsubscribe = void 0;
+		if (discard) this.discard();
 		else this.flush();
 	}
 	onPageHidden(persisted = false) {
 		if (persisted) return;
-		queueMicrotask(() => void this.flush());
+		const generation = this.generation;
+		queueMicrotask(() => {
+			if (generation === this.generation) this.flush();
+		});
 	}
 	onMetric = (metric) => {
 		if (!this.started) return;
 		const name = metric.name;
 		if (!METRIC_NAMES.has(name) || !Number.isFinite(metric.value) || metric.value < 0) return;
-		const { id, rating, delta, navigationType } = metric;
-		const attribution = this.options.attribution && "attribution" in metric && metric.attribution ? metric.attribution : void 0;
-		this.metrics.set(name, {
-			metric: name,
-			value: metric.value,
-			attributes: {
-				id,
-				rating,
-				delta,
-				navigationType,
-				...attribution
-			}
-		});
+		this.metrics.set(name, metric);
 	};
+	discard() {
+		this.generation++;
+		this.metrics.clear();
+		this.sentMetrics.clear();
+	}
 	async flush() {
-		if (!this.metrics.size || this.flushing) return;
-		this.flushing = true;
+		const generation = this.generation;
+		while (this.sending) await this.sending;
+		if (generation !== this.generation || !this.metrics.size) return;
 		const batch = this.metrics;
-		this.metrics = /* @__PURE__ */ new Map();
 		const session = this.session ?? getSessionContext(this.options.siteKey, this.cookieless);
-		let sent = false;
-		try {
-			sent = await sendData({
-				url: this.endpoint,
-				data: JSON.stringify({
-					token: this.options.siteKey,
-					sessionId: session.sessionId,
-					windowId: session.windowId,
-					vitals: [...batch.values()],
-					metadata: { url: this.initialUrl }
-				}),
-				debug: this.options.debug,
-				debugPrefix: "[WebVitals]"
-			});
-		} finally {
-			if (!sent) {
-				for (const [name, vital] of batch) if (!this.metrics.has(name)) this.metrics.set(name, vital);
-			}
-			this.flushing = false;
-		}
+		const data = JSON.stringify({
+			token: this.options.siteKey,
+			sessionId: session.sessionId,
+			windowId: session.windowId,
+			vitals: [...batch.values()].map(({ name, value, id, rating, navigationType, attribution }) => {
+				const previous = this.sentMetrics.get(name);
+				return {
+					metric: name,
+					value,
+					attributes: {
+						...attribution,
+						id,
+						rating,
+						navigationType,
+						delta: value - (previous?.id === id ? previous.value : 0)
+					}
+				};
+			}),
+			metadata: { url: this.initialUrl }
+		});
+		this.metrics = /* @__PURE__ */ new Map();
+		this.sending = sendData({
+			url: this.endpoint,
+			data,
+			debug: this.options.debug,
+			debugPrefix: "[WebVitals]"
+		});
+		const sent = await this.sending;
+		this.sending = void 0;
+		if (generation !== this.generation) return;
+		for (const [name, vital] of batch) if (sent) this.sentMetrics.set(name, {
+			id: vital.id,
+			value: vital.value
+		});
+		else if (!this.metrics.has(name)) this.metrics.set(name, vital);
 	}
 };
 //#endregion

package/package.json

@@ -42,7 +42,7 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "0.8.2",
+	"version": "0.9.0",
 	"scripts": {
 		"build": "tsdown && bun run check-size",
 		"dev": "bun run build",
@@ -51,14 +51,14 @@
 		"check-size": "node scripts/check-bundle-size.mjs"
 	},
 	"devDependencies": {
-		"@rrweb/types": "^2.1.1",
-		"@types/bun": "^1.4.0",
+		"@rrweb/types": "^2.1.4",
+		"@types/bun": "^1.4.2",
 		"tsdown": "^0.23.0",
-		"typescript": "^6.0.3"
+		"typescript": "^7.0.2"
 	},
 	"dependencies": {
-		"@rrweb/record": "^2.1.1",
-		"@rrweb/rrweb-plugin-console-record": "^2.1.1",
+		"@rrweb/record": "^2.1.4",
+		"@rrweb/rrweb-plugin-console-record": "^2.1.4",
 		"web-vitals": "^6.2.1"
 	}
 }