Traceparent data instead of traceId only

Author: Luca Forstner

packages/nextjs/src/performance/client.ts

@@ -1,7 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { Primitive, Transaction, TransactionContext } from '@sentry/types';
-import { fill, getGlobalObject, logger, parseBaggageHeader, stripUrlQueryAndFragment } from '@sentry/utils';
+import { Primitive, TraceparentData, Transaction, TransactionContext } from '@sentry/types';
+import {
+  extractTraceparentData,
+  fill,
+  getGlobalObject,
+  logger,
+  parseBaggageHeader,
+  stripUrlQueryAndFragment,
+} from '@sentry/utils';
 import type { NEXT_DATA as NextData } from 'next/dist/next-server/lib/utils';
 import { default as Router } from 'next/router';
 import type { ParsedUrlQuery } from 'querystring';
@@ -16,10 +23,10 @@ type StartTransactionCb = (context: TransactionContext) => Transaction | undefin
 interface SentryEnhancedNextData extends NextData {
   // contains props returned by `getInitialProps` - except for `pageProps`, these are the props that got returned by `getServerSideProps` or `getStaticProps`
   props: {
-    _sentryGetInitialPropsTraceId?: string; // trace id, if injected by server-side `getInitialProps`
+    _sentryGetInitialPropsTraceData?: string; // trace id, if injected by server-side `getInitialProps`
     _sentryGetInitialPropsBaggage?: string; // baggage, if injected by server-side `getInitialProps`
     pageProps?: {
-      _sentryGetServerSidePropsTraceId?: string; // trace id, if injected by server-side `getServerSideProps`
+      _sentryGetServerSidePropsTraceData?: string; // trace id, if injected by server-side `getServerSideProps`
       _sentryGetServerSidePropsBaggage?: string; // baggage, if injected by server-side `getServerSideProps`
     };
   };
@@ -38,7 +45,7 @@ interface SentryEnhancedNextData extends NextData {
  */
 function extractNextDataTagInformation(): {
   route: string | undefined;
-  traceId: string | undefined;
+  traceParentData: TraceparentData | undefined;
   baggage: string | undefined;
   params: ParsedUrlQuery | undefined;
 } {
@@ -57,20 +64,24 @@ function extractNextDataTagInformation(): {
 
   // `nextData.page` always contains the parameterized route
   const route = (nextData || {}).page;
+  const params = (nextData || {}).query;
 
-  const getServerSidePropsTraceId = (((nextData || {}).props || {}).pageProps || {})._sentryGetServerSidePropsTraceId;
-  const getInitialPropsTraceId = ((nextData || {}).props || {})._sentryGetInitialPropsTraceId;
-  const getServerSidePropsBaggage = (((nextData || {}).props || {}).pageProps || {})._sentryGetServerSidePropsBaggage;
   const getInitialPropsBaggage = ((nextData || {}).props || {})._sentryGetInitialPropsBaggage;
+  const getServerSidePropsBaggage = (((nextData || {}).props || {}).pageProps || {})._sentryGetServerSidePropsBaggage;
 
-  const params = (nextData || {}).query;
+  const getInitialPropsTraceData = ((nextData || {}).props || {})._sentryGetInitialPropsTraceData;
+  const getServerSidePropsTraceData = (((nextData || {}).props || {}).pageProps || {})
+    ._sentryGetServerSidePropsTraceData;
+
+  // Ordering of the following shouldn't matter but `getInitialProps` generally runs before `getServerSideProps` so we give it priority.
+  const baggage = getInitialPropsBaggage || getServerSidePropsBaggage;
+  const traceData = getInitialPropsTraceData || getServerSidePropsTraceData;
 
   return {
     route,
     params,
-    // Ordering of the following shouldn't matter but `getInitialProps` generally runs before `getServerSideProps` so we give it priority.
-    traceId: getInitialPropsTraceId || getServerSidePropsTraceId,
-    baggage: getInitialPropsBaggage || getServerSidePropsBaggage,
+    traceParentData: traceData ? extractTraceparentData(traceData) : undefined,
+    baggage,
   };
 }
 
@@ -98,17 +109,17 @@ export function nextRouterInstrumentation(
   startTransaction = startTransactionCb;
 
   if (startTransactionOnPageLoad) {
-    const { route, traceId, baggage, params } = extractNextDataTagInformation();
+    const { route, traceParentData, baggage, params } = extractNextDataTagInformation();
 
     prevTransactionName = route || global.document.location.pathname;
     const source = route ? 'route' : 'url';
 
     activeTransaction = startTransactionCb({
       name: prevTransactionName,
-      traceId,
       op: 'pageload',
       tags: DEFAULT_TAGS,
       ...(params && { data: params }),
+      ...traceParentData,
       metadata: {
         source,
         ...(baggage && { baggage: parseBaggageHeader(baggage) }),

packages/nextjs/test/performance/client.test.ts

@@ -86,7 +86,7 @@ describe('client', () => {
         '/[user]/posts/[id]',
         { user: 'lforst', id: '1337', q: '42' },
         {
-          _sentryGetInitialPropsTraceId: 'SOME_TRACE_ID',
+          _sentryGetInitialPropsTraceData: 'c82b8554881b4d28ad977de04a4fb40a-a755953cd3394d5f-1',
           _sentryGetInitialPropsBaggage:
             'other=vendor,foo=bar,third=party,last=item,sentry-release=2.1.0,sentry-environment=myEnv',
         },
@@ -106,7 +106,9 @@ describe('client', () => {
             source: 'route',
             baggage: [{ environment: 'myEnv', release: '2.1.0' }, '', true],
           },
-          traceId: 'SOME_TRACE_ID',
+          traceId: 'c82b8554881b4d28ad977de04a4fb40a',
+          parentSpanId: 'a755953cd3394d5f',
+          parentSampled: true,
         },
       ],
       [
@@ -115,7 +117,7 @@ describe('client', () => {
         {},
         {
           pageProps: {
-            _sentryGetServerSidePropsTraceId: 'SOME_TRACE_ID',
+            _sentryGetServerSidePropsTraceData: 'c82b8554881b4d28ad977de04a4fb40a-a755953cd3394d5f-1',
             _sentryGetServerSidePropsBaggage:
               'other=vendor,foo=bar,third=party,last=item,sentry-release=2.1.0,sentry-environment=myEnv',
           },
@@ -132,7 +134,9 @@ describe('client', () => {
             source: 'route',
             baggage: [{ environment: 'myEnv', release: '2.1.0' }, '', true],
           },
-          traceId: 'SOME_TRACE_ID',
+          traceId: 'c82b8554881b4d28ad977de04a4fb40a',
+          parentSpanId: 'a755953cd3394d5f',
+          parentSampled: true,
         },
       ],
       [