@usereelay/browser 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -13817,14 +13817,17 @@ var pack = (event) => {
 
 // src/replay.ts
 var CHECKOUT_EVERY_MS = 3e4;
-var MAX_CHUNK_BYTES = 6e4;
+var MAX_CHUNK_BYTES = 45e3;
 var MAX_CLIPS_PER_PAGE = 5;
 var MAX_EVENTS_PER_SEGMENT = 8e3;
+var RRWEB_EVENT_FULL_SNAPSHOT = 2;
+var RRWEB_EVENT_META = 4;
 var ReplayRecorder = class {
   constructor(opts) {
     this.started = false;
-    // Ring buffer of the last two checkout segments. Each segment begins with a
-    // full snapshot, so segments.flat() is always replayable from its head.
+    // Ring buffer of the last two complete checkout segments. Each replayable
+    // segment begins with Meta followed by FullSnapshot, so the flattened buffer
+    // can be handed directly to rrweb-player after unpacking.
     this.segments = [[]];
     this.seq = 0;
     this.clips = 0;
@@ -13841,9 +13844,6 @@ var ReplayRecorder = class {
     try {
       this.stopFn = record({
         emit: (event, isCheckout) => this.onEvent(event, isCheckout),
-        // Pack each event at record time so the ring buffer and the wire stay
-        // compact; the dashboard unpacks before playback.
-        packFn: pack,
         checkoutEveryNms: CHECKOUT_EVERY_MS,
         // Fidelity: inline same-origin CSS + fonts so the replica renders
         // without depending on the original site being reachable.
@@ -13874,7 +13874,7 @@ var ReplayRecorder = class {
   }
   onEvent(event, isCheckout) {
     try {
-      if (isCheckout || this.segments.length === 0) {
+      if (isCheckout && event.type === RRWEB_EVENT_META || this.segments.length === 0) {
         this.segments.push([]);
         if (this.segments.length > 2) this.segments.shift();
       }
@@ -13893,8 +13893,8 @@ var ReplayRecorder = class {
     try {
       if (!errorEventId || this.flushedErrors.has(errorEventId)) return;
       if (this.clips >= MAX_CLIPS_PER_PAGE) return;
-      const events = this.segments.flat();
-      if (events.length === 0) return;
+      const events = this.replayableEvents();
+      if (events.length < 2) return;
       this.flushedErrors.add(errorEventId);
       this.clips += 1;
       this.shipClip(errorEventId, events);
@@ -13905,9 +13905,13 @@ var ReplayRecorder = class {
   /** Best-effort flush on page hide — no-op in error-buffered mode. */
   flush() {
   }
+  replayableEvents() {
+    const completeSegments = this.segments.filter((segment) => hasReplayHead(segment));
+    return completeSegments.slice(-2).flat();
+  }
   shipClip(errorEventId, events) {
     const clipSessionId = clipId(this.opts.sessionId, errorEventId);
-    const json = JSON.stringify(events);
+    const json = JSON.stringify(events.map((event) => pack(event)));
     for (let offset = 0; offset < json.length; offset += MAX_CHUNK_BYTES) {
       this.sendChunk(clipSessionId, errorEventId, json.slice(offset, offset + MAX_CHUNK_BYTES));
     }
@@ -13940,6 +13944,11 @@ var ReplayRecorder = class {
 function clipId(sessionId, errorEventId) {
   return `${sessionId}~${errorEventId}`;
 }
+function hasReplayHead(segment) {
+  const metaIndex = segment.findIndex((event) => event.type === RRWEB_EVENT_META);
+  if (metaIndex < 0) return false;
+  return segment.slice(metaIndex + 1).some((event) => event.type === RRWEB_EVENT_FULL_SNAPSHOT);
+}
 
 // src/client.ts
 var BrowserClient = class extends BaseClient {

package/dist/index.js

@@ -13815,14 +13815,17 @@ var pack = (event) => {
 
 // src/replay.ts
 var CHECKOUT_EVERY_MS = 3e4;
-var MAX_CHUNK_BYTES = 6e4;
+var MAX_CHUNK_BYTES = 45e3;
 var MAX_CLIPS_PER_PAGE = 5;
 var MAX_EVENTS_PER_SEGMENT = 8e3;
+var RRWEB_EVENT_FULL_SNAPSHOT = 2;
+var RRWEB_EVENT_META = 4;
 var ReplayRecorder = class {
   constructor(opts) {
     this.started = false;
-    // Ring buffer of the last two checkout segments. Each segment begins with a
-    // full snapshot, so segments.flat() is always replayable from its head.
+    // Ring buffer of the last two complete checkout segments. Each replayable
+    // segment begins with Meta followed by FullSnapshot, so the flattened buffer
+    // can be handed directly to rrweb-player after unpacking.
     this.segments = [[]];
     this.seq = 0;
     this.clips = 0;
@@ -13839,9 +13842,6 @@ var ReplayRecorder = class {
     try {
       this.stopFn = record({
         emit: (event, isCheckout) => this.onEvent(event, isCheckout),
-        // Pack each event at record time so the ring buffer and the wire stay
-        // compact; the dashboard unpacks before playback.
-        packFn: pack,
         checkoutEveryNms: CHECKOUT_EVERY_MS,
         // Fidelity: inline same-origin CSS + fonts so the replica renders
         // without depending on the original site being reachable.
@@ -13872,7 +13872,7 @@ var ReplayRecorder = class {
   }
   onEvent(event, isCheckout) {
     try {
-      if (isCheckout || this.segments.length === 0) {
+      if (isCheckout && event.type === RRWEB_EVENT_META || this.segments.length === 0) {
         this.segments.push([]);
         if (this.segments.length > 2) this.segments.shift();
       }
@@ -13891,8 +13891,8 @@ var ReplayRecorder = class {
     try {
       if (!errorEventId || this.flushedErrors.has(errorEventId)) return;
       if (this.clips >= MAX_CLIPS_PER_PAGE) return;
-      const events = this.segments.flat();
-      if (events.length === 0) return;
+      const events = this.replayableEvents();
+      if (events.length < 2) return;
       this.flushedErrors.add(errorEventId);
       this.clips += 1;
       this.shipClip(errorEventId, events);
@@ -13903,9 +13903,13 @@ var ReplayRecorder = class {
   /** Best-effort flush on page hide — no-op in error-buffered mode. */
   flush() {
   }
+  replayableEvents() {
+    const completeSegments = this.segments.filter((segment) => hasReplayHead(segment));
+    return completeSegments.slice(-2).flat();
+  }
   shipClip(errorEventId, events) {
     const clipSessionId = clipId(this.opts.sessionId, errorEventId);
-    const json = JSON.stringify(events);
+    const json = JSON.stringify(events.map((event) => pack(event)));
     for (let offset = 0; offset < json.length; offset += MAX_CHUNK_BYTES) {
       this.sendChunk(clipSessionId, errorEventId, json.slice(offset, offset + MAX_CHUNK_BYTES));
     }
@@ -13938,6 +13942,11 @@ var ReplayRecorder = class {
 function clipId(sessionId, errorEventId) {
   return `${sessionId}~${errorEventId}`;
 }
+function hasReplayHead(segment) {
+  const metaIndex = segment.findIndex((event) => event.type === RRWEB_EVENT_META);
+  if (metaIndex < 0) return false;
+  return segment.slice(metaIndex + 1).some((event) => event.type === RRWEB_EVENT_FULL_SNAPSHOT);
+}
 
 // src/client.ts
 var BrowserClient = class extends BaseClient {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usereelay/browser",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Reelay SDK for browsers: error capture, breadcrumbs, fetch trace stitching, masked DOM session replay.",
   "license": "MIT",
   "publishConfig": {