feat(nextjs): Instrument SSR page components

Author: Luca Forstner

packages/nextjs/src/common/index.ts

@@ -41,3 +41,5 @@ export { wrapRouteHandlerWithSentry } from './wrapRouteHandlerWithSentry';
 export { wrapApiHandlerWithSentryVercelCrons } from './wrapApiHandlerWithSentryVercelCrons';
 
 export { wrapMiddlewareWithSentry } from './wrapMiddlewareWithSentry';
+
+export { wrapPageComponentWithSentry } from './wrapPageComponentWithSentry';

packages/nextjs/src/common/wrapPageComponentWithSentry.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/core';
+
+/**
+ * Wraps a page component with Sentry error instrumentation.
+ */
+export function wrapPageComponentWithSentry(pageComponent: any): unknown {
+  const patchingTarget =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    typeof pageComponent.render === 'function'
+      ? // eslint-disable-next-line @typescript-eslint/unbound-method, @typescript-eslint/no-unsafe-member-access
+        pageComponent.render
+      : typeof pageComponent === 'function'
+      ? pageComponent
+      : undefined;
+
+  if (patchingTarget === undefined) {
+    return pageComponent;
+  }
+
+  return new Proxy(patchingTarget, {
+    apply(target, thisArg, argArray) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        return target.apply(thisArg, argArray);
+      } catch (e) {
+        captureException(e);
+        throw e;
+      }
+    },
+  });
+}

packages/nextjs/src/config/templates/pageWrapperTemplate.ts

@@ -49,7 +49,7 @@ export const getServerSideProps =
     ? Sentry.wrapGetServerSidePropsWithSentry(origGetServerSideProps, '__ROUTE__')
     : undefined;
 
-export default pageComponent;
+export default pageComponent ? Sentry.wrapPageComponentWithSentry(pageComponent as any) : pageComponent;
 
 // Re-export anything exported by the page module we're wrapping. When processing this code, Rollup is smart enough to
 // not include anything whose name matchs something we've explicitly exported above.

packages/nextjs/src/index.types.ts

@@ -186,3 +186,10 @@ export declare function wrapApiHandlerWithSentryVercelCrons<F extends (...args:
   WrappingTarget: F,
   vercelCronsConfig: VercelCronsConfig,
 ): F;
+
+/**
+ * Wraps a page component with Sentry error instrumentation.
+ */
+export declare function wrapPageComponentWithSentry<
+  F extends ((...args: any[]) => any) | (new (...args: any[]) => any),
+>(WrappingTarget: F): F;