keep most recent trace id, use the current trace id if no transaction event

Author: billyvg

dev-packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -7,8 +7,10 @@ const DEFAULT_REPLAY_EVENT = {
   type: 'replay_event',
   timestamp: expect.any(Number),
   error_ids: [],
-  trace_ids: [],
-  traces_by_timestamp: [],
+  trace_ids: [expect.any(String)],
+  traces_by_timestamp: [
+    [expect.any(Number), expect.any(String)],
+  ],
   urls: [expect.stringContaining('/index.html')],
   replay_id: expect.stringMatching(/\w{32}/),
   replay_start_timestamp: expect.any(Number),

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 && event.timestamp && replayContext.traceIds.size < 100) {
-    replayContext.traceIds.add([event.timestamp, event.contexts.trace.trace_id]);
+  if (event.contexts?.trace?.trace_id && event.start_timestamp && replayContext.traceIds.length < 100) {
+    replayContext.traceIds.push([event.start_timestamp, event.contexts.trace.trace_id]);
   }
 }
 

packages/replay-internal/src/replay.ts

@@ -1,6 +1,13 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import type { ReplayRecordingMode, Span } from '@sentry/core';
-import { getActiveSpan, getClient, getRootSpan, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, spanToJSON } from '@sentry/core';
+import {
+  getActiveSpan,
+  getClient,
+  getCurrentScope,
+  getRootSpan,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  spanToJSON,
+} from '@sentry/core';
 import { EventType, record } from '@sentry-internal/rrweb';
 import {
   BUFFER_CHECKOUT_TIME,
@@ -192,7 +199,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this._hasInitializedCoreListeners = false;
     this._context = {
       errorIds: new Set(),
-      traceIds: new Set(),
+      traceIds: [],
       urls: [],
       initialTimestamp: Date.now(),
       initialUrl: '',
@@ -1098,7 +1105,11 @@ export class ReplayContainer implements ReplayContainerInterface {
   private _clearContext(): void {
     // XXX: `initialTimestamp` and `initialUrl` do not get cleared
     this._context.errorIds.clear();
-    this._context.traceIds.clear();
+    // We want to preserve the most recent trace id for the next replay segment.
+    // This is so that we can associate replay events w/ the trace.
+    if (this._context.traceIds.length > 1) {
+      this._context.traceIds = this._context.traceIds.slice(-1);
+    }
     this._context.urls = [];
   }
 
@@ -1126,11 +1137,17 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Return and clear _context
    */
   private _popEventContext(): PopEventContext {
+    if (this._context.traceIds.length === 0) {
+      const currentTraceId = getCurrentScope().getPropagationContext().traceId;
+      if (currentTraceId) {
+        this._context.traceIds.push([-1, currentTraceId]);
+      }
+    }
     const _context = {
       initialTimestamp: this._context.initialTimestamp,
       initialUrl: this._context.initialUrl,
       errorIds: Array.from(this._context.errorIds),
-      traceIds: Array.from(this._context.traceIds),
+      traceIds: this._context.traceIds,
       urls: this._context.urls,
     };
 

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

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

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

@@ -37,13 +37,14 @@ export async function sendReplayRequest({
     return Promise.resolve({});
   }
 
+  const uniqueTraceIds = Array.from(new Set(traceIds.map(([_ts, traceId]) => traceId)));
   const baseEvent: ReplayEvent = {
     type: REPLAY_EVENT_NAME,
     replay_start_timestamp: initialTimestamp / 1000,
     timestamp: timestamp / 1000,
     error_ids: errorIds,
-    trace_ids: traceIds.map(([_ts, traceId]) => traceId),
-    traces_by_timestamp: traceIds.map(([ts, traceId]) => [ts, traceId]),
+    trace_ids: uniqueTraceIds,
+    traces_by_timestamp: traceIds.filter(([_ts, traceId]) => uniqueTraceIds.includes(traceId)).map(([ts, traceId]) => [ts, traceId]),
     urls,
     replay_id: replayId,
     segment_id,