Make wrapper name a little bit less annoying lol

Author: Luca Forstner

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

@@ -1,6 +1,6 @@
 import { GetServerSideProps } from 'next';
 
-import { callDataFetcherTraced } from './wrapperUtils';
+import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
 
 /**
  * Create a wrapped version of the user's exported `getServerSideProps` function
@@ -16,9 +16,18 @@ export function withSentryGetServerSideProps(
   return async function (
     ...getServerSidePropsArguments: Parameters<GetServerSideProps>
   ): ReturnType<GetServerSideProps> {
-    return callDataFetcherTraced(origGetServerSideProps, getServerSidePropsArguments, {
-      parameterizedRoute,
-      dataFetchingMethodName: 'getServerSideProps',
-    });
+    const [context] = getServerSidePropsArguments;
+    const { req, res } = context;
+
+    const errorWrappedGetServerSideProps = withErrorInstrumentation(origGetServerSideProps);
+
+    if (hasTracingEnabled()) {
+      return callTracedServerSideDataFetcher(errorWrappedGetServerSideProps, getServerSidePropsArguments, req, res, {
+        parameterizedRoute,
+        functionName: 'getServerSideProps',
+      });
+    } else {
+      return errorWrappedGetServerSideProps(...getServerSidePropsArguments);
+    }
   };
 }

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

@@ -0,0 +1,36 @@
+import { hasTracingEnabled } from '@sentry/tracing';
+import { NextPage } from 'next';
+
+import { callTracedServerSideDataFetcher, withErrorInstrumentation } from './wrapperUtils';
+
+type GetInitialProps = Required<NextPage>['getInitialProps'];
+
+/**
+ * Create a wrapped version of the user's exported `getInitialProps` function
+ *
+ * @param origGetInitialProps The user's `getInitialProps` function
+ * @param parameterizedRoute The page's parameterized route
+ * @returns A wrapped version of the function
+ */
+export function withSentryServerSideGetInitialProps(
+  origGetInitialProps: GetInitialProps,
+  parameterizedRoute: string,
+): GetInitialProps {
+  return async function (
+    ...getInitialPropsArguments: Parameters<GetInitialProps>
+  ): Promise<ReturnType<GetInitialProps>> {
+    const [context] = getInitialPropsArguments;
+    const { req, res } = context;
+
+    const errorWrappedGetInitialProps = withErrorInstrumentation(origGetInitialProps);
+
+    if (req && res && hasTracingEnabled()) {
+      return callTracedServerSideDataFetcher(errorWrappedGetInitialProps, getInitialPropsArguments, req, res, {
+        parameterizedRoute,
+        functionName: 'getInitialProps',
+      });
+    } else {
+      return errorWrappedGetInitialProps(...getInitialPropsArguments);
+    }
+  };
+}

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

@@ -1,5 +1,111 @@
 import { captureException } from '@sentry/core';
 import { getActiveTransaction } from '@sentry/tracing';
+import { Transaction } from '@sentry/types';
+import { fill } from '@sentry/utils';
+import * as domain from 'domain';
+import { IncomingMessage, ServerResponse } from 'http';
+
+declare module 'http' {
+  interface IncomingMessage {
+    _sentryTransaction?: Transaction;
+  }
+}
+
+function getTransactionFromRequest(req: IncomingMessage): Transaction | undefined {
+  return req._sentryTransaction;
+}
+
+function setTransactionOnRequest(transaction: Transaction, req: IncomingMessage): void {
+  req._sentryTransaction = transaction;
+}
+
+function autoEndTransactionOnResponseEnd(transaction: Transaction, res: ServerResponse): void {
+  fill(res, 'end', (originalEnd: ServerResponse['end']) => {
+    return function (this: unknown, ...endArguments: Parameters<ServerResponse['end']>) {
+      transaction.finish();
+      return originalEnd.call(this, ...endArguments);
+    };
+  });
+}
+
+/**
+ * Wraps a function that potentially throws. If it does, the error is passed to `captureException` and retrhrown.
+ */
+export function withErrorInstrumentation<F extends (...args: any[]) => any>(
+  origFunction: F,
+): (...params: Parameters<F>) => ReturnType<F> {
+  return function (this: unknown, ...origFunctionArguments: Parameters<F>): ReturnType<F> {
+    const potentialPromiseResult = origFunction.call(this, ...origFunctionArguments);
+    // We do this instead of await 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;
+  };
+}
+
+/**
+ * Calls a server-side data fetching function (that takes a `req` and `res` object in its context) with tracing
+ * instrumentation. A transaction will be created for the incoming request (if it doesn't already exist) in addition to
+ * a span for the wrapped data fetching function.
+ *
+ * All of the above happens in an isolated domain, meaning all thrown errors will be associated with the correct span.
+ *
+ * @param origFunction The data fetching method to call.
+ * @param origFunctionArguments The arguments to call the data fetching method with.
+ * @param req The data fetching function's request object.
+ * @param res The data fetching function's response object.
+ * @param options Options providing details for the created transaction and span.
+ * @returns what the data fetching method call returned.
+ */
+export function callTracedServerSideDataFetcher<F extends (...args: any[]) => Promise<any> | any>(
+  origFunction: F,
+  origFunctionArguments: Parameters<F>,
+  req: IncomingMessage,
+  res: ServerResponse,
+  options: {
+    parameterizedRoute: string;
+    functionName: string;
+  },
+): Promise<ReturnType<F>> {
+  return domain.create().bind(async () => {
+    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 newTransaction = startTransaction({
+        op: 'nextjs.data',
+        name: options.parameterizedRoute,
+        metadata: {
+          source: 'route',
+        },
+      });
+
+      requestTransaction = newTransaction;
+      autoEndTransactionOnResponseEnd(newTransaction, res);
+      setTransactionOnRequest(newTransaction, req);
+    }
+
+    const dataFetcherSpan = requestTransaction.startChild({
+      op: 'nextjs.data',
+      description: `${options.functionName} (${options.parameterizedRoute})`,
+    });
+
+    const currentScope = getCurrentHub().getScope();
+    if (currentScope) {
+      currentScope.setSpan(dataFetcherSpan);
+    }
+
+    try {
+      // TODO: Inject trace data into returned props
+      return await origFunction(...origFunctionArguments);
+    } finally {
+      dataFetcherSpan.finish();
+    }
+  })();
+}
 
 /**
  * Call a data fetcher and trace it. Only traces the function if there is an active transaction on the scope.