feat(nextjs): Connect traces for server components

Author: Luca Forstner

packages/nextjs/src/common/types.ts

@@ -1,4 +1,6 @@
 export type ServerComponentContext = {
   componentRoute: string;
   componentType: string;
+  sentryTraceHeader?: string;
+  baggageHeader?: string;
 };

packages/nextjs/src/config/loaders/wrappingLoader.ts

@@ -119,7 +119,7 @@ export default function wrappingLoader(
     // https://github.com/vercel/next.js/blob/295f9da393f7d5a49b0c2e15a2f46448dbdc3895/packages/next/build/analysis/get-page-static-info.ts#L37
     // https://github.com/vercel/next.js/blob/a1c15d84d906a8adf1667332a3f0732be615afa0/packages/next-swc/crates/core/src/react_server_components.rs#L247
     // We do not want to wrap client components
-    if (userCode.includes('/* __next_internal_client_entry_do_not_use__ */')) {
+    if (userCode.includes('__next_internal_client_entry_do_not_use__')) {
       this.callback(null, userCode, userModuleSourceMap);
       return;
     }

packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts

@@ -11,6 +11,9 @@
 import * as wrapee from '__SENTRY_WRAPPING_TARGET_FILE__';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as Sentry from '@sentry/nextjs';
+// @ts-ignore TODO
+// eslint-disable-next-line import/no-unresolved
+import { headers } from 'next/headers';
 
 type ServerComponentModule = {
   default: unknown;
@@ -22,9 +25,30 @@ const serverComponent = serverComponentModule.default;
 
 let wrappedServerComponent;
 if (typeof serverComponent === 'function') {
-  wrappedServerComponent = Sentry.wrapServerComponentWithSentry(serverComponent, {
-    componentRoute: '__ROUTE__',
-    componentType: '__COMPONENT_TYPE__',
+  // TODO: explain why this code needs to be in this file
+  wrappedServerComponent = new Proxy(serverComponent, {
+    apply: (originalFunction, thisArg, args) => {
+      let sentryTraceHeader: string | undefined = undefined;
+      let baggageHeader: string | undefined = undefined;
+
+      if (process.env.NEXT_PHASE !== 'phase-production-build') {
+        // @ts-ignore TODO
+        // eslint-disable-next-line import/no-unresolved
+        // const { headers } = await import('next/headers');
+        const headersList = headers();
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        sentryTraceHeader = headersList.get('sentry-trace');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        baggageHeader = headersList.get('baggage');
+      }
+
+      return Sentry.wrapServerComponentWithSentry(originalFunction, {
+        componentRoute: '__ROUTE__',
+        componentType: '__COMPONENT_TYPE__',
+        sentryTraceHeader,
+        baggageHeader,
+      }).apply(thisArg, args);
+    },
   });
 } else {
   wrappedServerComponent = serverComponent;

packages/nextjs/src/server/wrapServerComponentWithSentry.ts

@@ -1,4 +1,5 @@
 import { captureException, getCurrentHub, startTransaction } from '@sentry/core';
+import { baggageHeaderToDynamicSamplingContext, extractTraceparentData } from '@sentry/utils';
 import * as domain from 'domain';
 
 import type { ServerComponentContext } from '../common/types';
@@ -20,12 +21,20 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
       return domain.create().bind(() => {
         let maybePromiseResult;
 
+        const traceparentData = context.sentryTraceHeader
+          ? extractTraceparentData(context.sentryTraceHeader)
+          : undefined;
+
+        const dynamicSamplingContext = baggageHeaderToDynamicSamplingContext(context.baggageHeader);
+
         const transaction = startTransaction({
           op: 'function.nextjs',
           name: `${componentType} Server Component (${componentRoute})`,
           status: 'ok',
+          ...traceparentData,
           metadata: {
             source: 'component',
+            dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,
           },
         });