feat(browser): Detect redirects when emitting navigation spans

Author: mydea

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -4,6 +4,7 @@ import {
   addNonEnumerableProperty,
   browserPerformanceTimeOrigin,
   consoleSandbox,
+  dateTimestampInSeconds,
   generateTraceId,
   getClient,
   getCurrentScope,
@@ -21,6 +22,8 @@ import {
   spanIsSampled,
   spanToJSON,
   startIdleSpan,
+  startInactiveSpan,
+  timestampInSeconds,
   TRACING_DEFAULTS,
 } from '@sentry/core';
 import {
@@ -145,6 +148,14 @@ export interface BrowserTracingOptions {
    */
   enableHTTPTimings: boolean;
 
+  /**
+   * By default, the SDK will try to detect redirects and avoid creating separate spans for them.
+   * If you want to opt-out of this behavior, you can set this option to `false`.
+   *
+   * Default: true
+   */
+  detectRedirects: boolean;
+
   /**
    * Link the currently started trace to a previous trace (e.g. a prior pageload, navigation or
    * manually started span). When enabled, this option will allow you to navigate between traces
@@ -227,6 +238,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
   enableLongTask: true,
   enableLongAnimationFrame: true,
   enableInp: true,
+  detectRedirects: true,
   linkPreviousTrace: 'in-memory',
   consistentTraceSampling: false,
   _experiments: {},
@@ -279,6 +291,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     enableHTTPTimings,
     instrumentPageLoad,
     instrumentNavigation,
+    detectRedirects,
     linkPreviousTrace,
     consistentTraceSampling,
     onRequestSpanStart,
@@ -313,8 +326,14 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     source: undefined,
   };
 
+  let lastClickTimestamp: number | undefined;
+
+  if (detectRedirects) {
+    addEventListener('click', () => (lastClickTimestamp = timestampInSeconds()), { capture: true, passive: true });
+  }
+
   /** Create routing idle transaction. */
-  function _createRouteSpan(client: Client, startSpanOptions: StartSpanOptions): void {
+  function _createRouteSpan(client: Client, startSpanOptions: StartSpanOptions, makeActive = true): void {
     const isPageloadTransaction = startSpanOptions.op === 'pageload';
 
     const finalStartSpanOptions: StartSpanOptions = beforeStartSpan
@@ -330,6 +349,16 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       finalStartSpanOptions.attributes = attributes;
     }
 
+    if (!makeActive) {
+      // We want to ensure this has 0s duration
+      const now = dateTimestampInSeconds();
+      startInactiveSpan({
+        ...finalStartSpanOptions,
+        startTime: now,
+      }).end(now);
+      return;
+    }
+
     latestRoute.name = finalStartSpanOptions.name;
     latestRoute.source = attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
 
@@ -342,6 +371,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       beforeSpanEnd: span => {
         _collectWebVitals();
         addPerformanceEntries(span, { recordClsOnPageloadSpan: !enableStandaloneClsSpans });
+
         setActiveIdleSpan(client, undefined);
 
         // A trace should stay consistent over the entire timespan of one route - even after the pageload/navigation ended.
@@ -397,6 +427,20 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
           return;
         }
 
+        const activeSpan = getActiveIdleSpan(client);
+        if (detectRedirects && activeSpan && isRedirect(activeSpan, lastClickTimestamp)) {
+          DEBUG_BUILD && logger.warn('[Tracing] Detected redirect, navigation span will not be the root span.');
+          _createRouteSpan(
+            client,
+            {
+              op: 'navigation.redirect',
+              ...startSpanOptions,
+            },
+            false,
+          );
+          return;
+        }
+
         maybeEndActiveSpan();
 
         getIsolationScope().setPropagationContext({ traceId: generateTraceId(), sampleRand: Math.random() });
@@ -621,7 +665,7 @@ function registerInteractionListener(
   };
 
   if (optionalWindowDocument) {
-    addEventListener('click', registerInteractionTransaction, { once: false, capture: true });
+    addEventListener('click', registerInteractionTransaction, { capture: true });
   }
 }
 
@@ -634,3 +678,27 @@ function getActiveIdleSpan(client: Client): Span | undefined {
 function setActiveIdleSpan(client: Client, span: Span | undefined): void {
   addNonEnumerableProperty(client, ACTIVE_IDLE_SPAN_PROPERTY, span);
 }
+
+// The max. time in ms between two pageload/navigation spans that makes us consider the second one a redirect
+const REDIRECT_THRESHOLD = 300;
+
+function isRedirect(activeSpan: Span, lastClickTimestamp: number | undefined): boolean {
+  const spanData = spanToJSON(activeSpan);
+
+  const now = dateTimestampInSeconds();
+
+  // More than 500ms since last navigation/pageload span?
+  // --> never consider this a redirect
+  const startTimestamp = spanData.start_timestamp;
+  if (now - startTimestamp > REDIRECT_THRESHOLD) {
+    return false;
+  }
+
+  // More than 500ms since last click?
+  // --> never consider this a redirect
+  if (lastClickTimestamp && now - lastClickTimestamp > REDIRECT_THRESHOLD) {
+    return false;
+  }
+
+  return true;
+}