ref(browser): Improve active span handling for browserTracingIntegration

Author: mydea

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -16,9 +16,9 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   TRACING_DEFAULTS,
+  addNonEnumerableProperty,
   browserPerformanceTimeOrigin,
   generateTraceId,
-  getActiveSpan,
   getClient,
   getCurrentScope,
   getDynamicSamplingContextFromSpan,
@@ -246,7 +246,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
   };
 
   /** Create routing idle transaction. */
-  function _createRouteSpan(client: Client, startSpanOptions: StartSpanOptions): Span {
+  function _createRouteSpan(client: Client, startSpanOptions: StartSpanOptions): void {
     const isPageloadTransaction = startSpanOptions.op === 'pageload';
 
     const finalStartSpanOptions: StartSpanOptions = beforeStartSpan
@@ -291,7 +291,8 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       emitFinish();
     }
 
-    return idleSpan;
+    // A trace should to stay the consistent over the entire time span of one route.
+    setActiveIdleSpan(client, idleSpan);
   }
 
   return {
@@ -315,7 +316,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 
         maybeEndActiveSpan();
 
-        activeSpan = _createRouteSpan(client, {
+        _createRouteSpan(client, {
           op: 'navigation',
           ...startSpanOptions,
         });
@@ -333,7 +334,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         const propagationContext = propagationContextFromHeaders(sentryTrace, baggage);
         getCurrentScope().setPropagationContext(propagationContext);
 
-        activeSpan = _createRouteSpan(client, {
+        _createRouteSpan(client, {
           op: 'pageload',
           ...startSpanOptions,
         });
@@ -408,7 +409,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       }
 
       if (enableInteractions) {
-        registerInteractionListener(idleTimeout, finalTimeout, childSpanTimeout, latestRoute);
+        registerInteractionListener(client, idleTimeout, finalTimeout, childSpanTimeout, latestRoute);
       }
 
       if (enableInp) {
@@ -440,12 +441,9 @@ export function startBrowserTracingPageLoadSpan(
   traceOptions?: { sentryTrace?: string | undefined; baggage?: string | undefined },
 ): Span | undefined {
   client.emit('startPageLoadSpan', spanOptions, traceOptions);
-
   getCurrentScope().setTransactionName(spanOptions.name);
 
-  const span = getActiveSpan();
-  const op = span && spanToJSON(span).op;
-  return op === 'pageload' ? span : undefined;
+  return getActiveIdleSpan(client);
 }
 
 /**
@@ -460,9 +458,7 @@ export function startBrowserTracingNavigationSpan(client: Client, spanOptions: S
 
   getCurrentScope().setTransactionName(spanOptions.name);
 
-  const span = getActiveSpan();
-  const op = span && spanToJSON(span).op;
-  return op === 'navigation' ? span : undefined;
+  return getActiveIdleSpan(client);
 }
 
 /** Returns the value of a meta tag */
@@ -479,6 +475,7 @@ export function getMetaContent(metaName: string): string | undefined {
 
 /** Start listener for interaction transactions */
 function registerInteractionListener(
+  client: Client,
   idleTimeout: BrowserTracingOptions['idleTimeout'],
   finalTimeout: BrowserTracingOptions['finalTimeout'],
   childSpanTimeout: BrowserTracingOptions['childSpanTimeout'],
@@ -494,8 +491,7 @@ function registerInteractionListener(
   const registerInteractionTransaction = (): void => {
     const op = 'ui.action.click';
 
-    const activeSpan = getActiveSpan();
-    const rootSpan = activeSpan && getRootSpan(activeSpan);
+    const rootSpan = getActiveIdleSpan(client);
     if (rootSpan) {
       const currentRootSpanOp = spanToJSON(rootSpan).op;
       if (['navigation', 'pageload'].includes(currentRootSpanOp as string)) {
@@ -536,3 +532,13 @@ function registerInteractionListener(
     addEventListener('click', registerInteractionTransaction, { once: false, capture: true });
   }
 }
+
+// We store the active idle span on the client object, so we can access it from exported functions
+const ACTIVE_IDLE_SPAN_PROPERTY = '_sentry_idleSpan';
+function getActiveIdleSpan(client: Client): Span | undefined {
+  return (client as { [ACTIVE_IDLE_SPAN_PROPERTY]?: Span })[ACTIVE_IDLE_SPAN_PROPERTY];
+}
+
+function setActiveIdleSpan(client: Client, span: Span): void {
+  addNonEnumerableProperty(client, ACTIVE_IDLE_SPAN_PROPERTY, span);
+}