add tracestate <meta> tag handling

Author: lobsterkatie

packages/tracing/src/browser/browsertracing.ts

@@ -5,7 +5,7 @@ import { getGlobalObject, logger } from '@sentry/utils';
 import { startIdleTransaction } from '../hubextensions';
 import { DEFAULT_IDLE_TIMEOUT, IdleTransaction } from '../idletransaction';
 import { SpanStatus } from '../spanstatus';
-import { extractSentrytraceData, secToMs } from '../utils';
+import { extractSentrytraceData, extractTracestateData, secToMs } from '../utils';
 import { registerBackgroundTabDetection } from './backgroundtab';
 import { MetricsInstrumentation } from './metrics';
 import {
@@ -191,7 +191,7 @@ export class BrowserTracing implements Integration {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const { beforeNavigate, idleTimeout, maxTransactionDuration } = this.options;
 
-    const parentContextFromHeader = context.op === 'pageload' ? getHeaderContext() : undefined;
+    const parentContextFromHeader = context.op === 'pageload' ? extractTraceDataFromMetaTags() : undefined;
 
     const expandedContext = {
       ...context,
@@ -230,14 +230,22 @@ export class BrowserTracing implements Integration {
 }
 
 /**
- * Gets transaction context from a sentry-trace meta.
+ * Gets transaction context data from `sentry-trace` and `tracestate` <meta> tags.
  *
- * @returns Transaction context data from the header or undefined if there's no header or the header is malformed
+ * @returns Transaction context data or undefined neither tag exists or has valid data
  */
-export function getHeaderContext(): Partial<TransactionContext> | undefined {
-  const header = getMetaContent('sentry-trace');
-  if (header) {
-    return extractSentrytraceData(header);
+export function extractTraceDataFromMetaTags(): Partial<TransactionContext> | undefined {
+  const sentrytraceValue = getMetaContent('sentry-trace');
+  const tracestateValue = getMetaContent('tracestate');
+
+  const sentrytraceData = sentrytraceValue ? extractSentrytraceData(sentrytraceValue) : undefined;
+  const tracestateData = tracestateValue ? extractTracestateData(tracestateValue) : undefined;
+
+  if (sentrytraceData || tracestateData?.sentry || tracestateData?.thirdparty) {
+    return {
+      ...sentrytraceData,
+      ...(tracestateData && { metadata: { tracestate: tracestateData } }),
+    };
   }
 
   return undefined;

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

@@ -8,7 +8,7 @@ import {
   BrowserTracing,
   BrowserTracingOptions,
   DEFAULT_MAX_TRANSACTION_DURATION_SECONDS,
-  getHeaderContext,
+  extractTraceDataFromMetaTags,
   getMetaContent,
 } from '../../src/browser/browsertracing';
 import { defaultRequestInstrumentationOptions } from '../../src/browser/request';
@@ -209,20 +209,23 @@ describe('BrowserTracing', () => {
       });
     });
 
-    it('sets transaction context from sentry-trace header', () => {
-      const name = 'sentry-trace';
-      const content = '126de09502ae4e0fb26c6967190756a4-b6e54397b12a2a0f-1';
-      document.head.innerHTML = `<meta name="${name}" content="${content}">`;
+    it('sets transaction context from <meta> tag data', () => {
+      document.head.innerHTML =
+        `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0"> ` +
+        `<meta name="tracestate" content="sentry=doGsaREgReaT,maisey=silly,charlie=goofy">`;
+
       const startIdleTransaction = jest.spyOn(hubExtensions, 'startIdleTransaction');
 
       createBrowserTracing(true, { routingInstrumentation: customRoutingInstrumentation });
 
       expect(startIdleTransaction).toHaveBeenCalledWith(
+        // because `startIdleTransaction` uses positional arguments, we have to include placeholders for all of them
         expect.any(Object),
         expect.objectContaining({
-          traceId: '126de09502ae4e0fb26c6967190756a4',
-          parentSpanId: 'b6e54397b12a2a0f',
-          parentSampled: true,
+          traceId: '12312012123120121231201212312012',
+          parentSpanId: '1121201211212012',
+          parentSampled: false,
+          metadata: { tracestate: { sentry: 'sentry=doGsaREgReaT', thirdparty: 'maisey=silly,charlie=goofy' } },
         }),
         expect.any(Number),
         expect.any(Boolean),
@@ -354,7 +357,7 @@ describe('BrowserTracing', () => {
     });
   });
 
-  describe('sentry-trace <meta> element', () => {
+  describe('sentry-trace/tracestate <meta> tags', () => {
     describe('getMetaContent', () => {
       it('finds the specified tag and extracts the value', () => {
         const name = 'sentry-trace';
@@ -384,39 +387,37 @@ describe('BrowserTracing', () => {
       });
     });
 
-    describe('getHeaderContext', () => {
-      it('correctly parses a valid sentry-trace meta header', () => {
-        document.head.innerHTML = `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0">`;
-
-        const headerContext = getHeaderContext();
-
-        expect(headerContext).toBeDefined();
-        expect(headerContext!.traceId).toEqual('12312012123120121231201212312012');
-        expect(headerContext!.parentSpanId).toEqual('1121201211212012');
-        expect(headerContext!.parentSampled).toEqual(false);
-      });
-
-      it('returns undefined if the header is malformed', () => {
-        document.head.innerHTML = `<meta name="sentry-trace" content="12312012-112120121-0">`;
+    describe('extractTraceDataFromMetaTags', () => {
+      it('correctly captures both sentry-trace and tracestate data', () => {
+        document.head.innerHTML =
+          `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0"> ` +
+          `<meta name="tracestate" content="sentry=doGsaREgReaT,maisey=silly,charlie=goofy">`;
 
-        const headerContext = getHeaderContext();
+        const headerContext = extractTraceDataFromMetaTags();
 
-        expect(headerContext).toBeUndefined();
+        expect(headerContext).toEqual({
+          traceId: '12312012123120121231201212312012',
+          parentSpanId: '1121201211212012',
+          parentSampled: false,
+          metadata: { tracestate: { sentry: 'sentry=doGsaREgReaT', thirdparty: 'maisey=silly,charlie=goofy' } },
+        });
       });
 
-      it("returns undefined if the header isn't there", () => {
-        document.head.innerHTML = `<meta name="dogs" content="12312012123120121231201212312012-1121201211212012-0">`;
+      it('returns undefined if neither tag is there', () => {
+        document.head.innerHTML = `<meta name="cory" content="loyal"> <meta name="bodhi" content="floppy">`;
 
-        const headerContext = getHeaderContext();
+        const headerContext = extractTraceDataFromMetaTags();
 
         expect(headerContext).toBeUndefined();
       });
     });
 
-    describe('using the data', () => {
+    describe('using <meta> tag data', () => {
       it('uses the data for pageload transactions', () => {
         // make sampled false here, so we can see that it's being used rather than the tracesSampleRate-dictated one
-        document.head.innerHTML = `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0">`;
+        document.head.innerHTML =
+          `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0"> ` +
+          `<meta name="tracestate" content="sentry=doGsaREgReaT,maisey=silly,charlie=goofy">`;
 
         // pageload transactions are created as part of the BrowserTracing integration's initialization
         createBrowserTracing(true);
@@ -427,11 +428,20 @@ describe('BrowserTracing', () => {
         expect(transaction.traceId).toEqual('12312012123120121231201212312012');
         expect(transaction.parentSpanId).toEqual('1121201211212012');
         expect(transaction.sampled).toBe(false);
+        expect(transaction.metadata?.tracestate).toEqual({
+          sentry: 'sentry=doGsaREgReaT',
+          thirdparty: 'maisey=silly,charlie=goofy',
+        });
       });
 
+      // navigation transactions happen on the same page as generated a pageload transaction (with <metat> tags still
+      // possibly present) but they start their own trace and therefore shouldn't contain the pageload transaction's
+      // trace data
       it('ignores the data for navigation transactions', () => {
         mockChangeHistory = () => undefined;
-        document.head.innerHTML = `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0">`;
+        document.head.innerHTML =
+          `<meta name="sentry-trace" content="12312012123120121231201212312012-1121201211212012-0"> ` +
+          `<meta name="tracestate" content="sentry=doGsaREgReaT,maisey=silly,charlie=goofy">`;
 
         createBrowserTracing(true);
 
@@ -442,6 +452,9 @@ describe('BrowserTracing', () => {
         expect(transaction.op).toBe('navigation');
         expect(transaction.traceId).not.toEqual('12312012123120121231201212312012');
         expect(transaction.parentSpanId).toBeUndefined();
+        expect(transaction.sampled).toBe(true);
+        expect(transaction.metadata?.tracestate?.sentry).not.toEqual('sentry=doGsaREgReaT');
+        expect(transaction.metadata?.tracestate?.thirdparty).toBeUndefined();
       });
     });
   });