feat(nextjs): Connect trace between data-fetching methods and pageload

packages/nextjs/src/config/wrappers/withSentryGetServerSideProps.ts

@@ -1,8 +1,9 @@
 import { hasTracingEnabled } from '@sentry/tracing';
+import { serializeBaggage } from '@sentry/utils';
 import { GetServerSideProps } from 'next';
 
 import { isBuild } from '../../utils/isBuild';
-import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
+import { callTracedServerSideDataFetcher, getTransactionFromRequest, withErrorInstrumentation } from './wrapperUtils';
 
 /**
  * Create a wrapped version of the user's exported `getServerSideProps` function
@@ -28,13 +29,29 @@ export function withSentryGetServerSideProps(
     const errorWrappedGetServerSideProps = withErrorInstrumentation(origGetServerSideProps);
 
     if (hasTracingEnabled()) {
-      return callTracedServerSideDataFetcher(errorWrappedGetServerSideProps, getServerSidePropsArguments, req, res, {
-        dataFetcherRouteName: parameterizedRoute,
-        requestedRouteName: parameterizedRoute,
-        dataFetchingMethodName: 'getServerSideProps',
-      });
+      const serverSideProps = await callTracedServerSideDataFetcher(
+        errorWrappedGetServerSideProps,
+        getServerSidePropsArguments,
+        req,
+        res,
+        {
+          dataFetcherRouteName: parameterizedRoute,
+          requestedRouteName: parameterizedRoute,
+          dataFetchingMethodName: 'getServerSideProps',
+        },
+      );
+
+      if ('props' in serverSideProps) {
+        const requestTransaction = getTransactionFromRequest(req);
+        if (requestTransaction) {
+          serverSideProps.props._sentryGetServerSidePropsTraceData = requestTransaction.toTraceparent();
+          serverSideProps.props._sentryGetServerSidePropsBaggage = serializeBaggage(requestTransaction.getBaggage());
+        }
+      }
+
+      return serverSideProps;
     } else {
-      return errorWrappedGetServerSideProps(...getServerSidePropsArguments);
+      return origGetServerSideProps(...getServerSidePropsArguments);
     }
   };
 }

packages/nextjs/src/config/wrappers/withSentryServerSideAppGetInitialProps.ts

@@ -1,8 +1,9 @@
 import { hasTracingEnabled } from '@sentry/tracing';
+import { serializeBaggage } from '@sentry/utils';
 import App from 'next/app';
 
 import { isBuild } from '../../utils/isBuild';
-import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
+import { callTracedServerSideDataFetcher, getTransactionFromRequest, withErrorInstrumentation } from './wrapperUtils';
 
 type AppGetInitialProps = typeof App['getInitialProps'];
 
@@ -30,12 +31,30 @@ export function withSentryServerSideAppGetInitialProps(origAppGetInitialProps: A
     if (hasTracingEnabled()) {
       // Since this wrapper is only applied to `getInitialProps` running on the server, we can assert that `req` and
       // `res` are always defined: https://nextjs.org/docs/api-reference/data-fetching/get-initial-props#context-object
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return callTracedServerSideDataFetcher(errorWrappedAppGetInitialProps, appGetInitialPropsArguments, req!, res!, {
-        dataFetcherRouteName: '/_app',
-        requestedRouteName: context.ctx.pathname,
-        dataFetchingMethodName: 'getInitialProps',
-      });
+      const appGetInitialProps: {
+        pageProps: {
+          _sentryGetInitialPropsTraceData?: string;
+          _sentryGetInitialPropsBaggage?: string;
+        };
+      } = await callTracedServerSideDataFetcher(
+        errorWrappedAppGetInitialProps,
+        appGetInitialPropsArguments,
+        req!,
+        res!,
+        {
+          dataFetcherRouteName: '/_app',
+          requestedRouteName: context.ctx.pathname,
+          dataFetchingMethodName: 'getInitialProps',
+        },
+      );
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        appGetInitialProps.pageProps._sentryGetInitialPropsTraceData = requestTransaction.toTraceparent();
+        appGetInitialProps.pageProps._sentryGetInitialPropsBaggage = serializeBaggage(requestTransaction.getBaggage());
+      }
+
+      return appGetInitialProps;
     } else {
       return errorWrappedAppGetInitialProps(...appGetInitialPropsArguments);
     }

packages/nextjs/src/config/wrappers/withSentryServerSideErrorGetInitialProps.ts

@@ -1,9 +1,10 @@
 import { hasTracingEnabled } from '@sentry/tracing';
+import { serializeBaggage } from '@sentry/utils';
 import { NextPageContext } from 'next';
 import { ErrorProps } from 'next/error';
 
 import { isBuild } from '../../utils/isBuild';
-import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
+import { callTracedServerSideDataFetcher, getTransactionFromRequest, withErrorInstrumentation } from './wrapperUtils';
 
 type ErrorGetInitialProps = (context: NextPageContext) => Promise<ErrorProps>;
 
@@ -33,12 +34,28 @@ export function withSentryServerSideErrorGetInitialProps(
     if (hasTracingEnabled()) {
       // Since this wrapper is only applied to `getInitialProps` running on the server, we can assert that `req` and
       // `res` are always defined: https://nextjs.org/docs/api-reference/data-fetching/get-initial-props#context-object
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return callTracedServerSideDataFetcher(errorWrappedGetInitialProps, errorGetInitialPropsArguments, req!, res!, {
-        dataFetcherRouteName: '/_error',
-        requestedRouteName: context.pathname,
-        dataFetchingMethodName: 'getInitialProps',
-      });
+      const errorGetInitialProps: ErrorProps & {
+        _sentryGetInitialPropsTraceData?: string;
+        _sentryGetInitialPropsBaggage?: string;
+      } = await callTracedServerSideDataFetcher(
+        errorWrappedGetInitialProps,
+        errorGetInitialPropsArguments,
+        req!,
+        res!,
+        {
+          dataFetcherRouteName: '/_error',
+          requestedRouteName: context.pathname,
+          dataFetchingMethodName: 'getInitialProps',
+        },
+      );
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        errorGetInitialProps._sentryGetInitialPropsTraceData = requestTransaction.toTraceparent();
+        errorGetInitialProps._sentryGetInitialPropsBaggage = serializeBaggage(requestTransaction.getBaggage());
+      }
+
+      return errorGetInitialProps;
     } else {
       return errorWrappedGetInitialProps(...errorGetInitialPropsArguments);
     }

packages/nextjs/src/config/wrappers/withSentryServerSideGetInitialProps.ts

@@ -1,8 +1,9 @@
 import { hasTracingEnabled } from '@sentry/tracing';
+import { serializeBaggage } from '@sentry/utils';
 import { NextPage } from 'next';
 
 import { isBuild } from '../../utils/isBuild';
-import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
+import { callTracedServerSideDataFetcher, getTransactionFromRequest, withErrorInstrumentation } from './wrapperUtils';
 
 type GetInitialProps = Required<NextPage>['getInitialProps'];
 
@@ -29,12 +30,22 @@ export function withSentryServerSideGetInitialProps(origGetInitialProps: GetInit
     if (hasTracingEnabled()) {
       // Since this wrapper is only applied to `getInitialProps` running on the server, we can assert that `req` and
       // `res` are always defined: https://nextjs.org/docs/api-reference/data-fetching/get-initial-props#context-object
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return callTracedServerSideDataFetcher(errorWrappedGetInitialProps, getInitialPropsArguments, req!, res!, {
+      const initialProps: {
+        _sentryGetInitialPropsTraceData?: string;
+        _sentryGetInitialPropsBaggage?: string;
+      } = await callTracedServerSideDataFetcher(errorWrappedGetInitialProps, getInitialPropsArguments, req!, res!, {
         dataFetcherRouteName: context.pathname,
         requestedRouteName: context.pathname,
         dataFetchingMethodName: 'getInitialProps',
       });
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        initialProps._sentryGetInitialPropsTraceData = requestTransaction.toTraceparent();
+        initialProps._sentryGetInitialPropsBaggage = serializeBaggage(requestTransaction.getBaggage());
+      }
+
+      return initialProps;
     } else {
       return errorWrappedGetInitialProps(...getInitialPropsArguments);
     }

packages/nextjs/src/config/wrappers/wrapperUtils.ts

@@ -2,7 +2,7 @@ import { captureException, getCurrentHub, startTransaction } from '@sentry/core'
 import { addRequestDataToEvent } from '@sentry/node';
 import { getActiveTransaction } from '@sentry/tracing';
 import { Transaction } from '@sentry/types';
-import { fill } from '@sentry/utils';
+import { extractTraceparentData, fill, isString, parseBaggageSetMutability } from '@sentry/utils';
 import * as domain from 'domain';
 import { IncomingMessage, ServerResponse } from 'http';
 
@@ -12,7 +12,14 @@ declare module 'http' {
   }
 }
 
-function getTransactionFromRequest(req: IncomingMessage): Transaction | undefined {
+/**
+ * Grabs a transaction off a Next.js datafetcher request object, if it was previously put there via
+ * `setTransactionOnRequest`.
+ *
+ * @param req The Next.js datafetcher request object
+ * @returns the Transaction on the request object if there is one, or `undefined` if the request object didn't have one.
+ */
+export function getTransactionFromRequest(req: IncomingMessage): Transaction | undefined {
   return req._sentryTransaction;
 }
 
@@ -38,12 +45,15 @@ export function withErrorInstrumentation<F extends (...args: any[]) => any>(
   return function (this: unknown, ...origFunctionArguments: Parameters<F>): ReturnType<F> {
     try {
       const potentialPromiseResult = origFunction.call(this, ...origFunctionArguments);
+
       // First of all, we need to capture promise rejections so we have the following check, as well as the try-catch block.
       // Additionally, we do the following instead of `await`-ing so we do not change the method signature of the passed function from `() => unknown` to `() => Promise<unknown>.
       Promise.resolve(potentialPromiseResult).catch(err => {
         // TODO: Extract error logic from `withSentry` in here or create a new wrapper with said logic or something like that.
         captureException(err);
+        throw err;
       });
+
       return potentialPromiseResult;
     } catch (e) {
       // TODO: Extract error logic from `withSentry` in here or create a new wrapper with said logic or something like that.
@@ -85,13 +95,20 @@ export function callTracedServerSideDataFetcher<F extends (...args: any[]) => Pr
     let requestTransaction: Transaction | undefined = getTransactionFromRequest(req);
 
     if (requestTransaction === undefined) {
-      // TODO: Extract trace data from `req` object (trace and baggage headers) and attach it to transaction
+      const sentryTraceHeader = req.headers['sentry-trace'];
+      const rawBaggageString = req.headers && isString(req.headers.baggage) && req.headers.baggage;
+      const traceparentData =
+        typeof sentryTraceHeader === 'string' ? extractTraceparentData(sentryTraceHeader) : undefined;
+
+      const baggage = parseBaggageSetMutability(rawBaggageString, traceparentData);
 
       const newTransaction = startTransaction({
         op: 'nextjs.data.server',
         name: options.requestedRouteName,
+        ...traceparentData,
         metadata: {
           source: 'route',
+          baggage,
         },
       });
 
@@ -121,7 +138,6 @@ export function callTracedServerSideDataFetcher<F extends (...args: any[]) => Pr
     }
 
     try {
-      // TODO: Inject trace data into returned props
       return await origFunction(...origFunctionArguments);
     } finally {
       dataFetcherSpan.finish();

packages/nextjs/src/performance/client.ts

@@ -22,11 +22,10 @@ type StartTransactionCb = (context: TransactionContext) => Transaction | undefin
  * Describes data located in the __NEXT_DATA__ script tag. This tag is present on every page of a Next.js app.
  */
 interface SentryEnhancedNextData extends NextData {
-  // contains props returned by `getInitialProps` - except for `pageProps`, these are the props that got returned by `getServerSideProps` or `getStaticProps`
   props: {
-    _sentryGetInitialPropsTraceData?: string; // trace parent info, if injected by server-side `getInitialProps`
-    _sentryGetInitialPropsBaggage?: string; // baggage, if injected by server-side `getInitialProps`
     pageProps?: {
+      _sentryGetInitialPropsTraceData?: string; // trace parent info, if injected by server-side `getInitialProps`
+      _sentryGetInitialPropsBaggage?: string; // baggage, if injected by server-side `getInitialProps`
       _sentryGetServerSidePropsTraceData?: string; // trace parent info, if injected by server-side `getServerSideProps`
       _sentryGetServerSidePropsBaggage?: string; // baggage, if injected by server-side `getServerSideProps`
 
@@ -79,25 +78,27 @@ function extractNextDataTagInformation(): NextDataTagInfo {
 
   const { page, query, props } = nextData;
 
-  // `nextData.page` always contains the parameterized route
+  // `nextData.page` always contains the parameterized route - except for when an error occurs in a data fetching
+  // function, then it is "/_error", but that isn't a problem since users know which route threw by looking at the
+  // parent transaction
   nextDataTagInfo.route = page;
   nextDataTagInfo.params = query;
 
-  if (props) {
-    const { pageProps } = props;
+  if (props && props.pageProps) {
+    const pageProps = props.pageProps;
+    const getInitialPropsBaggage = pageProps._sentryGetInitialPropsBaggage;
+    const getServerSidePropsBaggage = pageProps._sentryGetServerSidePropsBaggage;
+    const getStaticPropsBaggage = pageProps._sentryGetStaticPropsBaggage;
 
-    const getInitialPropsBaggage = props._sentryGetInitialPropsBaggage;
-    const getServerSidePropsBaggage = pageProps && pageProps._sentryGetServerSidePropsBaggage;
-    const getStaticPropsBaggage = pageProps && pageProps._sentryGetStaticPropsBaggage;
     // Ordering of the following shouldn't matter but `getInitialProps` generally runs before `getServerSideProps` or `getStaticProps` so we give it priority.
     const baggage = getInitialPropsBaggage || getServerSidePropsBaggage || getStaticPropsBaggage;
     if (baggage) {
       nextDataTagInfo.baggage = baggage;
     }
 
-    const getInitialPropsTraceData = props._sentryGetInitialPropsTraceData;
-    const getServerSidePropsTraceData = pageProps && pageProps._sentryGetServerSidePropsTraceData;
-    const getStaticPropsTraceData = pageProps && pageProps._sentryGetStaticPropsTraceData;
+    const getInitialPropsTraceData = pageProps._sentryGetInitialPropsTraceData;
+    const getServerSidePropsTraceData = pageProps._sentryGetServerSidePropsTraceData;
+    const getStaticPropsTraceData = pageProps._sentryGetStaticPropsTraceData;
     // Ordering of the following shouldn't matter but `getInitialProps` generally runs before `getServerSideProps` or `getStaticProps` so we give it priority.
     const traceData = getInitialPropsTraceData || getServerSidePropsTraceData || getStaticPropsTraceData;
     if (traceData) {

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

@@ -89,9 +89,11 @@ describe('client', () => {
         '/[user]/posts/[id]',
         { user: 'lforst', id: '1337', q: '42' },
         {
-          _sentryGetInitialPropsTraceData: 'c82b8554881b4d28ad977de04a4fb40a-a755953cd3394d5f-1',
-          _sentryGetInitialPropsBaggage:
-            'other=vendor,foo=bar,third=party,last=item,sentry-release=2.1.0,sentry-environment=myEnv',
+          pageProps: {
+            _sentryGetInitialPropsTraceData: 'c82b8554881b4d28ad977de04a4fb40a-a755953cd3394d5f-1',
+            _sentryGetInitialPropsBaggage:
+              'other=vendor,foo=bar,third=party,last=item,sentry-release=2.1.0,sentry-environment=myEnv',
+          },
         },
         true,
         {