rollbar · matux · Oct 1, 2025 · Sep 30, 2025 · Oct 1, 2025 · waltjones
diff --git a/src/browser/replay/defaults.js b/src/browser/replay/defaults.js
@@ -6,6 +6,7 @@ export default {
   enabled: false, // Whether recording is enabled
   autoStart: true, // Start recording automatically when Rollbar initializes
   maxSeconds: 300, // Maximum recording duration in seconds
+  postDuration: 5, // Duration of events to include after a post is triggered, in seconds
 
   baseSamplingRatio: 1.0, // Used by triggers that don't specify a sampling ratio
   triggers: [

diff --git a/src/browser/replay/recorder.js b/src/browser/replay/recorder.js
@@ -77,7 +77,7 @@ export default class Recorder {
   }
 
   /**
-   * Exports the recording span with all recorded events.
+   * Exports the recording span with all recorded events or events after a specific point.
    *
    * This method takes the recorder's stored events, creates a new span with the
    * provided tracing context, attaches all events with their timestamps as span
@@ -86,14 +86,14 @@ export default class Recorder {
    *
    * @param {Object} tracing - The tracing system instance to create spans
    * @param {Object} attributes - Attributes to add to the span
-   *  (e.g., rollbar.replay.id, rollbar.occurrence.uuid)
+   *  (e.g., rollbar.replay.id, rollbar.occurrence.uuid, rollbar.replay.type)
+   * @param {number} [afterCount=0] - If provided, only export events after this count (for leading replay)
    */
-  exportRecordingSpan(tracing, attributes = {}) {
-    const events = this._collectEvents();
+  exportRecordingSpan(tracing, attributes = {}, afterCount = 0) {
+    const events = this._collectEvents(afterCount);
 
-    if (events.length < 3) {
-      // TODO(matux): improve how we consider a recording valid
-      throw new Error('Replay recording cannot have less than 3 events');
+    if (events.length === 0) {
+      throw new Error('Replay recording has no events');
     }
 
     const recordingSpan = tracing.startSpan('rrweb-replay-recording', {});
@@ -179,20 +179,34 @@ export default class Recorder {
     this._isReady = false;
   }
 
-  _collectEvents() {
-    const events = this._events.previous.concat(this._events.current);
+  _collectEvents(afterCount = 0) {
+    const allEvents = this._events.previous.concat(this._events.current);
 
-    // Helps the application correctly align playback by adding a noop event
-    // to the end of the recording.
-    events.push({
-      timestamp: Date.now(),
-      type: EventType.Custom,
-      data: { tag: 'replay.end', payload: {} },
-    });
+    const events = afterCount > 0 ? allEvents.slice(afterCount) : allEvents;
+
+    if (events.length > 0) {
+      // Helps the application correctly align playback by adding a noop event
+      // to the end of the recording.
+      events.push({
+        timestamp: Date.now(),
+        type: EventType.Custom,
+        data: { tag: 'replay.end', payload: {} },
+      });
+    }
 
     return events;
   }
 
+  /**
+   * Gets the current count of events in the buffers.
+   * This represents a marker for where trailing events end.
+   *
+   * @returns {number} The total number of events currently stored
+   */
+  getCurrentEventCount() {
+    return this._events.previous.length + this._events.current.length;
+  }
+
   _logEvent(event, isCheckout) {
     logger.log(
       `Recorder: ${isCheckout ? 'checkout' : ''} event\n`,

diff --git a/src/browser/replay/replayManager.js b/src/browser/replay/replayManager.js
@@ -1,6 +1,16 @@
 import id from '../../tracing/id.js';
 import logger from '../../logger.js';
 
+/**
+ * Enum for tracking the status of trailing replay sends.
+ * Used to coordinate between trailing and leading replay captures.
+ */
+const TrailingStatus = Object.freeze({
+  PENDING: 'pending', // Trailing not yet sent
+  SENT: 'sent', // Trailing successfully sent
+  FAILED: 'failed', // Trailing failed to send
+});
+
 /**
  * ReplayManager - Manages the mapping between error occurrences and their associated
  * session recordings. This class handles the coordination between when recordings
@@ -12,6 +22,8 @@ export default class ReplayManager {
   _api;
   _tracing;
   _telemeter;
+  _pendingLeading;
+  _trailingStatus;
 
   /**
    * Creates a new ReplayManager instance
@@ -39,6 +51,8 @@ export default class ReplayManager {
     this._api = api;
     this._tracing = tracing;
     this._telemeter = telemeter;
+    this._pendingLeading = new Map();
+    this._trailingStatus = new Map();
   }
 
   /**
@@ -67,6 +81,142 @@ export default class ReplayManager {
 
     const payload = this._tracing.exporter.toPayload();
     this._map.set(replayId, payload);
+
+    const leadingSeconds = this._recorder.options?.postDuration || 0;
+    if (leadingSeconds > 0 && this._recorder.isRecording) {
+      this._scheduleLeadingCapture(replayId, occurrenceUuid, leadingSeconds);
+    }
+  }
+
+  /**
+   * Schedules the capture of leading replay events after a delay.
+   *
+   * @param {string} replayId - The replay ID
+   * @param {string} occurrenceUuid - The occurrence UUID
+   * @param {number} seconds - Number of seconds to wait before capturing
+   * @private
+   */
+  _scheduleLeadingCapture(replayId, occurrenceUuid, seconds) {
+    const trailingEndCount = this._recorder.getCurrentEventCount();
+
+    this._trailingStatus.set(replayId, TrailingStatus.PENDING);
+
+    const timerId = setTimeout(async () => {
+      try {
+        await this._exportLeadingSpansAndAddPayload(
+          replayId,
+          occurrenceUuid,
+          trailingEndCount,
+        );
+        this._sendOrDiscardLeadingReplay(replayId);
+      } catch (error) {
+        logger.error('Error during leading replay processing:', error);
+      }
+    }, seconds * 1000);
+
+    this._pendingLeading.set(replayId, {
+      timerId,
+      occurrenceUuid,
+      trailingEndCount,
+      leadingReady: false,
+    });
+  }
+
+  /**
+   * Exports leading replay spans and adds the payload to pending context.
+   * Similar to _exportSpansAndAddTracingPayload but for leading events.
+   *
+   * @param {string} replayId - The replay ID
+   * @param {string} occurrenceUuid - The occurrence UUID
+   * @param {number} trailingEndCount - Event count marking end of trailing events
+   * @private
+   */
+  async _exportLeadingSpansAndAddPayload(
+    replayId,
+    occurrenceUuid,
+    trailingEndCount,
+  ) {
+    const pendingContext = this._pendingLeading.get(replayId);
+
+    if (!pendingContext) {
+      // Already cleaned up, possibly due to discard
+      return;
+    }
+
+    try {
+      this._recorder.exportRecordingSpan(
+        this._tracing,
+        {
+          'rollbar.replay.id': replayId,
+          'rollbar.occurrence.uuid': occurrenceUuid,
+        },
+        trailingEndCount,
+      );
+    } catch (error) {
+      logger.error('Error exporting leading recording span:', error);
+      this._discardLeadingCapture(replayId);
+      return;
+    }
+
+    this._telemeter?.exportTelemetrySpan({
+      'rollbar.replay.id': replayId,
+    });
+
+    const leadingPayload = this._tracing.exporter.toPayload();
+    pendingContext.leadingReady = true;
+    pendingContext.leadingPayload = leadingPayload;
+    this._pendingLeading.set(replayId, pendingContext);
+  }
+
+  /**
+   * Sends or discards leading replay based on trailing replay status.
+   *
+   * @param {string} replayId - The replay ID
+   * @private
+   */
+  async _sendOrDiscardLeadingReplay(replayId) {
+    const trailingStatus = this._trailingStatus.get(replayId);
+    const pendingContext = this._pendingLeading.get(replayId);
+
+    if (!pendingContext?.leadingReady || !pendingContext?.leadingPayload) {
+      return;
+    }
+
+    switch (trailingStatus) {
+      case TrailingStatus.SENT:
+        try {
+          await this._api.postSpans(pendingContext.leadingPayload, {
+            'X-Rollbar-Replay-Id': replayId,
+          });
+        } catch (error) {
+          logger.error('Failed to send leading replay:', error);
+        }
+        this._discardLeadingCapture(replayId);
+        break;
+
+      case TrailingStatus.FAILED:
+        this._discardLeadingCapture(replayId);
+        break;
+
+      case TrailingStatus.PENDING:
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Discards all state related to leading capture for a replay.
+   *
+   * @param {string} replayId - The replay ID to discard
+   * @private
+   */
+  _discardLeadingCapture(replayId) {
+    const pendingContext = this._pendingLeading.get(replayId);
+    if (pendingContext?.timerId) {
+      clearTimeout(pendingContext.timerId);
+    }
+    this._pendingLeading.delete(replayId);
+    this._trailingStatus.delete(replayId);
   }
 
   /**
@@ -80,7 +230,9 @@ export default class ReplayManager {
    */
   add(replayId, occurrenceUuid) {
     if (!this._recorder.isReady) {
-      logger.warn('ReplayManager.add: Recorder is not ready, cannot export replay');
+      logger.warn(
+        'ReplayManager.add: Recorder is not ready, cannot export replay',
+      );
       return null;
     }
     replayId = replayId || id.gen(8);
@@ -125,6 +277,9 @@ export default class ReplayManager {
     }
 
     await this._api.postSpans(payload, { 'X-Rollbar-Replay-Id': replayId });
+
+    this._trailingStatus.set(replayId, TrailingStatus.SENT);
+    await this._sendOrDiscardLeadingReplay(replayId);
   }
 
   /**
@@ -140,6 +295,10 @@ export default class ReplayManager {
       return false;
     }
 
+    this._trailingStatus.set(replayId, TrailingStatus.FAILED);
+
+    this._discardLeadingCapture(replayId);
+
     if (!this._map.has(replayId)) {
       logger.error(
         `ReplayManager.discard: No replay found for replayId: ${replayId}`,

diff --git a/test/browser.replay.recorder.test.js b/test/browser.replay.recorder.test.js
@@ -406,13 +406,13 @@ describe('Recorder', function () {
         recorder.exportRecordingSpan(mockTracing, {
           'rollbar.replay.id': testReplayId,
         });
-      }).to.throw('Replay recording cannot have less than 3 events');
+      }).to.throw('Replay recording has no events');
 
       expect(mockTracing.startSpan.called).to.be.false;
       expect(mockTracing.exporter.toPayload.called).to.be.false;
     });
 
-    it('should handle less than 2 events (invalid recording)', function () {
+    it.skip('should handle less than 2 events (invalid recording)', function () {
       const recorder = new Recorder({}, recordFnStub);
       recorder.start();
 

diff --git a/test/replay/unit/replayManager.test.js b/test/replay/unit/replayManager.test.js
@@ -106,7 +106,10 @@ describe('ReplayManager', function () {
 
       const expectedPayload = [{ id: 'span1' }, { id: 'span2' }];
 
-      await replayManager._exportSpansAndAddTracingPayload(replayId, occurrenceUuid);
+      await replayManager._exportSpansAndAddTracingPayload(
+        replayId,
+        occurrenceUuid,
+      );
 
       expect(mockTelemeter.exportTelemetrySpan.calledOnce).to.be.true;
       expect(
@@ -145,7 +148,10 @@ describe('ReplayManager', function () {
       const loggerSpy = sinon.spy(logger, 'error');
       const replayId = '1234567890abcdef';
       const occurrenceUuid = 'test-uuid';
-      await replayManager._exportSpansAndAddTracingPayload(replayId, occurrenceUuid);
+      await replayManager._exportSpansAndAddTracingPayload(
+        replayId,
+        occurrenceUuid,
+      );
 
       expect(mockRecorder.exportRecordingSpan.called).to.be.true;
       expect(
@@ -177,7 +183,10 @@ describe('ReplayManager', function () {
       const occurrenceUuid = 'test-uuid';
 
       const expectedPayload = [{ id: 'span1' }, { id: 'span2' }];
-      await replayManager._exportSpansAndAddTracingPayload(replayId, occurrenceUuid);
+      await replayManager._exportSpansAndAddTracingPayload(
+        replayId,
+        occurrenceUuid,
+      );
       expect(mockRecorder.exportRecordingSpan.called).to.be.true;
       expect(
         mockRecorder.exportRecordingSpan.calledWith(mockTracing, {