fix some tracker issues, more tests

Author: izadoesdev

packages/tracker/src/core/tracker.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from "./client";
-import type { EventContext, TrackerOptions } from "./types";
+import type { BaseEvent, EventContext, TrackerOptions } from "./types";
 import { generateUUIDv4, logger } from "./utils";
 
 const HEADLESS_CHROME_REGEX = /\bHeadlessChrome\b/i;
@@ -29,8 +29,9 @@ export class BaseTracker {
 	hasInteracted = false;
 
 	// Queues
-	batchQueue: any[] = [];
+	batchQueue: BaseEvent[] = [];
 	batchTimer: Timer | null = null;
+	private isFlushing = false;
 
 	constructor(options: TrackerOptions) {
 		this.options = {
@@ -320,7 +321,7 @@ export class BaseTracker {
 		};
 	}
 
-	send(event: any): Promise<any> {
+	send(event: BaseEvent & { isForceSend?: boolean }): Promise<unknown> {
 		if (this.shouldSkipTracking()) {
 			return Promise.resolve();
 		}
@@ -329,6 +330,12 @@ export class BaseTracker {
 			return Promise.resolve();
 		}
 
+		const samplingRate = this.options.samplingRate ?? 1.0;
+		if (samplingRate < 1.0 && Math.random() > samplingRate) {
+			logger.log("Event sampled out", event);
+			return Promise.resolve();
+		}
+
 		if (this.options.enableBatching && !event.isForceSend) {
 			logger.log("Queueing event for batch", event);
 			return this.addToBatch(event);
@@ -338,7 +345,7 @@ export class BaseTracker {
 		return this.api.fetch("/", event, { keepalive: true });
 	}
 
-	addToBatch(event: any): Promise<void> {
+	addToBatch(event: BaseEvent): Promise<void> {
 		this.batchQueue.push(event);
 		if (this.batchTimer === null) {
 			this.batchTimer = setTimeout(
@@ -357,10 +364,11 @@ export class BaseTracker {
 			clearTimeout(this.batchTimer);
 			this.batchTimer = null;
 		}
-		if (this.batchQueue.length === 0) {
+		if (this.batchQueue.length === 0 || this.isFlushing) {
 			return;
 		}
 
+		this.isFlushing = true;
 		const batchEvents = [...this.batchQueue];
 		this.batchQueue = [];
 
@@ -378,6 +386,30 @@ export class BaseTracker {
 				this.send({ ...evt, isForceSend: true });
 			}
 			return null;
+		} finally {
+			this.isFlushing = false;
+		}
+	}
+
+	sendBeacon(data: unknown, endpoint = "/vitals"): boolean {
+		if (this.isServer()) {
+			return false;
 		}
+		if (typeof navigator === "undefined" || !navigator.sendBeacon) {
+			return false;
+		}
+		try {
+			const blob = new Blob([JSON.stringify(data)], {
+				type: "application/json",
+			});
+			const baseUrl = this.options.apiUrl || "https://basket.databuddy.cc";
+			return navigator.sendBeacon(`${baseUrl}${endpoint}`, blob);
+		} catch {
+			return false;
+		}
+	}
+
+	sendBatchBeacon(events: unknown[]): boolean {
+		return this.sendBeacon(events, "/batch");
 	}
 }

packages/tracker/src/core/types.ts

@@ -67,13 +67,12 @@ export type TrackEvent = BaseEvent & {
 };
 
 export type DatabuddyGlobal = {
-	track: (name: string, props?: any) => void;
-	screenView: (props?: any) => void;
-	identify: () => void;
+	track: (name: string, props?: Record<string, unknown>) => void;
+	screenView: (props?: Record<string, unknown>) => void;
 	clear: () => void;
 	flush: () => void;
-	setGlobalProperties: () => void;
-	trackCustomEvent: () => void;
+	setGlobalProperties: (props: Record<string, unknown>) => void;
+	trackCustomEvent: (name: string, props?: Record<string, unknown>) => void;
 	options: TrackerOptions;
 };
 

packages/tracker/src/index.ts

@@ -8,6 +8,12 @@ import { initScrollDepthTracking } from "./plugins/scroll-depth";
 import { initWebVitalsTracking } from "./plugins/vitals";
 
 export class Databuddy extends BaseTracker {
+	// Store references for cleanup
+	private cleanupFns: Array<() => void> = [];
+	private originalPushState: typeof history.pushState | null = null;
+	private originalReplaceState: typeof history.replaceState | null = null;
+	private globalProperties: Record<string, unknown> = {};
+
 	constructor(options: TrackerOptions) {
 		super(options);
 
@@ -43,15 +49,12 @@ export class Databuddy extends BaseTracker {
 
 		if (typeof window !== "undefined") {
 			window.databuddy = {
-				track: (name: string, props?: any) => this.track(name, props),
-				screenView: (props?: any) => this.screenView(props),
-				identify: () => { },
-				clear: () => { }, // Placeholder
-				flush: () => {
-					this.flushBatch();
-				},
-				setGlobalProperties: () => { }, // Placeholder
-				trackCustomEvent: () => { }, // Placeholder
+				track: (name: string, props?: Record<string, unknown>) => this.track(name, props),
+				screenView: (props?: Record<string, unknown>) => this.screenView(props),
+				flush: () => this.flushBatch(),
+				clear: () => this.clear(),
+				setGlobalProperties: (props: Record<string, unknown>) => this.setGlobalProperties(props),
+				trackCustomEvent: (name: string, props?: Record<string, unknown>) => this.trackCustomEvent(name, props),
 				options: this.options,
 			};
 			window.db = window.databuddy;
@@ -63,25 +66,31 @@ export class Databuddy extends BaseTracker {
 			return;
 		}
 
-		const pushState = history.pushState;
+		// Store original methods for cleanup
+		this.originalPushState = history.pushState;
+		this.originalReplaceState = history.replaceState;
+
+		const originalPushState = this.originalPushState;
 		history.pushState = (...args) => {
-			const ret = pushState.apply(history, args);
+			const ret = originalPushState.apply(history, args);
 			window.dispatchEvent(new Event("pushstate"));
 			window.dispatchEvent(new Event("locationchange"));
 			return ret;
 		};
 
-		const replaceState = history.replaceState;
+		const originalReplaceState = this.originalReplaceState;
 		history.replaceState = (...args) => {
-			const ret = replaceState.apply(history, args);
+			const ret = originalReplaceState.apply(history, args);
 			window.dispatchEvent(new Event("replacestate"));
 			window.dispatchEvent(new Event("locationchange"));
 			return ret;
 		};
 
-		window.addEventListener("popstate", () => {
+		const popstateHandler = () => {
 			window.dispatchEvent(new Event("locationchange"));
-		});
+		};
+		window.addEventListener("popstate", popstateHandler);
+		this.cleanupFns.push(() => window.removeEventListener("popstate", popstateHandler));
 
 		let debounceTimer: ReturnType<typeof setTimeout>;
 		const debouncedScreenView = () => {
@@ -92,17 +101,32 @@ export class Databuddy extends BaseTracker {
 		};
 
 		window.addEventListener("locationchange", debouncedScreenView);
+		this.cleanupFns.push(() => window.removeEventListener("locationchange", debouncedScreenView));
+
 		if (this.options.trackHashChanges) {
 			window.addEventListener("hashchange", debouncedScreenView);
+			this.cleanupFns.push(() => window.removeEventListener("hashchange", debouncedScreenView));
 		}
 	}
 
-	screenView(props?: any) {
+	screenView(props?: Record<string, unknown>) {
 		if (this.isServer()) {
 			return;
 		}
 		const url = window.location.href;
 		if (this.lastPath !== url) {
+			if (!this.options.trackHashChanges && this.lastPath) {
+				const lastUrl = new URL(this.lastPath);
+				const currentUrl = new URL(url);
+				const isHashOnlyChange =
+					lastUrl.origin === currentUrl.origin &&
+					lastUrl.pathname === currentUrl.pathname &&
+					lastUrl.search === currentUrl.search &&
+					lastUrl.hash !== currentUrl.hash;
+				if (isHashOnlyChange) {
+					return;
+				}
+			}
 			this.lastPath = url;
 			this.pageCount += 1;
 			this.track("screen_view", {
@@ -113,7 +137,7 @@ export class Databuddy extends BaseTracker {
 	}
 
 	trackOutgoingLinks() {
-		document.addEventListener("click", (e) => {
+		const handler = (e: MouseEvent) => {
 			const target = e.target as HTMLElement;
 			const link = target.closest("a");
 			if (link && link.hostname !== window.location.hostname) {
@@ -132,17 +156,19 @@ export class Databuddy extends BaseTracker {
 					{ keepalive: true }
 				);
 			}
-		});
+		};
+		document.addEventListener("click", handler);
+		this.cleanupFns.push(() => document.removeEventListener("click", handler));
 	}
 
 	trackAttributes() {
-		document.addEventListener("click", (e) => {
+		const handler = (e: MouseEvent) => {
 			const target = e.target as HTMLElement;
 			const trackable = target.closest("[data-track]");
 			if (trackable) {
 				const eventName = trackable.getAttribute("data-track");
 				if (eventName) {
-					const properties: Record<string, any> = {};
+					const properties: Record<string, string> = {};
 					for (const attr of trackable.attributes) {
 						if (attr.name.startsWith("data-") && attr.name !== "data-track") {
 							const key = attr.name
@@ -154,21 +180,88 @@ export class Databuddy extends BaseTracker {
 					this.track(eventName, properties);
 				}
 			}
-		});
+		};
+		document.addEventListener("click", handler);
+		this.cleanupFns.push(() => document.removeEventListener("click", handler));
 	}
 
-	track(name: string, props: any) {
+	track(name: string, props?: Record<string, unknown>) {
 		const payload = {
 			eventId: generateUUIDv4(),
 			name,
 			anonymousId: this.anonymousId,
 			sessionId: this.sessionId,
 			timestamp: Date.now(),
 			...this.getBaseContext(),
+			...this.globalProperties,
 			...props,
 		};
 		this.send(payload);
 	}
+
+	trackCustomEvent(name: string, props?: Record<string, unknown>) {
+		this.track(name, {
+			event_type: "custom",
+			...props,
+		});
+	}
+
+	setGlobalProperties(props: Record<string, unknown>) {
+		this.globalProperties = { ...this.globalProperties, ...props };
+	}
+
+	clear() {
+		this.globalProperties = {};
+
+		if (!this.isServer()) {
+			try {
+				localStorage.removeItem("did");
+				sessionStorage.removeItem("did_session");
+				sessionStorage.removeItem("did_session_timestamp");
+				sessionStorage.removeItem("did_session_start");
+			} catch {
+			}
+		}
+
+		this.anonymousId = this.generateAnonymousId();
+		this.sessionId = this.generateSessionId();
+		this.sessionStartTime = Date.now();
+		this.pageCount = 0;
+		this.lastPath = "";
+		this.interactionCount = 0;
+		this.maxScrollDepth = 0;
+	}
+
+	destroy() {
+		// Run all cleanup functions
+		for (const cleanup of this.cleanupFns) {
+			cleanup();
+		}
+		this.cleanupFns = [];
+
+		// Restore original history methods
+		if (this.originalPushState) {
+			history.pushState = this.originalPushState;
+			this.originalPushState = null;
+		}
+		if (this.originalReplaceState) {
+			history.replaceState = this.originalReplaceState;
+			this.originalReplaceState = null;
+		}
+
+		// Clear batch queue and timer
+		if (this.batchTimer) {
+			clearTimeout(this.batchTimer);
+			this.batchTimer = null;
+		}
+		this.batchQueue = [];
+
+		// Remove global references
+		if (typeof window !== "undefined") {
+			window.databuddy = undefined;
+			window.db = undefined;
+		}
+	}
 }
 
 function initializeDatabuddy() {
@@ -183,7 +276,6 @@ function initializeDatabuddy() {
 		window.databuddy = {
 			track: () => { },
 			screenView: () => { },
-			identify: () => { },
 			clear: () => { },
 			flush: () => { },
 			setGlobalProperties: () => { },