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,11 +29,27 @@ 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._sentryTraceData = requestTransaction.toTraceparent();
+          serverSideProps.props._sentryBaggage = serializeBaggage(requestTransaction.getBaggage());
+        }
+      }
+
+      return serverSideProps;
     } else {
       return errorWrappedGetServerSideProps(...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: {
+          _sentryTraceData?: string;
+          _sentryBaggage?: string;
+        };
+      } = await callTracedServerSideDataFetcher(
+        errorWrappedAppGetInitialProps,
+        appGetInitialPropsArguments,
+        req!,
+        res!,
+        {
+          dataFetcherRouteName: '/_app',
+          requestedRouteName: context.ctx.pathname,
+          dataFetchingMethodName: 'getInitialProps',
+        },
+      );
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        appGetInitialProps.pageProps._sentryTraceData = requestTransaction.toTraceparent();
+        appGetInitialProps.pageProps._sentryBaggage = 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 & {
+        _sentryTraceData?: string;
+        _sentryBaggage?: string;
+      } = await callTracedServerSideDataFetcher(
+        errorWrappedGetInitialProps,
+        errorGetInitialPropsArguments,
+        req!,
+        res!,
+        {
+          dataFetcherRouteName: '/_error',
+          requestedRouteName: context.pathname,
+          dataFetchingMethodName: 'getInitialProps',
+        },
+      );
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        errorGetInitialProps._sentryTraceData = requestTransaction.toTraceparent();
+        errorGetInitialProps._sentryBaggage = 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: {
+        _sentryTraceData?: string;
+        _sentryBaggage?: string;
+      } = await callTracedServerSideDataFetcher(errorWrappedGetInitialProps, getInitialPropsArguments, req!, res!, {
         dataFetcherRouteName: context.pathname,
         requestedRouteName: context.pathname,
         dataFetchingMethodName: 'getInitialProps',
       });
+
+      const requestTransaction = getTransactionFromRequest(req!);
+      if (requestTransaction) {
+        initialProps._sentryTraceData = requestTransaction.toTraceparent();
+        initialProps._sentryBaggage = 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;
 }
 
@@ -31,20 +38,15 @@ function autoEndTransactionOnResponseEnd(transaction: Transaction, res: ServerRe
 
 /**
  * Wraps a function that potentially throws. If it does, the error is passed to `captureException` and rethrown.
+ *
+ * Note: This function turns the wrapped function into an asynchronous one.
  */
 export function withErrorInstrumentation<F extends (...args: any[]) => any>(
   origFunction: F,
-): (...params: Parameters<F>) => ReturnType<F> {
-  return function (this: unknown, ...origFunctionArguments: Parameters<F>): ReturnType<F> {
+): (...params: Parameters<F>) => Promise<ReturnType<F>> {
+  return async function (this: unknown, ...origFunctionArguments: Parameters<F>): Promise<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);
-      });
-      return potentialPromiseResult;
+      return await origFunction.call(this, ...origFunctionArguments);
     } catch (e) {
       // TODO: Extract error logic from `withSentry` in here or create a new wrapper with said logic or something like that.
       captureException(e);
@@ -85,13 +87,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 +130,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,20 +22,14 @@ 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?: {
-      _sentryGetServerSidePropsTraceData?: string; // trace parent info, if injected by server-side `getServerSideProps`
-      _sentryGetServerSidePropsBaggage?: string; // baggage, if injected by server-side `getServerSideProps`
-
-      // The following two values are only injected in a very special case with the following conditions:
+      _sentryTraceData?: string; // trace parent info, if injected by a data-fetcher
+      _sentryBaggage?: string; // baggage, if injected by a data-fetcher
+      // These two values are only injected by `getStaticProps` in a very special case with the following conditions:
       // 1. The page's `getStaticPaths` method must have returned `fallback: 'blocking'`.
       // 2. The requested page must be a "miss" in terms of "Incremental Static Regeneration", meaning the requested page has not been generated before.
       // In this case, a page is requested and only served when `getStaticProps` is done. There is not even a fallback page or similar.
-      _sentryGetStaticPropsTraceData?: string; // trace parent info, if injected by server-side `getStaticProps`
-      _sentryGetStaticPropsBaggage?: string; // baggage, if injected by server-side `getStaticProps`
     };
   };
 }
@@ -79,29 +73,19 @@ 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;
-
-    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;
+  if (props && props.pageProps) {
+    if (props.pageProps._sentryBaggage) {
+      nextDataTagInfo.baggage = props.pageProps._sentryBaggage;
     }
 
-    const getInitialPropsTraceData = props._sentryGetInitialPropsTraceData;
-    const getServerSidePropsTraceData = pageProps && pageProps._sentryGetServerSidePropsTraceData;
-    const getStaticPropsTraceData = pageProps && 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) {
-      nextDataTagInfo.traceParentData = extractTraceparentData(traceData);
+    if (props.pageProps._sentryTraceData) {
+      nextDataTagInfo.traceParentData = extractTraceparentData(props.pageProps._sentryTraceData);
     }
   }
 

packages/nextjs/test/integration/next.config.js

@@ -4,6 +4,9 @@ const moduleExports = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  sentry: {
+    experiments: { autoWrapDataFetchers: true },
+  },
 };
 const SentryWebpackPluginOptions = {
   dryRun: true,

packages/nextjs/test/integration/next10.config.template

@@ -5,6 +5,9 @@ const moduleExports = {
   future: {
     webpack5: %RUN_WEBPACK_5%,
   },
+  sentry: {
+    experiments: { autoWrapDataFetchers: true },
+  },
 };
 
 const SentryWebpackPluginOptions = {

packages/nextjs/test/integration/next11.config.template

@@ -6,6 +6,9 @@ const moduleExports = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  sentry: {
+    experiments: { autoWrapDataFetchers: true },
+  },
 };
 
 const SentryWebpackPluginOptions = {

packages/nextjs/test/integration/pages/[id]/withInitialProps.tsx

@@ -0,0 +1,7 @@
+const WithInitialPropsPage = ({ data }: { data: string }) => <h1>WithInitialPropsPage {data}</h1>;
+
+WithInitialPropsPage.getInitialProps = () => {
+  return { data: '[some getInitialProps data]' };
+};
+
+export default WithInitialPropsPage;

packages/nextjs/test/integration/pages/[id]/withServerSideProps.tsx

@@ -0,0 +1,7 @@
+const WithServerSidePropsPage = ({ data }: { data: string }) => <h1>WithServerSidePropsPage {data}</h1>;
+
+export async function getServerSideProps() {
+  return { props: { data: '[some getServerSideProps data]' } };
+}
+
+export default WithServerSidePropsPage;