@faststats/web 0.1.3 → 0.1.4

package/src/error.ts

@@ -1,10 +1,12 @@
 import { sendData } from "./analytics";
+import { webEventsUrl } from "./utils/api-urls";
 import { getAnonymousId, getOrCreateSessionId } from "./utils/identifiers";
 
 export type ErrorEntry = {
 	error: string;
 	message?: string;
 	stack?: string[];
+	handled?: boolean;
 	cause?: ErrorEntry;
 };
 
@@ -13,23 +15,77 @@ export type ErrorTracking = {
 	count: number;
 } & ErrorEntry;
 
-export type ErrorData = {
+type ErrorData = {
 	message: string;
 	filename?: string;
 	lineno?: number;
 	colno?: number;
 	stack?: string;
 	type: "error" | "unhandledrejection";
+	handled: boolean;
+	cause?: ErrorEntry;
 };
 
 export interface ErrorTrackingOptions {
 	siteKey: string;
-	endpoint?: string;
+	baseUrl?: string;
 	debug?: boolean;
 	flushInterval?: number;
 	maxQueueSize?: number;
 }
 
+const EXTENSION_URL =
+	/(?:^|\()(chrome|moz|ms-browser|safari-web)-extension:\/\//;
+
+function parseStack(stack?: string): string[] | undefined {
+	if (!stack) return undefined;
+	return stack
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0);
+}
+
+function serializeCause(cause: unknown): ErrorEntry | undefined {
+	if (cause instanceof Error) {
+		const name = cause.name?.trim() || "Error";
+		return {
+			error: name,
+			message: cause.message,
+			stack: parseStack(cause.stack),
+			cause: serializeCause(cause.cause),
+		};
+	}
+	if (typeof cause === "string") {
+		return { error: "Error", message: cause };
+	}
+	return undefined;
+}
+
+function causeFingerprint(cause: ErrorEntry | undefined): string {
+	if (!cause) return "";
+	return `${cause.error}\0${cause.message ?? ""}\0${causeFingerprint(cause.cause)}`;
+}
+
+function hashErrorData(data: ErrorData): string {
+	const key = [
+		data.type,
+		data.handled ? "handled" : "unhandled",
+		data.message,
+		data.filename ?? "",
+		data.lineno ?? "",
+		causeFingerprint(data.cause),
+	].join("\0");
+
+	let a = 2166136261;
+	let b = 3598710387;
+	for (let i = 0; i < key.length; i++) {
+		const c = key.charCodeAt(i);
+		a = Math.imul(a ^ c, 16777619);
+		b = Math.imul(b ^ c, 2246822519);
+	}
+	return `err_${(a >>> 0).toString(16).padStart(8, "0")}${(b >>> 0).toString(16).padStart(8, "0")}`;
+}
+
 class ErrorTracker {
 	private readonly endpoint: string;
 	private readonly siteKey: string;
@@ -40,14 +96,14 @@ class ErrorTracker {
 	private readonly handledErrors = new WeakSet<Error>();
 	private readonly errorCounts = new Map<
 		string,
-		{ entry: ErrorEntry; hash: string; count: number }
+		{ entry: ErrorEntry; count: number }
 	>();
 	private flushTimer: ReturnType<typeof setInterval> | null = null;
 	private started = false;
 
 	constructor(options: ErrorTrackingOptions) {
 		this.siteKey = options.siteKey;
-		this.endpoint = options.endpoint ?? "https://metrics.faststats.dev/v1/web";
+		this.endpoint = webEventsUrl(options.baseUrl);
 		this.debug = options.debug ?? false;
 		this.flushInterval = options.flushInterval ?? 5000;
 		this.maxQueueSize = options.maxQueueSize ?? 50;
@@ -90,131 +146,91 @@ class ErrorTracker {
 		}
 	}
 
+	private skipDuplicate(err: unknown): boolean {
+		if (!(err instanceof Error)) return false;
+		if (this.handledErrors.has(err)) return true;
+		this.handledErrors.add(err);
+		return false;
+	}
+
 	private handleErrorEvent = (event: ErrorEvent): void => {
-		const error = event.error;
-
-		if (error instanceof Error) {
-			if (this.handledErrors.has(error)) {
-				if (this.debug) {
-					console.log(
-						"[ErrorTracker] Skipping duplicate error:",
-						error.message,
-					);
-				}
-				return;
+		const err = event.error;
+		if (this.skipDuplicate(err)) {
+			if (this.debug) {
+				console.log("[ErrorTracker] Skipping duplicate error:", err.message);
 			}
-			this.handledErrors.add(error);
+			return;
 		}
 
 		this.queueError({
-			message: event.message || (error?.message ?? "Unknown error"),
+			message:
+				event.message || (err instanceof Error ? err.message : "Unknown error"),
 			filename: event.filename || undefined,
 			lineno: event.lineno || undefined,
 			colno: event.colno || undefined,
-			stack: error?.stack || undefined,
+			stack: err instanceof Error ? err.stack : undefined,
 			type: "error",
+			handled: false,
+			cause: err instanceof Error ? serializeCause(err.cause) : undefined,
 		});
 	};
 
 	private handleRejection = (event: PromiseRejectionEvent): void => {
 		const reason = event.reason;
-
-		if (reason instanceof Error) {
-			if (this.handledErrors.has(reason)) {
-				if (this.debug) {
-					console.log(
-						"[ErrorTracker] Skipping duplicate rejection:",
-						reason.message,
-					);
-				}
-				return;
+		if (this.skipDuplicate(reason)) {
+			if (this.debug) {
+				console.log(
+					"[ErrorTracker] Skipping duplicate rejection:",
+					reason instanceof Error ? reason.message : reason,
+				);
 			}
-			this.handledErrors.add(reason);
+			return;
 		}
 
+		const message =
+			reason instanceof Error
+				? reason.message
+				: typeof reason === "string"
+					? reason
+					: "Unhandled promise rejection";
+
 		this.queueError({
-			message:
-				reason instanceof Error
-					? reason.message
-					: typeof reason === "string"
-						? reason
-						: "Unhandled promise rejection",
+			message,
 			stack: reason instanceof Error ? reason.stack : undefined,
 			type: "unhandledrejection",
+			handled: false,
+			cause: reason instanceof Error ? serializeCause(reason.cause) : undefined,
 		});
 	};
 
-	private isExtensionError(errorData: ErrorData): boolean {
-		if (errorData.filename?.startsWith("chrome-extension://")) {
-			return true;
-		}
-		if (errorData.stack) {
-			const firstFrame = errorData.stack
-				.split("\n")
-				.find((line) => line.trim().startsWith("at "));
-			if (firstFrame?.includes("chrome-extension://")) {
-				return true;
-			}
+	private queueError(data: ErrorData): void {
+		if (EXTENSION_URL.test(`${data.filename ?? ""}\n${data.stack ?? ""}`)) {
+			return;
 		}
-		return false;
-	}
-
-	private parseStack(stack?: string): string[] | undefined {
-		if (!stack) return undefined;
-		return stack
-			.split("\n")
-			.map((line) => line.trim())
-			.filter((line) => line.length > 0);
-	}
-
-	private async generateErrorHash(errorData: ErrorData): Promise<string> {
-		const key = [
-			errorData.type,
-			errorData.message,
-			errorData.filename ?? "",
-			errorData.lineno ?? "",
-		].join(":");
-
-		const encoder = new TextEncoder();
-		const data = encoder.encode(key);
-
-		const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-		const hashArray = Array.from(new Uint8Array(hashBuffer));
-		const hashHex = hashArray
-			.map((b) => b.toString(16).padStart(2, "0"))
-			.join("");
-
-		return `err_${hashHex}`;
-	}
-
-	private async queueError(errorData: ErrorData): Promise<void> {
-		if (this.isExtensionError(errorData)) return;
 
 		if (this.debug) {
-			console.log("[ErrorTracker] Captured error:", errorData);
+			console.log("[ErrorTracker] Captured error:", data);
 		}
 
-		const hash = await this.generateErrorHash(errorData);
-		const existing = this.errorCounts.get(hash);
-
-		if (existing) {
-			existing.count++;
+		const hash = hashErrorData(data);
+		const bucket = this.errorCounts.get(hash);
+		if (bucket) {
+			bucket.count++;
 			if (this.debug) {
 				console.log(
-					`[ErrorTracker] Incremented count for ${hash} to ${existing.count}`,
+					`[ErrorTracker] Incremented count for ${hash} to ${bucket.count}`,
 				);
 			}
 		} else {
 			const entry: ErrorEntry = {
 				error:
-					errorData.type === "unhandledrejection"
-						? "UnhandledRejection"
-						: "Error",
-				message: errorData.message,
-				stack: this.parseStack(errorData.stack),
+					data.type === "unhandledrejection" ? "UnhandledRejection" : "Error",
+				message: data.message,
+				stack: parseStack(data.stack),
+				handled: data.handled,
+				...(data.cause ? { cause: data.cause } : {}),
 			};
-			this.errorCounts.set(hash, { entry, hash, count: 1 });
-
+			this.errorCounts.set(hash, { entry, count: 1 });
 			if (this.debug) {
 				console.log(`[ErrorTracker] Queued new error: ${hash}`);
 			}
@@ -226,21 +242,19 @@ class ErrorTracker {
 	}
 
 	captureError(error: Error): void {
-		if (this.handledErrors.has(error)) {
+		if (this.skipDuplicate(error)) {
 			if (this.debug) {
-				console.log(
-					"[ErrorTracker] Skipping duplicate manual capture:",
-					error.message,
-				);
+				console.log("[ErrorTracker] Skipping duplicate:", error.message);
 			}
 			return;
 		}
-		this.handledErrors.add(error);
 
 		this.queueError({
 			message: error.message,
 			stack: error.stack,
 			type: "error",
+			handled: true,
+			cause: serializeCause(error.cause),
 		});
 	}
 
@@ -248,7 +262,7 @@ class ErrorTracker {
 		if (this.errorCounts.size === 0) return;
 
 		const errors: ErrorTracking[] = [];
-		for (const { entry, hash, count } of this.errorCounts.values()) {
+		for (const [hash, { entry, count }] of this.errorCounts) {
 			errors.push({ ...entry, hash, count });
 		}
 		this.errorCounts.clear();
@@ -258,14 +272,6 @@ class ErrorTracker {
 		}
 
 		const identifier = getAnonymousId();
-		const commonData =
-			typeof document !== "undefined"
-				? {
-						url: location.href,
-						page: location.pathname,
-						referrer: document.referrer || null,
-					}
-				: { url: "", page: "", referrer: null };
 		const sourcemapsBuild = (
 			globalThis as {
 				__SOURCEMAPS_BUILD__?: { buildId?: unknown };
@@ -277,21 +283,19 @@ class ErrorTracker {
 				? sourcemapsBuild.buildId
 				: undefined;
 
-		const payload: Record<string, unknown> = {
+		const payloadString = JSON.stringify({
 			token: this.siteKey,
 			...(identifier ? { userId: identifier } : {}),
 			sessionId: getOrCreateSessionId(),
 			...(buildId ? { buildId } : {}),
 			data: {
-				url: commonData.url as string,
-				page: commonData.page as string,
-				referrer: commonData.referrer as string,
-				title: typeof document !== "undefined" ? document.title : "",
+				url: location.href,
+				page: location.pathname,
+				referrer: document.referrer || null,
+				title: document.title,
 			},
 			errors,
-		};
-
-		const payloadString = JSON.stringify(payload);
+		});
 
 		if (this.debug) {
 			console.log("[ErrorTracker] Payload:", payloadString);

package/src/module.ts

@@ -7,6 +7,7 @@ export {
 	logout,
 	optIn,
 	optOut,
+	reportError,
 	sendData,
 	setConsentMode,
 	trackEvent,

package/src/replay.ts

@@ -1,15 +1,19 @@
 import { getRecordConsolePlugin } from "@rrweb/rrweb-plugin-console-record";
+import { getRecordSequentialIdPlugin } from "@rrweb/rrweb-plugin-sequential-id-record";
 import type { eventWithTime, listenerHandler } from "@rrweb/types";
 import { record } from "rrweb";
 import type { recordOptions } from "rrweb/typings/types";
 import type { SlimDOMOptions } from "rrweb-snapshot";
 import { sendData } from "./analytics";
+import { replayEventsUrl } from "./utils/api-urls";
 import { getAnonymousId, getOrCreateSessionId } from "./utils/identifiers";
 import { normalizeSamplingPercentage } from "./utils/types";
 
+const RRWEB_SEQUENTIAL_ID_KEY = "_faststatsSeqId";
+
 export interface ReplayTrackerOptions {
 	siteKey: string;
-	endpoint?: string;
+	baseUrl?: string;
 	debug?: boolean;
 	samplingPercentage?: number;
 	flushInterval?: number;
@@ -75,9 +79,7 @@ class ReplayTracker {
 
 	constructor(options: ReplayTrackerOptions) {
 		this.siteKey = options.siteKey;
-		this.endpoint =
-			options.endpoint?.replace(/\/v1\/web$/, "/v1/replay") ??
-			"https://metrics.faststats.dev/v1/replay";
+		this.endpoint = replayEventsUrl(options.baseUrl);
 		this.debug = options.debug ?? false;
 		this.samplingPercentage = normalizeSamplingPercentage(
 			options.samplingPercentage,
@@ -165,9 +167,12 @@ class ReplayTracker {
 		if (this.checkoutEveryNth) {
 			recordOptions.checkoutEveryNth = this.checkoutEveryNth;
 		}
-		if (this.recordConsole) {
-			recordOptions.plugins = [getRecordConsolePlugin()];
-		}
+		recordOptions.plugins = [
+			getRecordSequentialIdPlugin({
+				key: RRWEB_SEQUENTIAL_ID_KEY,
+			}),
+			...(this.recordConsole ? [getRecordConsolePlugin()] : []),
+		];
 
 		this.stopRecording = record(recordOptions);
 

package/src/utils/api-urls.ts

@@ -0,0 +1,26 @@
+const DEFAULT_BASE = "https://metrics.faststats.dev";
+
+function stripTrailingSlashes(s: string): string {
+	return s.replace(/\/+$/, "");
+}
+
+export function normalizeAnalyticsBaseUrl(input?: string): string {
+	if (input === undefined || input === "") return DEFAULT_BASE;
+	return stripTrailingSlashes(input) || DEFAULT_BASE;
+}
+
+export function webEventsUrl(baseUrl?: string): string {
+	return `${normalizeAnalyticsBaseUrl(baseUrl)}/v1/web`;
+}
+
+export function identifyEventsUrl(baseUrl?: string): string {
+	return `${normalizeAnalyticsBaseUrl(baseUrl)}/v1/identify`;
+}
+
+export function replayEventsUrl(baseUrl?: string): string {
+	return `${normalizeAnalyticsBaseUrl(baseUrl)}/v1/replay`;
+}
+
+export function webVitalsEventsUrl(baseUrl?: string): string {
+	return `${normalizeAnalyticsBaseUrl(baseUrl)}/v1/vitals`;
+}

package/src/web-vitals.ts

@@ -6,12 +6,13 @@ import {
 	onLCP,
 	onTTFB,
 } from "web-vitals/attribution";
+import { webVitalsEventsUrl } from "./utils/api-urls";
 import { getOrCreateSessionId } from "./utils/identifiers";
 import { normalizeSamplingPercentage } from "./utils/types";
 
 export interface WebVitalsOptions {
 	siteKey: string;
-	endpoint?: string;
+	baseUrl?: string;
 	debug?: boolean;
 	samplingPercentage?: number;
 }
@@ -34,12 +35,18 @@ class WebVitalsTracker {
 	private readonly sessionSamplingSeed: number;
 	private readonly metricsMap = new Map<MetricName, MetricState>();
 	private flushed = false;
+	private readonly handleVisibilityChange = (): void => {
+		if (document.visibilityState === "hidden") {
+			this.finalizeAndFlush();
+		}
+	};
+	private readonly handlePageHide = (): void => {
+		this.finalizeAndFlush();
+	};
 
 	constructor(options: WebVitalsOptions) {
 		this.siteKey = options.siteKey;
-		this.endpoint = this.getVitalsEndpoint(
-			options.endpoint ?? "https://metrics.faststats.dev/v1/web",
-		);
+		this.endpoint = webVitalsEventsUrl(options.baseUrl);
 		this.debug = options.debug ?? false;
 		this.samplingPercentage = normalizeSamplingPercentage(
 			options.samplingPercentage,
@@ -47,27 +54,14 @@ class WebVitalsTracker {
 		this.sessionSamplingSeed = Math.random() * 100;
 	}
 
-	private getVitalsEndpoint(baseEndpoint: string): string {
-		const url = new URL(baseEndpoint);
-		const pathParts = url.pathname.split("/");
-		pathParts[pathParts.length - 1] = "vitals";
-		url.pathname = pathParts.join("/");
-		return url.toString();
-	}
-
 	start(): void {
 		if (this.started || typeof window === "undefined") return;
 
 		this.started = true;
+		this.flushed = false;
 
-		document.addEventListener("visibilitychange", () => {
-			if (document.visibilityState === "hidden") {
-				this.finalizeAndFlush();
-			}
-		});
-		window.addEventListener("pagehide", () => {
-			this.finalizeAndFlush();
-		});
+		document.addEventListener("visibilitychange", this.handleVisibilityChange);
+		window.addEventListener("pagehide", this.handlePageHide);
 
 		if (this.debug) {
 			console.log("[WebVitals] Tracking started");
@@ -80,6 +74,17 @@ class WebVitalsTracker {
 		onTTFB((metric) => this.captureMetric(metric));
 	}
 
+	stop(): void {
+		if (!this.started || typeof window === "undefined") return;
+		this.started = false;
+		document.removeEventListener(
+			"visibilitychange",
+			this.handleVisibilityChange,
+		);
+		window.removeEventListener("pagehide", this.handlePageHide);
+		this.finalizeAndFlush();
+	}
+
 	private captureMetric(metric: MetricWithAttribution): void {
 		if (this.flushed) return;