@faststats/web 0.2.13 → 0.3.0

package/src/replay.ts

@@ -1,469 +0,0 @@
-import {
-	EventType,
-	type eventWithTime,
-	type listenerHandler,
-} from "@rrweb/types";
-import { record } from "rrweb";
-import type { recordOptions } from "rrweb/typings/types";
-import type { SlimDOMOptions } from "rrweb-snapshot";
-import { normalizeAnalyticsBaseUrl, URLS } from "./utils/api-urls";
-import {
-	getAnonymousId,
-	getOrCreateSessionId,
-	getSessionStart,
-} from "./utils/identifiers";
-import { sendData } from "./utils/send-data";
-import { normalizeSamplingPercentage } from "./utils/types";
-
-const RRWEB_SEQUENTIAL_ID_KEY = "_faststatsSeqId";
-const MAX_TIMEOUT_MS = 2_147_483_647;
-const DEFAULT_MAX_QUEUE_SIZE_BYTES = 2 * 1024 * 1024;
-
-export interface ReplayTrackerOptions {
-	siteKey: string;
-	baseUrl?: string;
-	debug?: boolean;
-	compress?: boolean;
-	samplingPercentage?: number;
-	flushInterval?: number;
-	maxEvents?: number;
-	maxPendingBatches?: number;
-	maxQueueSizeBytes?: number;
-	minReplayLengthMs?: number;
-	sampling?: recordOptions<eventWithTime>["sampling"];
-	slimDOMOptions?: SlimDOMOptions;
-	maskAllInputs?: boolean;
-	maskInputOptions?: recordOptions<eventWithTime>["maskInputOptions"];
-	blockClass?: string;
-	blockSelector?: string;
-	maskTextClass?: string;
-	maskTextSelector?: string;
-	checkoutEveryNms?: number;
-	checkoutEveryNth?: number;
-	recordConsole?: boolean;
-}
-
-type ReplayBatch = {
-	token: string;
-	sessionId: string | undefined;
-	identifier?: string;
-	batchId: string;
-	sequence: number;
-	timestamp: number;
-	url: string;
-	events: eventWithTime[];
-};
-
-const defaultSampling: recordOptions<eventWithTime>["sampling"] = {
-	mousemove: 50,
-	mouseInteraction: true,
-	scroll: 150,
-	media: 800,
-	input: "last",
-};
-
-const defaultSlimDOMOptions: SlimDOMOptions = {
-	script: true,
-	comment: true,
-	headFavicon: true,
-	headWhitespace: true,
-	headMetaDescKeywords: true,
-	headMetaSocial: true,
-	headMetaRobots: true,
-	headMetaHttpEquiv: true,
-	headMetaAuthorship: true,
-};
-
-export default class ReplayTracker {
-	private readonly endpoint: string;
-	private readonly compressionSupported =
-		typeof window !== "undefined" && "CompressionStream" in window;
-
-	private readonly sampled: boolean;
-	private readonly events: eventWithTime[] = [];
-	private readonly pending: ReplayBatch[] = [];
-	private pendingSizeBytes = 0;
-
-	private sessionId: string | undefined;
-	private started = false;
-	private startTime = 0;
-	private sequence = 0;
-	private intervalId: ReturnType<typeof setInterval> | null = null;
-	private flushTask: ReturnType<typeof setTimeout> | null = null;
-	private retryTask: ReturnType<typeof setTimeout> | null = null;
-	private minLengthFlushTask: ReturnType<typeof setTimeout> | null = null;
-	private stopRecording?: listenerHandler;
-	private sending = false;
-
-	constructor(private readonly options: ReplayTrackerOptions) {
-		this.endpoint = `${normalizeAnalyticsBaseUrl(options.baseUrl)}${URLS.replay}`;
-		this.sampled =
-			Math.random() * 100 <
-			normalizeSamplingPercentage(options.samplingPercentage);
-	}
-
-	private get debug(): boolean {
-		return this.options.debug ?? false;
-	}
-
-	private get flushInterval(): number {
-		return this.options.flushInterval ?? 10_000;
-	}
-
-	private get maxEvents(): number {
-		return this.options.maxEvents ?? 500;
-	}
-
-	private get maxPendingBatches(): number {
-		return this.options.maxPendingBatches ?? 30;
-	}
-
-	private get maxQueueSizeBytes(): number {
-		return this.options.maxQueueSizeBytes ?? DEFAULT_MAX_QUEUE_SIZE_BYTES;
-	}
-
-	private get minReplayLengthMs(): number {
-		return this.options.minReplayLengthMs ?? 3000;
-	}
-
-	private get shouldCompress(): boolean {
-		return this.options.compress ?? true;
-	}
-
-	private log(...args: unknown[]): void {
-		if (this.debug) console.log("[Replay]", ...args);
-	}
-
-	start(): void {
-		if (this.started || typeof window === "undefined" || !this.sampled) return;
-
-		this.started = true;
-		this.sessionId = getOrCreateSessionId();
-		this.startTime = getSessionStart();
-
-		void this.beginRecording();
-
-		this.intervalId = setInterval(this.requestFlush, this.flushInterval);
-
-		window.addEventListener("beforeunload", this.onUnload);
-		window.addEventListener("pagehide", this.onUnload);
-		document.addEventListener("visibilitychange", this.onVisibilityChange);
-
-		this.log("Recording started");
-	}
-
-	private async beginRecording(): Promise<void> {
-		const wantsConsole = this.options.recordConsole ?? true;
-
-		const [{ getRecordSequentialIdPlugin }, consolePluginModule] =
-			await Promise.all([
-				import("@rrweb/rrweb-plugin-sequential-id-record"),
-				wantsConsole
-					? import("@rrweb/rrweb-plugin-console-record")
-					: Promise.resolve(null),
-			]);
-
-		if (!this.started) return;
-
-		const plugins = [
-			getRecordSequentialIdPlugin({ key: RRWEB_SEQUENTIAL_ID_KEY }),
-		];
-		if (consolePluginModule) {
-			plugins.push(consolePluginModule.getRecordConsolePlugin());
-		}
-
-		this.stopRecording = record({
-			emit: this.onEvent,
-			sampling: this.options.sampling ?? defaultSampling,
-			slimDOMOptions: this.options.slimDOMOptions ?? defaultSlimDOMOptions,
-			maskAllInputs: this.options.maskAllInputs ?? true,
-			maskInputOptions: this.options.maskInputOptions ?? {
-				password: true,
-				email: true,
-				tel: true,
-			},
-			blockClass: this.options.blockClass,
-			blockSelector: this.options.blockSelector,
-			maskTextClass: this.options.maskTextClass,
-			maskTextSelector: this.options.maskTextSelector,
-			checkoutEveryNms: this.options.checkoutEveryNms ?? 60_000,
-			checkoutEveryNth: this.options.checkoutEveryNth,
-			plugins,
-		});
-	}
-
-	stop(): void {
-		if (!this.started) return;
-		this.started = false;
-
-		this.stopRecording?.();
-		this.stopRecording = undefined;
-
-		if (this.intervalId) clearInterval(this.intervalId);
-		if (this.flushTask) clearTimeout(this.flushTask);
-		if (this.retryTask) clearTimeout(this.retryTask);
-		if (this.minLengthFlushTask) clearTimeout(this.minLengthFlushTask);
-
-		this.intervalId = null;
-		this.flushTask = null;
-		this.retryTask = null;
-		this.minLengthFlushTask = null;
-
-		window.removeEventListener("beforeunload", this.onUnload);
-		window.removeEventListener("pagehide", this.onUnload);
-		document.removeEventListener("visibilitychange", this.onVisibilityChange);
-
-		if (!this.hasReachedMinLength()) {
-			this.events.length = 0;
-			this.sessionId = undefined;
-			this.log(
-				`Session too short (${Date.now() - this.startTime}ms), discarding events`,
-			);
-			return;
-		}
-
-		void this.flush(true);
-		this.sessionId = undefined;
-		this.log("Recording stopped");
-	}
-
-	getSessionId(): string | undefined {
-		return this.sessionId ?? getOrCreateSessionId();
-	}
-
-	private onEvent = (event: eventWithTime, isCheckout?: boolean): void => {
-		this.events.push(event);
-
-		if (
-			isCheckout ||
-			this.events.length >= this.maxEvents ||
-			(event.type === EventType.FullSnapshot && this.hasReachedMinLength())
-		) {
-			this.requestFlush();
-			return;
-		}
-
-		this.scheduleMinLengthFlush();
-	};
-
-	private onUnload = (): void => {
-		void this.flush(true);
-	};
-
-	private onVisibilityChange = (): void => {
-		if (document.visibilityState === "hidden") {
-			void this.flush(true);
-		}
-	};
-
-	private hasReachedMinLength(): boolean {
-		return (
-			this.minReplayLengthMs <= 0 ||
-			Date.now() - this.startTime >= this.minReplayLengthMs
-		);
-	}
-
-	private requestFlush = (): void => {
-		if (this.flushTask || this.sending || this.events.length === 0) return;
-
-		if (this.minLengthFlushTask) {
-			clearTimeout(this.minLengthFlushTask);
-			this.minLengthFlushTask = null;
-		}
-
-		this.flushTask = setTimeout(() => {
-			this.flushTask = null;
-			void this.flush(false);
-		}, 0);
-	};
-
-	private scheduleMinLengthFlush(): void {
-		if (
-			this.minLengthFlushTask ||
-			this.events.length === 0 ||
-			this.hasReachedMinLength()
-		) {
-			return;
-		}
-
-		const remainingMs = Math.max(
-			0,
-			this.minReplayLengthMs - (Date.now() - this.startTime),
-		);
-		const timeoutMs = Math.min(remainingMs, MAX_TIMEOUT_MS);
-
-		this.minLengthFlushTask = setTimeout(() => {
-			this.minLengthFlushTask = null;
-			this.requestFlush();
-		}, timeoutMs);
-	}
-
-	private createBatch(events: eventWithTime[]): ReplayBatch {
-		const identifier = getAnonymousId();
-		const sequence = this.sequence++;
-
-		return {
-			token: this.options.siteKey,
-			sessionId: this.getSessionId(),
-			...(identifier ? { identifier } : {}),
-			batchId: this.createBatchId(sequence),
-			sequence,
-			timestamp: Date.now(),
-			url: window.location.href,
-			events,
-		};
-	}
-
-	private createBatchId(sequence: number): string {
-		const random =
-			typeof crypto !== "undefined" && "randomUUID" in crypto
-				? crypto.randomUUID()
-				: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-		return `${this.getSessionId() ?? "unknown"}-${sequence}-${random}`;
-	}
-
-	private getBatchSizeBytes(batch: ReplayBatch): number {
-		return new TextEncoder().encode(JSON.stringify(batch)).byteLength;
-	}
-
-	private dropOldestPendingBatch(reason: string): void {
-		const dropped = this.pending.shift();
-		if (!dropped) return;
-
-		this.pendingSizeBytes = Math.max(
-			0,
-			this.pendingSizeBytes - this.getBatchSizeBytes(dropped),
-		);
-		this.log(`${reason}, dropping batch ${dropped.sequence}`);
-	}
-
-	private enqueueBatch(batch: ReplayBatch): void {
-		const batchSizeBytes = this.getBatchSizeBytes(batch);
-
-		if (batchSizeBytes > this.maxQueueSizeBytes) {
-			this.log(
-				`Replay batch ${batch.sequence} is ${batchSizeBytes}B, exceeding ${this.maxQueueSizeBytes}B queue limit; dropping`,
-			);
-			return;
-		}
-
-		while (
-			this.pending.length > 0 &&
-			this.pendingSizeBytes + batchSizeBytes > this.maxQueueSizeBytes
-		) {
-			this.dropOldestPendingBatch("Pending queue size limit reached");
-		}
-
-		while (this.pending.length >= this.maxPendingBatches) {
-			this.dropOldestPendingBatch("Pending batch limit reached");
-		}
-
-		this.pending.push(batch);
-		this.pendingSizeBytes += batchSizeBytes;
-	}
-
-	private async encodeBatch(
-		batch: ReplayBatch,
-	): Promise<{ data: string | Uint8Array; isCompressed: boolean }> {
-		const json = JSON.stringify(batch);
-
-		if (!this.shouldCompress || !this.compressionSupported) {
-			return {
-				data: json,
-				isCompressed: false,
-			};
-		}
-
-		try {
-			const compressed = await this.compress(json);
-			this.log(
-				`Compressed ${json.length}B -> ${compressed.byteLength}B (${Math.round((compressed.byteLength / json.length) * 100)}%)`,
-			);
-			return {
-				data: compressed,
-				isCompressed: true,
-			};
-		} catch {
-			this.log("Compression failed, using uncompressed");
-			return {
-				data: json,
-				isCompressed: false,
-			};
-		}
-	}
-
-	private async flush(lowLatency: boolean): Promise<void> {
-		if (this.sending) return;
-
-		if (this.events.length > 0) {
-			if (!this.hasReachedMinLength()) {
-				this.scheduleMinLengthFlush();
-			} else {
-				const batch = this.createBatch(this.events.splice(0));
-				this.enqueueBatch(batch);
-			}
-		}
-
-		if (this.pending.length === 0) return;
-		this.sending = true;
-
-		try {
-			while (this.pending.length > 0) {
-				const batch = this.pending[0];
-				if (!batch) break;
-
-				const encoded = await this.encodeBatch(batch);
-				const ok = await this.send(
-					encoded.data,
-					encoded.isCompressed,
-					lowLatency,
-				);
-
-				if (!ok) {
-					this.log(`Failed to send replay batch ${batch.sequence}, retrying`);
-					this.scheduleRetry();
-					break;
-				}
-				this.dropOldestPendingBatch("Sent replay batch");
-				lowLatency = false;
-			}
-		} finally {
-			this.sending = false;
-		}
-	}
-
-	private scheduleRetry(): void {
-		if (this.retryTask) return;
-		this.retryTask = setTimeout(() => {
-			this.retryTask = null;
-			void this.flush(false);
-		}, 1000);
-	}
-
-	private async compress(data: string): Promise<Uint8Array> {
-		const stream = new Blob([data])
-			.stream()
-			.pipeThrough(new CompressionStream("gzip"));
-		const buffer = await new Response(stream).arrayBuffer();
-		return new Uint8Array(buffer);
-	}
-
-	private send(
-		data: string | Uint8Array,
-		isCompressed: boolean,
-		lowLatency: boolean,
-	): Promise<boolean> {
-		return (
-			sendData({
-				url: isCompressed ? `${this.endpoint}?encoding=gzip` : this.endpoint,
-				data,
-				contentType: isCompressed
-					? "application/octet-stream"
-					: "application/json",
-				debug: false,
-				useBeacon: false,
-				keepalive: lowLatency,
-			}) ?? Promise.resolve(false)
-		);
-	}
-}

package/src/sdk.ts

@@ -1,8 +0,0 @@
-export const SDK_NAME =
-	typeof __FASTSTATS_SDK_NAME__ === "string"
-		? __FASTSTATS_SDK_NAME__
-		: "@faststats/web";
-export const SDK_VERSION =
-	typeof __FASTSTATS_SDK_VERSION__ === "string"
-		? __FASTSTATS_SDK_VERSION__
-		: "0.2.7";

package/src/utils/api-urls.ts

@@ -1,24 +0,0 @@
-const DEFAULT_BASE = "https://metrics.faststats.dev";
-const DEFAULT_FEATURE_FLAGS_BASE = "https://flags.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 const URLS = {
-	events: "/v1/web",
-	identify: "/v1/identify",
-	replay: "/v1/replay",
-	vitals: "/v1/vitals",
-	flags: "/v1/check",
-} as const;
-
-export function normalizeFeatureFlagsBaseUrl(input?: string): string {
-	if (input === undefined || input === "") return DEFAULT_FEATURE_FLAGS_BASE;
-	return stripTrailingSlashes(input) || DEFAULT_FEATURE_FLAGS_BASE;
-}

package/src/utils/identifiers.ts

@@ -1,89 +0,0 @@
-const SESSION_TIMEOUT = 30 * 60 * 1000;
-const ANONYMOUS_ID_KEY = "faststats_anon_id";
-const SESSION_ID_KEY = "session_id";
-const SESSION_TIMESTAMP_KEY = "session_timestamp";
-const SESSION_START_KEY = "session_start";
-
-let cookielessMode = false;
-
-export function setCookielessMode(mode: boolean): void {
-	cookielessMode = mode;
-}
-
-export function getAnonymousId(cookieless?: boolean): string {
-	const useCookieless = cookieless ?? cookielessMode;
-	if (useCookieless) return "";
-	return getOrCreateAnonymousId();
-}
-
-export function getOrCreateAnonymousId(): string {
-	if (!localStorage) return "";
-	const existingId = localStorage.getItem(ANONYMOUS_ID_KEY);
-	if (existingId) return existingId;
-
-	const newId = crypto.randomUUID();
-	localStorage.setItem(ANONYMOUS_ID_KEY, newId);
-	return newId;
-}
-
-export function resetAnonymousId(cookieless?: boolean): string {
-	if (cookieless) return "";
-
-	if (!localStorage) return "";
-
-	localStorage.removeItem(ANONYMOUS_ID_KEY);
-	return getOrCreateAnonymousId();
-}
-
-export function getOrCreateSessionId(): string {
-	if (!sessionStorage) return "";
-
-	const existingId = sessionStorage.getItem(SESSION_ID_KEY);
-	const sessionTimestamp = sessionStorage.getItem(SESSION_TIMESTAMP_KEY);
-
-	if (existingId && sessionTimestamp) {
-		const sessionAge = Date.now() - Number.parseInt(sessionTimestamp, 10);
-		if (sessionAge < SESSION_TIMEOUT) {
-			sessionStorage.setItem(SESSION_TIMESTAMP_KEY, Date.now().toString());
-			return existingId;
-		}
-		clearSession(sessionStorage);
-	}
-
-	const now = Date.now().toString();
-	const newId = crypto.randomUUID();
-	sessionStorage.setItem(SESSION_ID_KEY, newId);
-	sessionStorage.setItem(SESSION_TIMESTAMP_KEY, now);
-	sessionStorage.setItem(SESSION_START_KEY, now);
-	return newId;
-}
-
-export function resetSessionId(): string {
-	if (!sessionStorage) return "";
-
-	clearSession(sessionStorage);
-	return getOrCreateSessionId();
-}
-
-export function refreshSessionTimestamp(): void {
-	if (!sessionStorage) return;
-
-	if (sessionStorage.getItem(SESSION_ID_KEY)) {
-		sessionStorage.setItem(SESSION_TIMESTAMP_KEY, Date.now().toString());
-	}
-}
-
-export function getSessionStart(): number {
-	if (!sessionStorage) return Date.now();
-
-	const start = sessionStorage.getItem(SESSION_START_KEY);
-	if (start) return Number.parseInt(start, 10);
-	const ts = sessionStorage.getItem(SESSION_TIMESTAMP_KEY);
-	return ts ? Number.parseInt(ts, 10) : Date.now();
-}
-
-function clearSession(storage: Storage): void {
-	storage.removeItem(SESSION_ID_KEY);
-	storage.removeItem(SESSION_TIMESTAMP_KEY);
-	storage.removeItem(SESSION_START_KEY);
-}

package/src/utils/send-data.ts

@@ -1,52 +0,0 @@
-import type { SendDataOptions } from "./types";
-
-export async function sendData(options: SendDataOptions): Promise<boolean> {
-	const {
-		url,
-		data,
-		contentType = "application/json",
-		headers = {},
-		debug = false,
-		debugPrefix = "[Analytics]",
-		useBeacon = true,
-		keepalive = true,
-	} = options;
-
-	if (useBeacon && typeof globalThis.navigator?.sendBeacon === "function") {
-		try {
-			const beaconBody =
-				data instanceof Blob
-					? data
-					: typeof Blob !== "undefined"
-						? new Blob([data as BlobPart], { type: contentType })
-						: data;
-			if (globalThis.navigator.sendBeacon(url, beaconBody as BodyInit)) {
-				if (debug) console.log(`${debugPrefix} Sent via beacon`);
-				return true;
-			}
-		} catch {}
-	}
-
-	try {
-		const response = await fetch(url, {
-			method: "POST",
-			body: data as BodyInit,
-			headers: {
-				"Content-Type": contentType,
-				...headers,
-			},
-			keepalive,
-		});
-		const success = response.ok;
-		if (debug) {
-			const message = success
-				? `${debugPrefix} Sent via fetch`
-				: `${debugPrefix} Failed: ${response.status}`;
-			console[success ? "log" : "warn"](message);
-		}
-		return success;
-	} catch {
-		if (debug) console.warn(`${debugPrefix} Failed to send`);
-		return false;
-	}
-}

package/src/utils/types.ts

@@ -1,15 +0,0 @@
-export interface SendDataOptions {
-	url: string;
-	data: string | Blob | Uint8Array;
-	contentType?: string;
-	headers?: Record<string, string>;
-	debug?: boolean;
-	debugPrefix?: string;
-	useBeacon?: boolean;
-	keepalive?: boolean;
-}
-
-export function normalizeSamplingPercentage(value: number | undefined): number {
-	if (typeof value !== "number" || !Number.isFinite(value)) return 100;
-	return Math.max(0, Math.min(100, value));
-}