ref(tracing): Extract propagation context from meta tags (#8430)

This PR makes sure the `BrowserTracing` integration updates the
propagation context based on meta tags. To ensure we don't keep the same
propagation context, we continuously update it every time a route change
should happen (navigation).

Author: AbhiPrasad

packages/tracing-internal/src/browser/browsertracing.ts

@@ -1,14 +1,8 @@
 /* eslint-disable max-lines */
 import type { Hub, IdleTransaction } from '@sentry/core';
-import {
-  addTracingExtensions,
-  extractTraceparentData,
-  getActiveTransaction,
-  startIdleTransaction,
-  TRACING_DEFAULTS,
-} from '@sentry/core';
+import { addTracingExtensions, getActiveTransaction, startIdleTransaction, TRACING_DEFAULTS } from '@sentry/core';
 import type { EventProcessor, Integration, Transaction, TransactionContext, TransactionSource } from '@sentry/types';
-import { baggageHeaderToDynamicSamplingContext, getDomElement, logger } from '@sentry/utils';
+import { getDomElement, logger, tracingContextFromHeaders } from '@sentry/utils';
 
 import { registerBackgroundTabDetection } from './backgroundtab';
 import {
@@ -297,24 +291,25 @@ export class BrowserTracing implements Integration {
       return undefined;
     }
 
+    const hub = this._getCurrentHub();
+
     const { beforeNavigate, idleTimeout, finalTimeout, heartbeatInterval } = this.options;
 
     const isPageloadTransaction = context.op === 'pageload';
 
-    const sentryTraceMetaTagValue = isPageloadTransaction ? getMetaContent('sentry-trace') : null;
-    const baggageMetaTagValue = isPageloadTransaction ? getMetaContent('baggage') : null;
-
-    const traceParentData = sentryTraceMetaTagValue ? extractTraceparentData(sentryTraceMetaTagValue) : undefined;
-    const dynamicSamplingContext = baggageMetaTagValue
-      ? baggageHeaderToDynamicSamplingContext(baggageMetaTagValue)
-      : undefined;
+    const sentryTrace = isPageloadTransaction ? getMetaContent('sentry-trace') : '';
+    const baggage = isPageloadTransaction ? getMetaContent('baggage') : '';
+    const { traceparentData, dynamicSamplingContext, propagationContext } = tracingContextFromHeaders(
+      sentryTrace,
+      baggage,
+    );
 
     const expandedContext: TransactionContext = {
       ...context,
-      ...traceParentData,
+      ...traceparentData,
       metadata: {
         ...context.metadata,
-        dynamicSamplingContext: traceParentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,
+        dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,
       },
       trimEnd: true,
     };
@@ -341,7 +336,6 @@ export class BrowserTracing implements Integration {
 
     __DEBUG_BUILD__ && logger.log(`[Tracing] Starting ${finalContext.op} transaction on scope`);
 
-    const hub = this._getCurrentHub();
     const { location } = WINDOW;
 
     const idleTransaction = startIdleTransaction(
@@ -353,6 +347,24 @@ export class BrowserTracing implements Integration {
       { location }, // for use in the tracesSampler
       heartbeatInterval,
     );
+
+    const scope = hub.getScope();
+
+    // If it's a pageload and there is a meta tag set
+    // use the traceparentData as the propagation context
+    if (isPageloadTransaction && traceparentData) {
+      scope.setPropagationContext(propagationContext);
+    } else {
+      // Navigation transactions should set a new propagation context based on the
+      // created idle transaction.
+      scope.setPropagationContext({
+        traceId: idleTransaction.traceId,
+        spanId: idleTransaction.spanId,
+        parentSpanId: idleTransaction.parentSpanId,
+        sampled: !!idleTransaction.sampled,
+      });
+    }
+
     idleTransaction.registerBeforeFinishCallback(transaction => {
       this._collectWebVitals();
       addPerformanceEntries(transaction);
@@ -424,11 +436,11 @@ export class BrowserTracing implements Integration {
 }
 
 /** Returns the value of a meta tag */
-export function getMetaContent(metaName: string): string | null {
+export function getMetaContent(metaName: string): string | undefined {
   // Can't specify generic to `getDomElement` because tracing can be used
   // in a variety of environments, have to disable `no-unsafe-member-access`
   // as a result.
   const metaTag = getDomElement(`meta[name=${metaName}]`);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  return metaTag ? metaTag.getAttribute('content') : null;
+  return metaTag ? metaTag.getAttribute('content') : undefined;
 }

packages/tracing-internal/src/browser/request.ts

@@ -214,7 +214,7 @@ export function shouldAttachHeaders(url: string, tracePropagationTargets: (strin
  *
  * @returns Span if a span was created, otherwise void.
  */
-function fetchCallback(
+export function fetchCallback(
   handlerData: FetchData,
   shouldCreateSpan: (url: string) => boolean,
   shouldAttachHeaders: (url: string) => boolean,
@@ -364,7 +364,7 @@ export function addTracingHeadersToFetchRequest(
  *
  * @returns Span if a span was created, otherwise void.
  */
-function xhrCallback(
+export function xhrCallback(
   handlerData: XHRData,
   shouldCreateSpan: (url: string) => boolean,
   shouldAttachHeaders: (url: string) => boolean,

packages/tracing-internal/test/browser/browsertracing.test.ts

@@ -94,7 +94,6 @@ describe('BrowserTracing', () => {
     const browserTracing = createBrowserTracing();
 
     expect(browserTracing.options).toEqual({
-      _experiments: {},
       enableLongTask: true,
       ...TRACING_DEFAULTS,
       markBackgroundTransactions: true,
@@ -113,16 +112,16 @@ describe('BrowserTracing', () => {
     });
 
     expect(browserTracing.options).toEqual({
-      _experiments: {
-        enableLongTask: false,
-      },
       enableLongTask: false,
       ...TRACING_DEFAULTS,
       markBackgroundTransactions: true,
       routingInstrumentation: instrumentRoutingWithDefaults,
       startTransactionOnLocationChange: true,
       startTransactionOnPageLoad: true,
       ...defaultRequestInstrumentationOptions,
+      _experiments: {
+        enableLongTask: false,
+      },
     });
   });
 
@@ -132,7 +131,6 @@ describe('BrowserTracing', () => {
     });
 
     expect(browserTracing.options).toEqual({
-      _experiments: {},
       enableLongTask: false,
       ...TRACING_DEFAULTS,
       markBackgroundTransactions: true,
@@ -248,6 +246,7 @@ describe('BrowserTracing', () => {
           traceFetch: true,
           traceXHR: true,
           tracePropagationTargets: ['something'],
+          _experiments: {},
         });
       });
 
@@ -261,6 +260,7 @@ describe('BrowserTracing', () => {
         });
 
         expect(instrumentOutgoingRequestsMock).toHaveBeenCalledWith({
+          _experiments: {},
           traceFetch: true,
           traceXHR: true,
           tracePropagationTargets: ['something-else'],
@@ -546,7 +546,7 @@ describe('BrowserTracing', () => {
         document.head.innerHTML = '<meta name="cat-cafe">';
 
         const metaTagValue = getMetaContent('dogpark');
-        expect(metaTagValue).toBe(null);
+        expect(metaTagValue).toBe(undefined);
       });
 
       it('can pick the correct tag out of multiple options', () => {

packages/tracing-internal/test/browser/metrics/index.test.ts

@@ -14,6 +14,7 @@ describe('_addMeasureSpans', () => {
       name: 'measure-1',
       duration: 10,
       startTime: 12,
+      detail: undefined,
     };
 
     const timeOrigin = 100;

packages/tracing-internal/test/browser/request.test.ts

@@ -240,6 +240,7 @@ describe('callbacks', () => {
       expect(finishedSpan.data).toEqual({
         'http.response_content_length': 123,
         'http.method': 'GET',
+        'http.response.status_code': 404,
         type: 'fetch',
         url: 'http://dogs.are.great/',
       });

packages/tracing-internal/test/browser/router.test.ts

@@ -46,6 +46,7 @@ describe('instrumentRoutingWithDefaults', () => {
       name: 'blank',
       op: 'pageload',
       metadata: { source: 'url' },
+      startTimestamp: expect.any(Number),
     });
   });