ref(replay): Hide internal replay tracing behind experiments flag (#6487)

Author: mydea

packages/replay/src/coreHandlers/handleFetch.ts

@@ -1,7 +1,7 @@
 import type { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import type { ReplayContainer } from '../types';
 import { createPerformanceSpans } from '../util/createPerformanceSpans';
-import { isIngestHost } from '../util/isIngestHost';
+import { shouldFilterRequest } from '../util/shouldFilterRequest';
 
 interface FetchHandlerData {
   args: Parameters<typeof fetch>;
@@ -28,11 +28,6 @@ export function handleFetch(handlerData: FetchHandlerData): null | ReplayPerform
 
   const { startTimestamp, endTimestamp, fetchData, response } = handlerData;
 
-  // Do not capture fetches to Sentry ingestion endpoint
-  if (isIngestHost(fetchData.url)) {
-    return null;
-  }
-
   return {
     type: 'resource.fetch',
     start: startTimestamp / 1000,
@@ -60,6 +55,10 @@ export function handleFetchSpanListener(replay: ReplayContainer): (handlerData:
       return;
     }
 
+    if (shouldFilterRequest(replay, result.name)) {
+      return;
+    }
+
     replay.addUpdate(() => {
       createPerformanceSpans(replay, [result]);
       // Returning true will cause `addUpdate` to not flush

packages/replay/src/coreHandlers/handleGlobalEvent.ts

@@ -1,8 +1,8 @@
+import { addBreadcrumb } from '@sentry/core';
 import { Event } from '@sentry/types';
 
 import { REPLAY_EVENT_NAME, UNABLE_TO_SEND_REPLAY } from '../constants';
 import type { ReplayContainer } from '../types';
-import { addInternalBreadcrumb } from '../util/addInternalBreadcrumb';
 
 /**
  * Returns a listener to be added to `addGlobalEventProcessor(listener)`.
@@ -39,11 +39,13 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
     }
 
     const exc = event.exception?.values?.[0];
-    addInternalBreadcrumb({
-      message: `Tagging event (${event.event_id}) - ${event.message} - ${exc?.type || 'Unknown'}: ${
-        exc?.value || 'n/a'
-      }`,
-    });
+    if (__DEBUG_BUILD__ && replay.getOptions()._experiments?.traceInternals) {
+      addInternalBreadcrumb({
+        message: `Tagging event (${event.event_id}) - ${event.message} - ${exc?.type || 'Unknown'}: ${
+          exc?.value || 'n/a'
+        }`,
+      });
+    }
 
     // Need to be very careful that this does not cause an infinite loop
     if (
@@ -70,3 +72,14 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
     return event;
   };
 }
+
+function addInternalBreadcrumb(arg: Parameters<typeof addBreadcrumb>[0]): void {
+  const { category, level, message, ...rest } = arg;
+
+  addBreadcrumb({
+    category: category || 'console',
+    level: level || 'debug',
+    message: `[debug]: ${message}`,
+    ...rest,
+  });
+}

packages/replay/src/coreHandlers/handleXhr.ts

@@ -1,7 +1,7 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import type { ReplayContainer } from '../types';
 import { createPerformanceSpans } from '../util/createPerformanceSpans';
-import { isIngestHost } from '../util/isIngestHost';
+import { shouldFilterRequest } from '../util/shouldFilterRequest';
 
 // From sentry-javascript
 // e.g. https://github.com/getsentry/sentry-javascript/blob/c7fc025bf9fa8c073fdb56351808ce53909fbe45/packages/utils/src/instrument.ts#L180
@@ -47,8 +47,7 @@ function handleXhr(handlerData: XhrHandlerData): ReplayPerformanceEntry | null {
 
   const { method, url, status_code: statusCode } = handlerData.xhr.__sentry_xhr__ || {};
 
-  // Do not capture fetches to Sentry ingestion endpoint
-  if (url === undefined || isIngestHost(url)) {
+  if (url === undefined) {
     return null;
   }
 
@@ -79,6 +78,10 @@ export function handleXhrSpanListener(replay: ReplayContainer): (handlerData: Xh
       return;
     }
 
+    if (shouldFilterRequest(replay, result.name)) {
+      return;
+    }
+
     replay.addUpdate(() => {
       createPerformanceSpans(replay, [result]);
       // Returning true will cause `addUpdate` to not flush

packages/replay/src/createPerformanceEntry.ts

@@ -3,7 +3,6 @@ import { record } from 'rrweb';
 
 import { WINDOW } from './constants';
 import type { AllPerformanceEntry, PerformanceNavigationTiming, PerformancePaintTiming } from './types';
-import { isIngestHost } from './util/isIngestHost';
 
 export interface ReplayPerformanceEntry {
   /**
@@ -110,11 +109,6 @@ function createNavigationEntry(entry: PerformanceNavigationTiming) {
 function createResourceEntry(entry: PerformanceResourceTiming) {
   const { entryType, initiatorType, name, responseEnd, startTime, encodedBodySize, transferSize } = entry;
 
-  // Do not capture fetches to Sentry ingestion endpoint
-  if (isIngestHost(name)) {
-    return null;
-  }
-
   // Core SDK handles these
   if (['fetch', 'xmlhttprequest'].includes(initiatorType)) {
     return null;

packages/replay/src/replay.ts

@@ -75,9 +75,9 @@ export class ReplayContainer implements ReplayContainerInterface {
   /**
    * Options to pass to `rrweb.record()`
    */
-  readonly recordingOptions: RecordingOptions;
+  private readonly _recordingOptions: RecordingOptions;
 
-  readonly options: ReplayPluginOptions;
+  private readonly _options: ReplayPluginOptions;
 
   private _performanceObserver: PerformanceObserver | null = null;
 
@@ -125,11 +125,11 @@ export class ReplayContainer implements ReplayContainerInterface {
   };
 
   constructor({ options, recordingOptions }: { options: ReplayPluginOptions; recordingOptions: RecordingOptions }) {
-    this.recordingOptions = recordingOptions;
-    this.options = options;
+    this._recordingOptions = recordingOptions;
+    this._options = options;
 
-    this._debouncedFlush = debounce(() => this.flush(), this.options.flushMinDelay, {
-      maxWait: this.options.flushMaxDelay,
+    this._debouncedFlush = debounce(() => this.flush(), this._options.flushMinDelay, {
+      maxWait: this._options.flushMaxDelay,
     });
   }
 
@@ -148,6 +148,11 @@ export class ReplayContainer implements ReplayContainerInterface {
     return this._isPaused;
   }
 
+  /** Get the replay integration options. */
+  public getOptions(): ReplayPluginOptions {
+    return this._options;
+  }
+
   /**
    * Initializes the plugin.
    *
@@ -183,7 +188,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this.updateSessionActivity();
 
     this.eventBuffer = createEventBuffer({
-      useCompression: Boolean(this.options.useCompression),
+      useCompression: Boolean(this._options.useCompression),
     });
 
     this.addListeners();
@@ -201,7 +206,7 @@ export class ReplayContainer implements ReplayContainerInterface {
   startRecording(): void {
     try {
       this._stopRecording = record({
-        ...this.recordingOptions,
+        ...this._recordingOptions,
         // When running in error sampling mode, we need to overwrite `checkoutEveryNth`
         // Without this, it would record forever, until an error happens, which we don't want
         // instead, we'll always keep the last 60 seconds of replay before an error happened
@@ -275,7 +280,7 @@ export class ReplayContainer implements ReplayContainerInterface {
   handleException(error: unknown): void {
     __DEBUG_BUILD__ && logger.error('[Replay]', error);
 
-    if (this.options._experiments && this.options._experiments.captureExceptions) {
+    if (__DEBUG_BUILD__ && this._options._experiments && this._options._experiments.captureExceptions) {
       captureException(error);
     }
   }
@@ -297,10 +302,10 @@ export class ReplayContainer implements ReplayContainerInterface {
   loadSession({ expiry }: { expiry: number }): void {
     const { type, session } = getSession({
       expiry,
-      stickySession: Boolean(this.options.stickySession),
+      stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
-      sessionSampleRate: this.options.sessionSampleRate,
-      errorSampleRate: this.options.errorSampleRate,
+      sessionSampleRate: this._options.sessionSampleRate,
+      errorSampleRate: this._options.errorSampleRate,
     });
 
     // If session was newly created (i.e. was not loaded from storage), then
@@ -482,7 +487,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // a previous session ID. In this case, we want to buffer events
       // for a set amount of time before flushing. This can help avoid
       // capturing replays of users that immediately close the window.
-      setTimeout(() => this.conditionalFlush(), this.options.initialFlushDelay);
+      setTimeout(() => this.conditionalFlush(), this._options.initialFlushDelay);
 
       // Cancel any previously debounced flushes to ensure there are no [near]
       // simultaneous flushes happening. The latter request should be
@@ -955,8 +960,8 @@ export class ReplayContainer implements ReplayContainerInterface {
 
           preparedEvent.tags = {
             ...preparedEvent.tags,
-            sessionSampleRate: this.options.sessionSampleRate,
-            errorSampleRate: this.options.errorSampleRate,
+            sessionSampleRate: this._options.sessionSampleRate,
+            errorSampleRate: this._options.errorSampleRate,
             replayType: this.session?.sampled,
           };
 
@@ -1061,7 +1066,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
   /** Save the session, if it is sticky */
   private _maybeSaveSession(): void {
-    if (this.session && this.options.stickySession) {
+    if (this.session && this._options.stickySession) {
       saveSession(this.session);
     }
   }

packages/replay/src/types.ts

@@ -115,7 +115,10 @@ export interface ReplayPluginOptions extends SessionOptions {
    *
    * Default: undefined
    */
-  _experiments?: Partial<{ captureExceptions: boolean }>;
+  _experiments?: Partial<{
+    captureExceptions: boolean;
+    traceInternals: boolean;
+  }>;
 }
 
 // These are optional for ReplayPluginOptions because the plugin sets default values
@@ -230,4 +233,5 @@ export interface ReplayContainer {
   flushImmediate(): void;
   triggerUserActivity(): void;
   addUpdate(cb: AddUpdateCallback): void;
+  getOptions(): ReplayPluginOptions;
 }

packages/replay/src/util/addInternalBreadcrumb.ts

@@ -0,0 +1,23 @@
+import { getCurrentHub } from '@sentry/core';
+
+import type { ReplayContainer } from '../types';
+
+/**
+ * Check whether a given request URL should be filtered out.
+ */
+export function shouldFilterRequest(replay: ReplayContainer, url: string): boolean {
+  // If we enabled the `traceInternals` experiment, we want to trace everything
+  if (__DEBUG_BUILD__ && replay.getOptions()._experiments?.traceInternals) {
+    return false;
+  }
+
+  return !_isSentryRequest(url);
+}
+
+/**
+ * Checks wether a given URL belongs to the configured Sentry DSN.
+ */
+function _isSentryRequest(url: string): boolean {
+  const dsn = getCurrentHub().getClient()?.getDsn();
+  return dsn ? url.includes(dsn.host) : false;
+}