@cedarai/session-replay-sdk 0.1.0 → 0.2.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,
@@ -344,6 +429,7 @@ var consoleCapture = null;
 var errorCapture = null;
 var networkCapture = null;
 var recorderCapture = null;
+var unloadHandler = null;
 function onEvent(event) {
   transport?.enqueue(event);
 }
@@ -372,8 +458,14 @@ var CedarReplay = {
     networkCapture.start();
     recorderCapture = new RecorderCapture(onEvent, config.recorder);
     recorderCapture.start();
+    unloadHandler = () => transport?.flushOnUnload();
+    window.addEventListener("beforeunload", unloadHandler);
   },
   stop() {
+    if (unloadHandler) {
+      window.removeEventListener("beforeunload", unloadHandler);
+      unloadHandler = 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.2.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",