fix(nextjs): Add isomorphic versions of ErrorBoundary, withErrorBoundary and showReportDialog (#6987)

Author: Luca Forstner

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": {

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
  */

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;

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';