@nagoorkani/session-capture-vue-replay 0.1.0 → 0.1.2

package/dist/index.js

@@ -18,7 +18,7 @@ import { isSampled, ReplayGate, safe } from '@nagoorkani/session-capture-core';
 import { currentConfig, keepSessionAlive, onError, onSession, } from '@nagoorkani/session-capture-vue';
 import { record } from 'rrweb';
 import { Recorder } from "./recorder.js";
-import { uploadSegment } from "./upload.js";
+import { splitSegment, uploadSegment } from "./upload.js";
 /** Set by `installReplay`; read by the flusher, which outlives one call. */
 const uploadOptions = {
     endpoint: '',
@@ -182,17 +182,25 @@ async function flushNow(unloading = false) {
     keepSessionAlive();
     sending = true;
     try {
-        const result = await uploadSegment({
-            endpoint: uploadOptions.endpoint,
-            apiKey: uploadOptions.apiKey,
-            sessionId,
-            keepalive: unloading,
-        }, segment);
-        // One more attempt on the next tick, then it is gone. Holding a failing
-        // segment forever is how an offline tab runs out of memory.
-        if (result.kind === 'failed' && !unloading)
-            retrying = segment;
-        uploadOptions.onUpload?.(result, segment.length);
+        const chunks = splitSegment(segment);
+        for (let i = 0; i < chunks.length; i++) {
+            const chunk = chunks[i];
+            const result = await uploadSegment({
+                endpoint: uploadOptions.endpoint,
+                apiKey: uploadOptions.apiKey,
+                sessionId,
+                keepalive: unloading,
+            }, chunk);
+            uploadOptions.onUpload?.(result, chunk.length);
+            // Kept for the next tick, unloading or not: a tab switch fires the same
+            // event as a close, and a tab that comes back should still have its
+            // full snapshot. A tab that really closed takes the memory with it.
+            // Kept in order, because rrweb's stream is only meaningful in order.
+            if (result.kind === 'failed') {
+                retrying = chunks.slice(i).flat();
+                break;
+            }
+        }
     }
     finally {
         sending = false;

package/dist/upload.d.ts

@@ -20,6 +20,25 @@ export interface UploadOptions {
     /** Ask the browser to finish this one after the page is gone. */
     keepalive?: boolean;
 }
+/**
+ * Browsers refuse a `keepalive` request whose body would take the page's
+ * in-flight keepalive bytes over 64 KB — the fetch rejects at once. The first
+ * segment carries the full DOM snapshot and is almost always larger, so it
+ * went out as keepalive on a tab switch and was lost, leaving every later
+ * segment as mutations with nothing to apply them to. Above this, send it
+ * as an ordinary request: a hidden tab usually still runs, and that is the
+ * common case.
+ */
+export declare const KEEPALIVE_MAX_BYTES: number;
+/**
+ * Ingestion's per-upload limits: `MAX_FRAMES` in `event-schema`'s replay
+ * container, and half its 8 MB body limit. A busy page emits thousands of
+ * rrweb events in thirty seconds, and one oversized upload is rejected whole.
+ */
+export declare const MAX_UPLOAD_EVENTS = 2000;
+export declare const MAX_UPLOAD_BYTES: number;
+/** Split a segment into uploads ingestion will accept, in order. */
+export declare function splitSegment(segment: readonly Segment[]): Segment[][];
 export type UploadResult = {
     kind: 'sent';
     events: number;

package/dist/upload.js

@@ -12,6 +12,42 @@
  * shows a recording worth the quota.
  */
 import { encodeContainer, MAGIC_DOM } from '@nagoorkani/session-capture-core';
+/**
+ * Browsers refuse a `keepalive` request whose body would take the page's
+ * in-flight keepalive bytes over 64 KB — the fetch rejects at once. The first
+ * segment carries the full DOM snapshot and is almost always larger, so it
+ * went out as keepalive on a tab switch and was lost, leaving every later
+ * segment as mutations with nothing to apply them to. Above this, send it
+ * as an ordinary request: a hidden tab usually still runs, and that is the
+ * common case.
+ */
+export const KEEPALIVE_MAX_BYTES = 60 * 1024;
+/**
+ * Ingestion's per-upload limits: `MAX_FRAMES` in `event-schema`'s replay
+ * container, and half its 8 MB body limit. A busy page emits thousands of
+ * rrweb events in thirty seconds, and one oversized upload is rejected whole.
+ */
+export const MAX_UPLOAD_EVENTS = 2000;
+export const MAX_UPLOAD_BYTES = 4 * 1024 * 1024;
+/** Split a segment into uploads ingestion will accept, in order. */
+export function splitSegment(segment) {
+    const chunks = [];
+    let chunk = [];
+    let bytes = 0;
+    for (const event of segment) {
+        if (chunk.length > 0 &&
+            (chunk.length >= MAX_UPLOAD_EVENTS || bytes + event.payload.byteLength > MAX_UPLOAD_BYTES)) {
+            chunks.push(chunk);
+            chunk = [];
+            bytes = 0;
+        }
+        chunk.push(event);
+        bytes += event.payload.byteLength;
+    }
+    if (chunk.length > 0)
+        chunks.push(chunk);
+    return chunks;
+}
 export async function uploadSegment(options, segment) {
     if (segment.length === 0)
         return { kind: 'skipped', reason: 'no events' };
@@ -35,7 +71,7 @@ export async function uploadSegment(options, segment) {
                 authorization: `Bearer ${options.apiKey}`,
             },
             body: body,
-            keepalive: options.keepalive === true,
+            keepalive: options.keepalive === true && body.byteLength <= KEEPALIVE_MAX_BYTES,
         });
         return response.ok
             ? { kind: 'sent', events: segment.length }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nagoorkani/session-capture-vue-replay",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Optional DOM session replay for @nagoorkani/session-capture-vue",
   "license": "UNLICENSED",
   "type": "module",
@@ -19,11 +19,11 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@nagoorkani/session-capture-core": "0.1.0"
+    "@nagoorkani/session-capture-core": "^0.1.4"
   },
   "peerDependencies": {
     "rrweb": "^2.0.0",
-    "@nagoorkani/session-capture-vue": "0.1.0"
+    "@nagoorkani/session-capture-vue": "^0.1.2"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",