@faststats/web 0.2.14 → 0.3.1

package/src/replay.ts

@@ -1,596 +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 } from "./utils/identifiers";
-import { sendData } from "./utils/send-data";
-import {
-	createId,
-	getSessionContext,
-	getSessionStart,
-	onSessionRotated,
-	type SessionContext,
-	touchActivity,
-} from "./utils/session-manager";
-import { normalizeSamplingPercentage } from "./utils/types";
-
-const MAX_TIMEOUT_MS = 2_147_483_647;
-const DEFAULT_MAX_QUEUE_SIZE_BYTES = 2 * 1024 * 1024;
-const VIEW_META_EVENT_TYPE = 5;
-
-export interface ReplayTrackerOptions {
-	siteKey: string;
-	baseUrl?: string;
-	debug?: boolean;
-	compress?: boolean;
-	cookieless?: 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;
-	windowId: string;
-	viewId: string;
-	sessionStart: number;
-	identifier?: string;
-	batchId: string;
-	sequence: number;
-	timestamp: number;
-	url: string;
-	isFinal?: boolean;
-	events: eventWithTime[];
-};
-
-const defaultSampling: recordOptions<eventWithTime>["sampling"] = {
-	mousemove: 50,
-	mouseInteraction: true,
-	scroll: 150,
-	media: 800,
-	input: "last",
-};
-
-function replaySampledKey(siteKey: string): string {
-	return `faststats_replay_sampled_${siteKey}`;
-}
-
-function hashSessionId(sessionId: string): number {
-	let hash = 0;
-	for (let i = 0; i < sessionId.length; i++) {
-		hash = (hash << 5) - hash + sessionId.charCodeAt(i);
-		hash |= 0;
-	}
-	return Math.abs(hash);
-}
-
-function resolveReplaySampled(
-	siteKey: string,
-	samplingPercentage: number,
-	cookieless: boolean,
-): boolean {
-	const pct = normalizeSamplingPercentage(samplingPercentage);
-	if (pct >= 100) return true;
-	if (pct <= 0) return false;
-
-	const sessionId = getSessionContext(siteKey, cookieless).sessionId;
-	const storageKey = replaySampledKey(siteKey);
-	const storedKey = `${sessionId}:${pct}`;
-
-	try {
-		const session = sessionStorage;
-		if (session) {
-			const stored = session.getItem(storageKey);
-			if (stored === storedKey) return true;
-			if (stored?.startsWith(`${sessionId}:`)) return false;
-		}
-	} catch {}
-
-	const bucket = hashSessionId(sessionId) % 100;
-	const sampled = bucket < pct;
-
-	try {
-		sessionStorage?.setItem(
-			storageKey,
-			sampled ? storedKey : `${sessionId}:out`,
-		);
-	} catch {}
-
-	return sampled;
-}
-
-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 viewId = createId();
-	private readonly windowId = createId();
-	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;
-	private unsubscribeRotation?: () => void;
-
-	constructor(private readonly options: ReplayTrackerOptions) {
-		this.endpoint = `${normalizeAnalyticsBaseUrl(options.baseUrl)}${URLS.replay}`;
-		this.sampled = resolveReplaySampled(
-			options.siteKey,
-			options.samplingPercentage ?? 100,
-			options.cookieless ?? false,
-		);
-	}
-
-	private get cookieless(): boolean {
-		return this.options.cookieless ?? false;
-	}
-
-	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);
-	}
-
-	private sessionContext(): SessionContext {
-		return getSessionContext(this.options.siteKey, this.cookieless);
-	}
-
-	start(): void {
-		if (this.started || typeof window === "undefined" || !this.sampled) return;
-
-		this.started = true;
-		this.viewId = createId();
-		this.startTime = getSessionStart(this.cookieless);
-
-		this.unsubscribeRotation = onSessionRotated((prev) => {
-			this.onSessionRotated(prev);
-		});
-
-		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");
-	}
-
-	trackPageChange(url?: string): void {
-		if (!this.started) return;
-		const href = url ?? window.location.href;
-		this.viewId = createId();
-		const metaEvent = {
-			type: VIEW_META_EVENT_TYPE,
-			timestamp: Date.now(),
-			data: {
-				tag: "faststats:view",
-				payload: { href, viewId: this.viewId },
-			},
-		} as eventWithTime;
-		this.onEvent(metaEvent, false);
-	}
-
-	private async beginRecording(): Promise<void> {
-		const wantsConsole = this.options.recordConsole ?? true;
-
-		const consolePluginModule = wantsConsole
-			? await import("@rrweb/rrweb-plugin-console-record")
-			: null;
-
-		if (!this.started) return;
-
-		const plugins = [];
-		if (consolePluginModule) {
-			plugins.push(consolePluginModule.getRecordConsolePlugin());
-		}
-
-		this.stopRecording = record({
-			emit: this.onEvent,
-			sampling: this.options.sampling ?? defaultSampling,
-			slimDOMOptions: this.options.slimDOMOptions ?? {
-				script: true,
-				comment: true,
-				headFavicon: true,
-				headWhitespace: true,
-				headMetaDescKeywords: true,
-				headMetaSocial: true,
-				headMetaRobots: true,
-				headMetaHttpEquiv: true,
-				headMetaAuthorship: true,
-			},
-			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.unsubscribeRotation?.();
-		this.unsubscribeRotation = undefined;
-
-		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.log(
-				`Session too short (${Date.now() - this.startTime}ms), discarding events`,
-			);
-			return;
-		}
-
-		void this.flush(true, undefined, true);
-		this.log("Recording stopped");
-	}
-
-	getSessionId(): string {
-		return this.sessionContext().sessionId;
-	}
-
-	getWindowId(): string {
-		return this.sessionContext().windowId;
-	}
-
-	private onSessionRotated(prev: SessionContext): void {
-		if (!this.started) return;
-		if (this.events.length > 0) {
-			if (!this.hasReachedMinLength()) {
-				this.scheduleMinLengthFlush();
-			} else {
-				const batch = this.createBatch(this.events.splice(0), prev, true);
-				this.enqueueBatch(batch);
-			}
-		}
-		if (this.pending.length > 0) {
-			queueMicrotask(() => void this.flush(false));
-		}
-	}
-
-	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, undefined, true);
-	};
-
-	private onVisibilityChange = (): void => {
-		if (document.visibilityState === "hidden") {
-			void this.flush(true, undefined, 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[],
-		context: SessionContext,
-		isFinal?: boolean,
-	): ReplayBatch {
-		const identifier = getAnonymousId(this.cookieless);
-		const sequence = this.sequence++;
-
-		return {
-			token: this.options.siteKey,
-			sessionId: context.sessionId,
-			windowId: this.windowId,
-			viewId: this.viewId,
-			sessionStart: context.sessionStart,
-			...(identifier ? { identifier } : {}),
-			batchId: this.createBatchId(context.sessionId, sequence),
-			sequence,
-			timestamp: Date.now(),
-			url: window.location.href,
-			...(isFinal ? { isFinal: true } : {}),
-			events,
-		};
-	}
-
-	private createBatchId(sessionId: string, sequence: number): string {
-		const random =
-			typeof crypto !== "undefined" && "randomUUID" in crypto
-				? crypto.randomUUID()
-				: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-		return `${sessionId}-${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,
-		contextOverride?: SessionContext,
-		isFinal?: boolean,
-	): Promise<void> {
-		if (this.sending) return;
-
-		const rotation = contextOverride ? null : touchActivity(this.cookieless);
-		if (rotation && this.events.length > 0) {
-			if (!this.hasReachedMinLength()) {
-				this.scheduleMinLengthFlush();
-			} else {
-				const batch = this.createBatch(
-					this.events.splice(0),
-					rotation.prev,
-					true,
-				);
-				this.enqueueBatch(batch);
-			}
-		}
-		const context = contextOverride ?? this.sessionContext();
-
-		if (this.events.length > 0) {
-			if (!this.hasReachedMinLength()) {
-				this.scheduleMinLengthFlush();
-			} else {
-				const batch = this.createBatch(this.events.splice(0), context, isFinal);
-				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: lowLatency,
-				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,47 +0,0 @@
-import { createId, isCookielessMode } from "./session-manager";
-
-const ANONYMOUS_ID_KEY = "faststats_anon_id";
-
-function getLocalStorage(): Storage | undefined {
-	try {
-		return globalThis.localStorage;
-	} catch {
-		return undefined;
-	}
-}
-
-export function getAnonymousId(cookieless?: boolean): string {
-	if (cookieless ?? isCookielessMode()) return "";
-	return getOrCreateAnonymousId();
-}
-
-export function getOrCreateAnonymousId(): string {
-	const storage = getLocalStorage();
-	if (!storage) return "";
-	try {
-		const existingId = storage.getItem(ANONYMOUS_ID_KEY);
-		if (existingId) return existingId;
-	} catch {
-		return "";
-	}
-
-	const newId = createId();
-	try {
-		storage.setItem(ANONYMOUS_ID_KEY, newId);
-	} catch {
-		return "";
-	}
-	return newId;
-}
-
-export function resetAnonymousId(cookieless?: boolean): string {
-	if (cookieless) return "";
-	try {
-		const storage = getLocalStorage();
-		if (!storage) return "";
-		storage.removeItem(ANONYMOUS_ID_KEY);
-	} catch {
-		return "";
-	}
-	return getOrCreateAnonymousId();
-}