await params

Author: chargome

packages/nextjs/src/common/utils/wrapperUtils.ts

@@ -6,6 +6,7 @@ import {
   getRootSpan,
   getTraceData,
   httpRequestToRequestData,
+  isThenable,
 } from '@sentry/core';
 import type { IncomingMessage, ServerResponse } from 'http';
 import { TRANSACTION_ATTR_SENTRY_ROUTE_BACKFILL } from '../span-attributes-with-logic-attached';
@@ -102,3 +103,39 @@ export async function callDataFetcherTraced<F extends (...args: any[]) => Promis
     throw e;
   }
 }
+
+/**
+ * Extracts the params and searchParams from the props object.
+ *
+ * Depending on the next version, params and searchParams may be a promise.
+ */
+export async function safeExtractParamsAndSearchParamsFromProps(props: unknown): Promise<{
+  params: Record<string, string> | undefined;
+  searchParams: Record<string, string> | undefined;
+}> {
+  let params =
+    props && typeof props === 'object' && 'params' in props
+      ? (props.params as Record<string, string> | Promise<Record<string, string>> | undefined)
+      : undefined;
+  if (isThenable(params)) {
+    try {
+      params = await params;
+    } catch (e) {
+      params = undefined;
+    }
+  }
+
+  let searchParams =
+    props && typeof props === 'object' && 'searchParams' in props
+      ? (props.searchParams as Record<string, string> | Promise<Record<string, string>> | undefined)
+      : undefined;
+  if (isThenable(searchParams)) {
+    try {
+      searchParams = await searchParams;
+    } catch (e) {
+      searchParams = undefined;
+    }
+  }
+
+  return { params, searchParams };
+}

packages/nextjs/src/common/wrapGenerationFunctionWithSentry.ts

@@ -24,6 +24,7 @@ import { isNotFoundNavigationError, isRedirectNavigationError } from './nextNavi
 import { TRANSACTION_ATTR_SENTRY_TRACE_BACKFILL } from './span-attributes-with-logic-attached';
 import { commonObjectToIsolationScope, commonObjectToPropagationContext } from './utils/tracingUtils';
 import { getSanitizedRequestUrl } from './utils/urls';
+import { safeExtractParamsAndSearchParamsFromProps } from './utils/wrapperUtils';
 /**
  * Wraps a generation function (e.g. generateMetadata) with Sentry error and performance instrumentation.
  */
@@ -34,7 +35,7 @@ export function wrapGenerationFunctionWithSentry<F extends (...args: any[]) => a
 ): F {
   const { requestAsyncStorage, componentRoute, componentType, generationFunctionIdentifier } = context;
   return new Proxy(generationFunction, {
-    apply: (originalFunction, thisArg, args) => {
+    apply: async (originalFunction, thisArg, args) => {
       const requestTraceId = getActiveSpan()?.spanContext().traceId;
       let headers: WebFetchHeaders | undefined = undefined;
       // We try-catch here just in case anything goes wrong with the async storage here goes wrong since it is Next.js internal API
@@ -65,9 +66,7 @@ export function wrapGenerationFunctionWithSentry<F extends (...args: any[]) => a
       let data: Record<string, unknown> | undefined = undefined;
       if (getClient()?.getOptions().sendDefaultPii) {
         const props: unknown = args[0];
-        const params = props && typeof props === 'object' && 'params' in props ? props.params : undefined;
-        const searchParams =
-          props && typeof props === 'object' && 'searchParams' in props ? props.searchParams : undefined;
+        const { params, searchParams } = await safeExtractParamsAndSearchParamsFromProps(props);
         data = { params, searchParams };
       }
 

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -26,6 +26,7 @@ import { TRANSACTION_ATTR_SENTRY_TRACE_BACKFILL } from './span-attributes-with-l
 import { flushSafelyWithTimeout } from './utils/responseEnd';
 import { commonObjectToIsolationScope, commonObjectToPropagationContext } from './utils/tracingUtils';
 import { getSanitizedRequestUrl } from './utils/urls';
+import { safeExtractParamsAndSearchParamsFromProps } from './utils/wrapperUtils';
 
 /**
  * Wraps an `app` directory server component with Sentry error instrumentation.
@@ -40,7 +41,7 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
   // Next.js will turn them into synchronous functions and it will transform any `await`s into instances of the `use`
   // hook. 🤯
   return new Proxy(appDirComponent, {
-    apply: (originalFunction, thisArg, args) => {
+    apply: async (originalFunction, thisArg, args) => {
       const requestTraceId = getActiveSpan()?.spanContext().traceId;
       const isolationScope = commonObjectToIsolationScope(context.headers);
 
@@ -64,10 +65,8 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
 
       if (getClient()?.getOptions().sendDefaultPii) {
         const props: unknown = args[0];
-        params =
-          props && typeof props === 'object' && 'params' in props
-            ? (props.params as Record<string, string>)
-            : undefined;
+        const { params: paramsFromProps } = await safeExtractParamsAndSearchParamsFromProps(props);
+        params = paramsFromProps;
       }
 
       isolationScope.setSDKProcessingMetadata({