feat(replay): Add traces_by_timestamp to replay event

In order to support moving our custom rrweb events to EAP, we need to send timestamps w/ trace ids so that we can identify which trace the event belongs to.

In order to avoid breaking changes, we should not change the current type of trace_ids field in the replay event, instead we add a new field traces_by_timestamp

Author: billyvg

packages/core/src/types-hoist/replay.ts

@@ -9,6 +9,7 @@ export interface ReplayEvent extends Event {
   replay_start_timestamp?: number;
   error_ids: string[];
   trace_ids: string[];
+  traces_by_timestamp: [number, string][];
   replay_id: string;
   segment_id: number;
   replay_type: ReplayRecordingMode;

packages/replay-internal/src/coreHandlers/handleAfterSendEvent.ts

@@ -37,8 +37,8 @@ function handleTransactionEvent(replay: ReplayContainer, event: TransactionEvent
   // Collect traceIds in _context regardless of `recordingMode`
   // In error mode, _context gets cleared on every checkout
   // We limit to max. 100 transactions linked
-  if (event.contexts?.trace?.trace_id && replayContext.traceIds.size < 100) {
-    replayContext.traceIds.add(event.contexts.trace.trace_id);
+  if (event.contexts?.trace?.trace_id && event.timestamp && replayContext.traceIds.size < 100) {
+    replayContext.traceIds.add([event.timestamp, event.contexts.trace.trace_id]);
   }
 }
 

packages/replay-internal/src/types/replay.ts

@@ -335,7 +335,7 @@ export interface PopEventContext extends CommonEventContext {
   /**
    * List of Sentry trace ids that have occurred during a replay segment
    */
-  traceIds: Array<string>;
+  traceIds: Array<[number, string]>;
 }
 
 /**
@@ -348,9 +348,9 @@ export interface InternalEventContext extends CommonEventContext {
   errorIds: Set<string>;
 
   /**
-   * Set of Sentry trace ids that have occurred during a replay segment
+   * Set of [timestamp, trace_id] tuples for Sentry traces that have occurred during a replay segment
    */
-  traceIds: Set<string>;
+  traceIds: Set<[number, string]>;
 }
 
 export type Sampled = false | 'session' | 'buffer';

packages/replay-internal/src/util/sendReplayRequest.ts

@@ -42,7 +42,8 @@ export async function sendReplayRequest({
     replay_start_timestamp: initialTimestamp / 1000,
     timestamp: timestamp / 1000,
     error_ids: errorIds,
-    trace_ids: traceIds,
+    trace_ids: traceIds.map(([_ts, traceId]) => traceId),
+    traces_by_timestamp: traceIds.map(([ts, traceId]) => [ts, traceId]),
     urls,
     replay_id: replayId,
     segment_id,

packages/replay-internal/test/integration/coreHandlers/handleAfterSendEvent.test.ts

@@ -84,13 +84,20 @@ describe('Integration | coreHandlers | handleAfterSendEvent', () => {
     handler(transaction4, { statusCode: undefined });
 
     expect(Array.from(replay.getContext().errorIds)).toEqual([]);
-    expect(Array.from(replay.getContext().traceIds)).toEqual(['tr2']);
+    // traceIds is now a Set of [timestamp, trace_id] tuples
+    const traceIds = Array.from(replay.getContext().traceIds);
+    expect(traceIds).toHaveLength(1);
+    expect(traceIds[0][1]).toBe('tr2');
+    expect(typeof traceIds[0][0]).toBe('number');
 
     // Does not affect error session
     await vi.advanceTimersToNextTimerAsync();
 
     expect(Array.from(replay.getContext().errorIds)).toEqual([]);
-    expect(Array.from(replay.getContext().traceIds)).toEqual(['tr2']);
+    // Verify traceIds are still there after advancing timers
+    const traceIdsAfter = Array.from(replay.getContext().traceIds);
+    expect(traceIdsAfter).toHaveLength(1);
+    expect(traceIdsAfter[0][1]).toBe('tr2');
     expect(replay.isEnabled()).toBe(true);
     expect(replay.isPaused()).toBe(false);
     expect(replay.recordingMode).toBe('buffer');
@@ -141,11 +148,20 @@ describe('Integration | coreHandlers | handleAfterSendEvent', () => {
     }
 
     expect(Array.from(replay.getContext().errorIds)).toEqual([]);
-    expect(Array.from(replay.getContext().traceIds)).toEqual(
+    // traceIds is now a Set of [timestamp, trace_id] tuples
+    const traceIds = Array.from(replay.getContext().traceIds);
+    expect(traceIds).toHaveLength(100);
+    // Check that all trace IDs are present
+    expect(traceIds.map(([_timestamp, traceId]) => traceId)).toEqual(
       Array(100)
         .fill(undefined)
         .map((_, i) => `tr-${i}`),
     );
+    // Check that all tuples have timestamps
+    traceIds.forEach(([timestamp, _traceId]) => {
+      expect(typeof timestamp).toBe('number');
+      expect(timestamp).toBeGreaterThan(0);
+    });
   });
 
   it('flushes when in buffer mode', async () => {