Wrap under the assumption that server components may return promises and non-promises

Author: Luca Forstner

packages/nextjs/src/edge/wrapAppDirComponentWithSentry.ts

@@ -4,15 +4,28 @@ import { captureException } from '@sentry/core';
  * Wraps an `app` directory server component with Sentry error instrumentation.
  */
 export function wrapAppDirComponentWithSentry(wrappingTarget: any): any {
-  // Super interesting: even though users may define server components as async functions, Next.js will turn them into
-  // synchronous functions and it will transform any`await`s into instances of the`use` hook. 🤯
+  // Even though users may define server components as async functions, for the client bundles
+  // Next.js will turn them into synchronous functionsf and it will transform any`await`s into instances of the`use`
+  // hook. 🤯
   return function sentryWrappedServerComponent(this: unknown, ...args: any[]) {
+    let maybePromiseResult;
+
     try {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      return wrappingTarget.apply(this, args);
+      maybePromiseResult = wrappingTarget.apply(this, args);
     } catch (e) {
       captureException(e);
       throw e;
     }
+
+    if (typeof maybePromiseResult === 'object' && maybePromiseResult !== null && 'then' in maybePromiseResult) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      return maybePromiseResult.then(null, (e: Error) => {
+        captureException(e);
+        throw e;
+      });
+    } else {
+      return maybePromiseResult;
+    }
   };
 }

packages/nextjs/src/server/wrapAppDirComponentWithSentry.ts

@@ -4,15 +4,28 @@ import { captureException } from '@sentry/core';
  * Wraps an `app` directory server component with Sentry error instrumentation.
  */
 export function wrapAppDirComponentWithSentry(wrappingTarget: any): any {
-  // Super interesting: even though users may define server components as async functions, Next.js will turn them into
-  // synchronous functions and it will transform any`await`s into instances of the`use` hook. 🤯
+  // Even though users may define server components as async functions, for the client bundles
+  // Next.js will turn them into synchronous functionsf and it will transform any`await`s into instances of the`use`
+  // hook. 🤯
   return function sentryWrappedServerComponent(this: unknown, ...args: any[]) {
+    let maybePromiseResult;
+
     try {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      return wrappingTarget.apply(this, args);
+      maybePromiseResult = wrappingTarget.apply(this, args);
     } catch (e) {
       captureException(e);
       throw e;
     }
+
+    if (typeof maybePromiseResult === 'object' && maybePromiseResult !== null && 'then' in maybePromiseResult) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      return maybePromiseResult.then(null, (e: Error) => {
+        captureException(e);
+        throw e;
+      });
+    } else {
+      return maybePromiseResult;
+    }
   };
 }