@cedarai/session-replay-sdk 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,4 +1,29 @@
+// src/compress.ts
+async function gzipCompress(data) {
+  const blob = new Blob([data]);
+  const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+  const reader = stream.getReader();
+  const chunks = [];
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+  }
+  const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return result;
+}
+function isCompressionSupported() {
+  return typeof CompressionStream !== "undefined";
+}
+
 // src/transport.ts
+var BEACON_MAX_SIZE = 64 * 1024;
 var Transport = class {
   config;
   queue = [];
@@ -6,6 +31,9 @@ var Transport = class {
   started = false;
   startedAt = Date.now();
   fetchFn;
+  // Pre-compressed beacon payload, updated in the background after each enqueue
+  pendingBeaconBlob = null;
+  pendingBeaconUrl = "";
   /**
    * @param config SDK configuration
    * @param originalFetch Original fetch reference to avoid self-interception.
@@ -42,31 +70,88 @@ var Transport = class {
     if (estimatedSize >= maxSize) {
       this.flush();
     }
+    this.prepareBeaconPayload();
   }
   flush() {
     if (this.queue.length === 0) return;
     const events = this.queue.splice(0);
     const payload = this.buildPayload(events);
-    this.fetchFn(`${this.config.serverUrl}/api/ingest`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload)
-    }).catch(() => {
-    });
+    const json = JSON.stringify(payload);
+    this.pendingBeaconBlob = null;
+    if (isCompressionSupported()) {
+      gzipCompress(json).then((compressed) => {
+        this.fetchFn(`${this.config.serverUrl}/api/ingest`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Content-Encoding": "gzip"
+          },
+          body: compressed
+        }).catch(() => {
+        });
+      }).catch(() => {
+        this.fetchFn(`${this.config.serverUrl}/api/ingest`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: json
+        }).catch(() => {
+        });
+      });
+    } else {
+      this.fetchFn(`${this.config.serverUrl}/api/ingest`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: json
+      }).catch(() => {
+      });
+    }
   }
   /**
-   * Flush via sendBeacon for page unload. sendBeacon cannot set custom headers,
-   * so we send as a Blob and indicate gzip via query param.
+   * Flush via sendBeacon for page unload. Uses pre-compressed data if available,
+   * otherwise sends uncompressed JSON with truncation to stay under 64KB.
    */
   flushOnUnload() {
     if (this.queue.length === 0) return;
-    const events = this.queue.splice(0);
-    const payload = this.buildPayload(events);
-    const body = JSON.stringify(payload);
+    const url = `${this.config.serverUrl}/api/ingest`;
+    if (this.pendingBeaconBlob) {
+      navigator.sendBeacon(this.pendingBeaconUrl, this.pendingBeaconBlob);
+      this.queue.length = 0;
+      this.pendingBeaconBlob = null;
+      return;
+    }
+    let events = this.queue.splice(0);
+    let payload = this.buildPayload(events);
+    let body = JSON.stringify(payload);
+    while (body.length > BEACON_MAX_SIZE && events.length > 1) {
+      const rrwebIdx = events.findLastIndex((e) => e.type === "rrweb");
+      if (rrwebIdx >= 0) {
+        events.splice(rrwebIdx, 1);
+      } else {
+        events.pop();
+      }
+      payload = this.buildPayload(events);
+      body = JSON.stringify(payload);
+    }
     const blob = new Blob([body], { type: "application/json" });
-    const url = `${this.config.serverUrl}/api/ingest?encoding=gzip`;
     navigator.sendBeacon(url, blob);
   }
+  /**
+   * Pre-compress the current queue in the background for sendBeacon use.
+   * Called after each enqueue so the compressed blob is ready when beforeunload fires.
+   */
+  prepareBeaconPayload() {
+    if (!isCompressionSupported() || this.queue.length === 0) return;
+    const snapshot = [...this.queue];
+    const payload = this.buildPayload(snapshot);
+    const json = JSON.stringify(payload);
+    gzipCompress(json).then((compressed) => {
+      if (this.queue.length > 0) {
+        this.pendingBeaconBlob = new Blob([compressed], { type: "application/octet-stream" });
+        this.pendingBeaconUrl = `${this.config.serverUrl}/api/ingest?encoding=gzip`;
+      }
+    }).catch(() => {
+    });
+  }
   buildPayload(events) {
     return {
       sessionId: this.config.cedarSessionId,
@@ -337,6 +422,91 @@ var RecorderCapture = class {
   }
 };
 
+// src/performance.ts
+import { onLCP, onCLS, onINP } from "web-vitals";
+var MEMORY_INTERVAL_MS = 3e4;
+var PerformanceCapture = class {
+  onEvent;
+  started = false;
+  longTaskObserver = null;
+  memoryTimer = null;
+  constructor(onEvent2) {
+    this.onEvent = onEvent2;
+  }
+  start() {
+    if (this.started) return;
+    this.started = true;
+    this.startWebVitals();
+    this.startLongTaskObserver();
+    this.startMemorySnapshots();
+  }
+  stop() {
+    if (!this.started) return;
+    this.started = false;
+    this.longTaskObserver?.disconnect();
+    this.longTaskObserver = null;
+    if (this.memoryTimer) {
+      clearInterval(this.memoryTimer);
+      this.memoryTimer = null;
+    }
+  }
+  emit(data) {
+    if (!this.started) return;
+    this.onEvent({
+      type: "performance",
+      timestamp: Date.now(),
+      data
+    });
+  }
+  startWebVitals() {
+    const handler = (metric) => {
+      this.emit({
+        metric: "web-vital",
+        name: metric.name,
+        value: metric.value,
+        rating: metric.rating
+      });
+    };
+    onLCP(handler);
+    onCLS(handler, { reportAllChanges: true });
+    onINP(handler, { reportAllChanges: true });
+  }
+  startLongTaskObserver() {
+    if (typeof globalThis.PerformanceObserver === "undefined") return;
+    try {
+      this.longTaskObserver = new globalThis.PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          const attribution = entry.attribution?.[0]?.containerSrc;
+          this.emit({
+            metric: "long-task",
+            duration: entry.duration,
+            attribution
+          });
+        }
+      });
+      this.longTaskObserver.observe({ entryTypes: ["longtask"] });
+    } catch {
+    }
+  }
+  startMemorySnapshots() {
+    const memory = performance.memory;
+    if (!memory) return;
+    this.emitMemory(memory);
+    this.memoryTimer = setInterval(() => {
+      const mem = performance.memory;
+      if (mem) this.emitMemory(mem);
+    }, MEMORY_INTERVAL_MS);
+  }
+  emitMemory(memory) {
+    this.emit({
+      metric: "memory",
+      usedJSHeapSize: memory.usedJSHeapSize,
+      totalJSHeapSize: memory.totalJSHeapSize,
+      jsHeapSizeLimit: memory.jsHeapSizeLimit
+    });
+  }
+};
+
 // src/index.ts
 var config = null;
 var transport = null;
@@ -344,6 +514,8 @@ var consoleCapture = null;
 var errorCapture = null;
 var networkCapture = null;
 var recorderCapture = null;
+var performanceCapture = null;
+var unloadHandler = null;
 function onEvent(event) {
   transport?.enqueue(event);
 }
@@ -372,8 +544,18 @@ var CedarReplay = {
     networkCapture.start();
     recorderCapture = new RecorderCapture(onEvent, config.recorder);
     recorderCapture.start();
+    performanceCapture = new PerformanceCapture(onEvent);
+    performanceCapture.start();
+    unloadHandler = () => transport?.flushOnUnload();
+    window.addEventListener("beforeunload", unloadHandler);
   },
   stop() {
+    if (unloadHandler) {
+      window.removeEventListener("beforeunload", unloadHandler);
+      unloadHandler = null;
+    }
+    performanceCapture?.stop();
+    performanceCapture = null;
     recorderCapture?.stop();
     recorderCapture = null;
     networkCapture?.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarai/session-replay-sdk",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,6 @@
     }
   },
   "scripts": {
-    "prepare": "tsup src/index.ts --format esm --dts",
     "build": "tsup src/index.ts --format esm --dts",
     "build:iife": "tsup src/global.ts --format iife --outDir dist",
     "dev": "tsup src/index.ts --format esm --dts --watch",
@@ -20,7 +19,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "rrweb": "^2.0.0-alpha.4"
+    "rrweb": "^2.0.0-alpha.4",
+    "web-vitals": "^4.2.4"
   },
   "devDependencies": {
     "@vitest/browser": "^4.0.18",