@probat/react 0.4.5 → 0.4.6

package/src/utils/eventQueue.ts

@@ -0,0 +1,157 @@
+import type { StructuredEvent } from "../types/events";
+
+interface BatchBody {
+    events: StructuredEvent[];
+}
+
+export class EventQueue {
+    private queue: StructuredEvent[] = [];
+    private flushTimer: ReturnType<typeof setTimeout> | null = null;
+    private readonly maxBatchSize = 20;
+    private readonly flushIntervalMs = 5000;
+    private readonly endpointBatch: string;
+    private readonly endpointSingle: string;
+    private readonly apiKey?: string;
+
+    constructor(host: string, apiKey?: string) {
+        const normalized = host.replace(/\/$/, "");
+        this.endpointBatch = `${normalized}/experiment/metrics/batch`;
+        this.endpointSingle = `${normalized}/experiment/metrics`;
+        this.apiKey = apiKey;
+    }
+
+    enqueue(event: StructuredEvent): void {
+        this.queue.push(event);
+        if (this.queue.length >= this.maxBatchSize) {
+            this.flush();
+            return;
+        }
+        if (!this.flushTimer) {
+            this.flushTimer = setTimeout(() => {
+                this.flush();
+            }, this.flushIntervalMs);
+        }
+    }
+
+    flush(forceBeacon = false): void {
+        if (this.flushTimer) {
+            clearTimeout(this.flushTimer);
+            this.flushTimer = null;
+        }
+        if (this.queue.length === 0) return;
+
+        const batch = this.queue.splice(0, this.maxBatchSize);
+        this.send(batch, forceBeacon);
+
+        if (this.queue.length > 0) {
+            this.flushTimer = setTimeout(() => {
+                this.flush();
+            }, this.flushIntervalMs);
+        }
+    }
+
+    private send(batch: StructuredEvent[], forceBeacon = false): void {
+        const body: BatchBody = { events: batch };
+        const encodedBody = JSON.stringify(body);
+        const headers: Record<string, string> = { "Content-Type": "application/json" };
+        if (this.apiKey) headers.Authorization = `Bearer ${this.apiKey}`;
+        const canBeacon =
+            typeof navigator !== "undefined" &&
+            typeof navigator.sendBeacon === "function" &&
+            !this.apiKey &&
+            (
+                forceBeacon ||
+                (typeof document !== "undefined" && document.visibilityState === "hidden")
+            );
+
+        if (canBeacon) {
+            navigator.sendBeacon(this.endpointBatch, encodedBody);
+            return;
+        }
+
+        try {
+            if (batch.length === 1) {
+                fetch(this.endpointSingle, {
+                    method: "POST",
+                    headers,
+                    credentials: "include",
+                    body: JSON.stringify(batch[0]),
+                    keepalive: true,
+                }).catch(() => {});
+                return;
+            }
+            fetch(this.endpointBatch, {
+                method: "POST",
+                headers,
+                credentials: "include",
+                body: encodedBody,
+                keepalive: true,
+            }).catch(() => {});
+        } catch {
+            // Deliberately drop failed batches (current behavior parity).
+        }
+    }
+}
+
+const queuesByHost = new Map<string, EventQueue>();
+let lifecycleListenersInstalled = false;
+
+function installLifecycleListeners(): void {
+    if (lifecycleListenersInstalled || typeof window === "undefined") return;
+    lifecycleListenersInstalled = true;
+
+    const flushWithBeacon = () => {
+        for (const queue of queuesByHost.values()) {
+            queue.flush(true);
+        }
+    };
+
+    const flushNormally = () => {
+        for (const queue of queuesByHost.values()) {
+            queue.flush(false);
+        }
+    };
+
+    window.addEventListener("pagehide", flushWithBeacon);
+    window.addEventListener("beforeunload", flushWithBeacon);
+    document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") {
+            flushWithBeacon();
+        } else {
+            flushNormally();
+        }
+    });
+}
+
+function queueKey(host: string, apiKey?: string): string {
+    const normalized = host.replace(/\/$/, "");
+    return apiKey ? `${normalized}::${apiKey}` : `${normalized}::__no_key__`;
+}
+
+export function getEventQueue(host: string, apiKey?: string): EventQueue {
+    const normalized = host.replace(/\/$/, "");
+    const key = queueKey(normalized, apiKey);
+    let queue = queuesByHost.get(key);
+    if (!queue) {
+        queue = new EventQueue(normalized, apiKey);
+        queuesByHost.set(key, queue);
+    }
+    installLifecycleListeners();
+    return queue;
+}
+
+export function flushEventQueue(host: string, forceBeacon = false, apiKey?: string): void {
+    const queue = queuesByHost.get(queueKey(host, apiKey));
+    if (!queue) return;
+    queue.flush(forceBeacon);
+}
+
+export function flushAllEventQueues(forceBeacon = false): void {
+    for (const queue of queuesByHost.values()) {
+        queue.flush(forceBeacon);
+    }
+}
+
+export function resetEventQueuesForTests(): void {
+    queuesByHost.clear();
+}