From f505af4e9fcef75d6fc9db0d0ae8fa37dc124cc2 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Tue, 31 Jan 2023 12:55:25 +0000
Subject: [PATCH] fix(nextjs): Add isomorphic versions of `ErrorBoundary`,
 `withErrorBoundary` and `showReportDialog`

---
 packages/nextjs/package.json         |  2 +-
 packages/nextjs/src/index.types.ts   |  4 ++++
 packages/nextjs/src/server/index.ts  | 36 +++++++++++++++++++++++++---
 packages/react/src/errorboundary.tsx |  2 +-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index ba1781005454..0fd11be7bce3 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "next": "^10.0.8 || ^11.0 || ^12.0 || ^13.0",
-    "react": "15.x || 16.x || 17.x || 18.x",
+    "react": "16.x || 17.x || 18.x",
     "webpack": ">= 4.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/packages/nextjs/src/index.types.ts b/packages/nextjs/src/index.types.ts
index 28b6314c5225..58c8ac33da29 100644
--- a/packages/nextjs/src/index.types.ts
+++ b/packages/nextjs/src/index.types.ts
@@ -30,6 +30,10 @@ export declare function flush(timeout?: number | undefined): PromiseLike<boolean
 export declare function lastEventId(): string | undefined;
 export declare function getSentryRelease(fallback?: string): string | undefined;
 
+export declare const ErrorBoundary: typeof clientSdk.ErrorBoundary;
+export declare const showReportDialog: typeof clientSdk.showReportDialog;
+export declare const withErrorBoundary: typeof clientSdk.withErrorBoundary;
+
 /**
  * @deprecated Use `wrapApiHandlerWithSentry` instead
  */
diff --git a/packages/nextjs/src/server/index.ts b/packages/nextjs/src/server/index.ts
index 8ab42f9aa829..94404082b09a 100644
--- a/packages/nextjs/src/server/index.ts
+++ b/packages/nextjs/src/server/index.ts
@@ -17,9 +17,39 @@ import { isBuild } from './utils/isBuild';
 export * from '@sentry/node';
 export { captureUnderscoreErrorException } from '../common/_error';
 
-// Here we want to make sure to only include what doesn't have browser specifics
-// because or SSR of next.js we can only use this.
-export { ErrorBoundary, showReportDialog, withErrorBoundary } from '@sentry/react';
+/**
+ * A passthrough error boundary for the server that doesn't depend on any react. Error boundaries don't catch SSR errors
+ * so they should simply be a passthrough.
+ */
+export const ErrorBoundary = (props: React.PropsWithChildren<unknown>): React.ReactNode => {
+  if (!props.children) {
+    return null;
+  }
+
+  if (typeof props.children === 'function') {
+    return (props.children as () => React.ReactNode)();
+  }
+
+  // since Next.js >= 10 requires React ^16.6.0 we are allowed to return children like this here
+  return props.children as React.ReactNode;
+};
+
+/**
+ * A passthrough error boundary wrapper for the server that doesn't depend on any react. Error boundaries don't catch
+ * SSR errors so they should simply be a passthrough.
+ */
+export function withErrorBoundary<P extends Record<string, any>>(
+  WrappedComponent: React.ComponentType<P>,
+): React.FC<P> {
+  return WrappedComponent as React.FC<P>;
+}
+
+/**
+ * Just a passthrough since we're on the server and showing the report dialog on the server doesn't make any sense.
+ */
+export function showReportDialog(): void {
+  return;
+}
 
 const globalWithInjectedValues = global as typeof global & {
   __rewriteFramesDistDir__: string;
diff --git a/packages/react/src/errorboundary.tsx b/packages/react/src/errorboundary.tsx
index 907f7e029314..7e68416a67ce 100644
--- a/packages/react/src/errorboundary.tsx
+++ b/packages/react/src/errorboundary.tsx
@@ -1,4 +1,4 @@
-import type { ReportDialogOptions, Scope} from '@sentry/browser';
+import type { ReportDialogOptions, Scope } from '@sentry/browser';
 import { captureException, showReportDialog, withScope } from '@sentry/browser';
 import { isError, logger } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';