feat(nextjs): Create spans and route parameterization in server-side getInitialProps (#5587)

Author: lforst

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

@@ -111,6 +111,21 @@ export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>,
   // We know one or the other will be defined, depending on the version of webpack being used
   const { projectDir, pagesDir } = 'getOptions' in this ? this.getOptions() : this.query;
 
+  // Get the parameterized route name from this page's filepath
+  const parameterizedRouteName = path
+    // Get the path of the file insde of the pages directory
+    .relative(pagesDir, this.resourcePath)
+    // Add a slash at the beginning
+    .replace(/(.*)/, '/$1')
+    // Pull off the file extension
+    .replace(/\.(jsx?|tsx?)/, '')
+    // Any page file named `index` corresponds to root of the directory its in, URL-wise, so turn `/xyz/index` into
+    // just `/xyz`
+    .replace(/\/index$/, '')
+    // In case all of the above have left us with an empty string (which will happen if we're dealing with the
+    // homepage), sub back in the root route
+    .replace(/^$/, '/');
+
   // In the following branch we will proxy the user's file. This means we return code (basically an entirely new file)
   // that re - exports all the user file's originial export, but with a "sentry-proxy-loader" query in the module
   // string.
@@ -136,13 +151,26 @@ export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>,
     if (hasDefaultExport(ast)) {
       outputFileContent += `
         import { default as _sentry_default } from "${this.resourcePath}?sentry-proxy-loader";
-        import { withSentryGetInitialProps } from "@sentry/nextjs";
-
-        if (typeof _sentry_default.getInitialProps === 'function') {
-          _sentry_default.getInitialProps = withSentryGetInitialProps(_sentry_default.getInitialProps);
-        }
-
-        export default _sentry_default;`;
+        import { withSentryGetInitialProps } from "@sentry/nextjs";`;
+
+      if (parameterizedRouteName === '/_app') {
+        // getInitialProps signature is a bit different in _app.js so we need a different wrapper
+        // Currently a no-op
+      } else if (parameterizedRouteName === '/_error') {
+        // getInitialProps behaviour is a bit different in _error.js so we probably want different wrapper
+        // Currently a no-op
+      } else if (parameterizedRouteName === '/_document') {
+        // getInitialProps signature is a bit different in _document.js so we need a different wrapper
+        // Currently a no-op
+      } else {
+        // We enter this branch for any "normal" Next.js page
+        outputFileContent += `
+          if (typeof _sentry_default.getInitialProps === 'function') {
+            _sentry_default.getInitialProps = withSentryGetInitialProps(_sentry_default.getInitialProps, '${parameterizedRouteName}');
+          }`;
+      }
+
+      outputFileContent += 'export default _sentry_default;';
     }
 
     return outputFileContent;
@@ -173,20 +201,8 @@ export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>,
 
     // Fill in template placeholders
     let injectedCode = modifiedTemplateCode;
-    const route = path
-      // Get the path of the file insde of the pages directory
-      .relative(pagesDir, this.resourcePath)
-      // Add a slash at the beginning
-      .replace(/(.*)/, '/$1')
-      // Pull off the file extension
-      .replace(/\.(jsx?|tsx?)/, '')
-      // Any page file named `index` corresponds to root of the directory its in, URL-wise, so turn `/xyz/index` into
-      // just `/xyz`
-      .replace(/\/index$/, '')
-      // In case all of the above have left us with an empty string (which will happen if we're dealing with the
-      // homepage), sub back in the root route
-      .replace(/^$/, '/');
-    injectedCode = injectedCode.replace('__FILEPATH__', route);
+
+    injectedCode = injectedCode.replace('__FILEPATH__', parameterizedRouteName);
     for (const { placeholder, alias } of Object.values(DATA_FETCHING_FUNCTIONS)) {
       injectedCode = injectedCode.replace(new RegExp(placeholder, 'g'), alias);
     }

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

@@ -1,14 +1,26 @@
-import { GIProps } from './types';
+import { NextPage } from 'next';
+
+import { callDataFetcherTraced } from './wrapperUtils';
+
+type GetInitialProps = Required<NextPage<unknown>>['getInitialProps'];
 
 /**
  * Create a wrapped version of the user's exported `getInitialProps` function
  *
- * @param origGIProps: The user's `getInitialProps` function
- * @param origGIPropsHost: The user's object on which `getInitialProps` lives (used for `this`)
+ * @param origGetInitialProps The user's `getInitialProps` function
+ * @param parameterizedRoute The page's parameterized route
  * @returns A wrapped version of the function
  */
-export function withSentryGetInitialProps(origGIProps: GIProps['fn']): GIProps['wrappedFn'] {
-  return async function (this: unknown, ...args: Parameters<GIProps['fn']>) {
-    return await origGIProps.call(this, ...args);
+export function withSentryGetInitialProps(
+  origGetInitialProps: GetInitialProps,
+  parameterizedRoute: string,
+): GetInitialProps {
+  return async function (
+    ...getInitialPropsArguments: Parameters<GetInitialProps>
+  ): Promise<ReturnType<GetInitialProps>> {
+    return callDataFetcherTraced(origGetInitialProps, getInitialPropsArguments, {
+      parameterizedRoute,
+      dataFetchingMethodName: 'getInitialProps',
+    });
   };
 }

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

@@ -1,15 +1,24 @@
-import { GSSP } from './types';
-import { wrapperCore } from './wrapperUtils';
+import { GetServerSideProps } from 'next';
+
+import { callDataFetcherTraced } from './wrapperUtils';
 
 /**
  * Create a wrapped version of the user's exported `getServerSideProps` function
  *
- * @param origGetServerSideProps: The user's `getServerSideProps` function
- * @param route: The page's parameterized route
+ * @param origGetServerSideProps The user's `getServerSideProps` function
+ * @param parameterizedRoute The page's parameterized route
  * @returns A wrapped version of the function
  */
-export function withSentryGetServerSideProps(origGetServerSideProps: GSSP['fn'], route: string): GSSP['wrappedFn'] {
-  return async function (context: GSSP['context']): Promise<GSSP['result']> {
-    return wrapperCore<GSSP>(origGetServerSideProps, context, route);
+export function withSentryGetServerSideProps(
+  origGetServerSideProps: GetServerSideProps,
+  parameterizedRoute: string,
+): GetServerSideProps {
+  return async function (
+    ...getServerSidePropsArguments: Parameters<GetServerSideProps>
+  ): ReturnType<GetServerSideProps> {
+    return callDataFetcherTraced(origGetServerSideProps, getServerSidePropsArguments, {
+      parameterizedRoute,
+      dataFetchingMethodName: 'getServerSideProps',
+    });
   };
 }

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

@@ -1,15 +1,26 @@
-import { GSProps } from './types';
-import { wrapperCore } from './wrapperUtils';
+import { GetStaticProps } from 'next';
+
+import { callDataFetcherTraced } from './wrapperUtils';
+
+type Props = { [key: string]: unknown };
 
 /**
  * Create a wrapped version of the user's exported `getStaticProps` function
  *
- * @param origGetStaticProps: The user's `getStaticProps` function
- * @param route: The page's parameterized route
+ * @param origGetStaticProps The user's `getStaticProps` function
+ * @param parameterizedRoute The page's parameterized route
  * @returns A wrapped version of the function
  */
-export function withSentryGetStaticProps(origGetStaticProps: GSProps['fn'], route: string): GSProps['wrappedFn'] {
-  return async function (context: GSProps['context']): Promise<GSProps['result']> {
-    return wrapperCore<GSProps>(origGetStaticProps, context, route);
+export function withSentryGetStaticProps(
+  origGetStaticProps: GetStaticProps<Props>,
+  parameterizedRoute: string,
+): GetStaticProps<Props> {
+  return async function (
+    ...getStaticPropsArguments: Parameters<GetStaticProps<Props>>
+  ): ReturnType<GetStaticProps<Props>> {
+    return callDataFetcherTraced(origGetStaticProps, getStaticPropsArguments, {
+      parameterizedRoute,
+      dataFetchingMethodName: 'getStaticProps',
+    });
   };
 }

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

@@ -1,58 +1,45 @@
 import { captureException } from '@sentry/core';
 import { getActiveTransaction } from '@sentry/tracing';
-import { Span } from '@sentry/types';
-
-import { DataFetchingFunction } from './types';
 
 /**
- * Create a span to track the wrapped function and update transaction name with parameterized route.
+ * Call a data fetcher and trace it. Only traces the function if there is an active transaction on the scope.
  *
- * @template T Types for `getInitialProps`, `getStaticProps`, and `getServerSideProps`
- * @param origFunction The user's exported `getInitialProps`, `getStaticProps`, or `getServerSideProps` function
- * @param context The context object passed by nextjs to the function
- * @param route The route currently being served
- * @returns The result of calling the user's function
+ * We only do the following until we move transaction creation into this function: When called, the wrapped function
+ * will also update the name of the active transaction with a parameterized route provided via the `options` argument.
  */
-export async function wrapperCore<T extends DataFetchingFunction>(
-  origFunction: T['fn'],
-  context: T['context'],
-  route: string,
-): Promise<T['result']> {
-  const transaction = getActiveTransaction();
-
-  if (transaction) {
-    // Pull off any leading underscores we've added in the process of wrapping the function
-    const wrappedFunctionName = origFunction.name.replace(/^_*/, '');
-
-    // TODO: Make sure that the given route matches the name of the active transaction (to prevent background data
-    // fetching from switching the name to a completely other route)
-    transaction.name = route;
-    transaction.metadata.source = 'route';
+export async function callDataFetcherTraced<F extends (...args: any[]) => Promise<any> | any>(
+  origFunction: F,
+  origFunctionArgs: Parameters<F>,
+  options: {
+    parameterizedRoute: string;
+    dataFetchingMethodName: string;
+  },
+): Promise<ReturnType<F>> {
+  const { parameterizedRoute, dataFetchingMethodName } = options;
 
-    // Capture the route, since pre-loading, revalidation, etc might mean that this span may happen during another
-    // route's transaction
-    const span = transaction.startChild({ op: 'nextjs.data', description: `${wrappedFunctionName} (${route})` });
-
-    const props = await callOriginal(origFunction, context, span);
-
-    span.finish();
+  const transaction = getActiveTransaction();
 
-    return props;
+  if (!transaction) {
+    return origFunction(...origFunctionArgs);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return callOriginal(origFunction, context);
-}
+  // TODO: Make sure that the given route matches the name of the active transaction (to prevent background data
+  // fetching from switching the name to a completely other route) -- We'll probably switch to creating a transaction
+  // right here so making that check will probabably not even be necessary.
+  // Logic will be: If there is no active transaction, start one with correct name and source. If there is an active
+  // transaction, create a child span with correct name and source.
+  transaction.name = parameterizedRoute;
+  transaction.metadata.source = 'route';
+
+  // Capture the route, since pre-loading, revalidation, etc might mean that this span may happen during another
+  // route's transaction
+  const span = transaction.startChild({
+    op: 'nextjs.data',
+    description: `${dataFetchingMethodName} (${parameterizedRoute})`,
+  });
 
-/** Call the original function, capturing any errors and finishing the span (if any) in case of error */
-async function callOriginal<T extends DataFetchingFunction>(
-  origFunction: T['fn'],
-  context: T['context'],
-  span?: Span,
-): Promise<T['result']> {
   try {
-    // eslint-disable-next-line prefer-const, @typescript-eslint/no-explicit-any
-    return (origFunction as any)(context);
+    return await origFunction(...origFunctionArgs);
   } catch (err) {
     if (span) {
       span.finish();