feat(react)!: Update ErrorBoundary componentStack type

Author: AbhiPrasad

CHANGELOG.md

@@ -10,7 +10,7 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
-Work in this release was contributed by @antonis, and @maximepvrt. Thank you for your contributions!
+Work in this release was contributed by @antonis, @maximepvrt, and @kunal-511. Thank you for your contributions!
 
 ## 8.45.0
 

docs/migration/v8-to-v9.md

@@ -70,6 +70,10 @@ Sentry.init({
 
 - When `skipOpenTelemetrySetup: true` is configured, `httpIntegration({ spans: false })` will be configured by default. This means that you no longer have to specify this yourself in this scenario. With this change, no spans are emitted once `skipOpenTelemetrySetup: true` is configured, without any further configuration being needed.
 
+### `@sentry/react`
+
+The `componentStack` field in the `ErrorBoundary` component is now typed as `string | undefined` instead of `string | null | undefined`. This more closely matches the actual behavior of React, which always returns a `string` whenever a component stack is available. `undefined` is only returned if no error has been caught by the error boundary.
+
 ### Uncategorized (TODO)
 
 TODO

packages/react/src/errorboundary.tsx

@@ -36,15 +36,15 @@ export type ErrorBoundaryProps = {
    */
   fallback?: React.ReactElement | FallbackRender | undefined;
   /** Called when the error boundary encounters an error */
-  onError?: ((error: unknown, componentStack: string | undefined, eventId: string) => void) | undefined;
+  onError?: ((error: unknown, componentStack: string, eventId: string) => void) | undefined;
   /** Called on componentDidMount() */
   onMount?: (() => void) | undefined;
   /** Called if resetError() is called from the fallback render props function  */
-  onReset?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined;
+  onReset?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined;
   /** Called on componentWillUnmount() */
-  onUnmount?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined;
+  onUnmount?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined;
   /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */
-  beforeCapture?: ((scope: Scope, error: unknown, componentStack: string | undefined) => void) | undefined;
+  beforeCapture?: ((scope: Scope, error: unknown, componentStack: string) => void) | undefined;
 };
 
 type ErrorBoundaryState =
@@ -59,7 +59,7 @@ type ErrorBoundaryState =
       eventId: string;
     };
 
-const INITIAL_STATE = {
+const INITIAL_STATE: ErrorBoundaryState = {
   componentStack: null,
   error: null,
   eventId: null,
@@ -98,19 +98,16 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
 
   public componentDidCatch(error: unknown, errorInfo: React.ErrorInfo): void {
     const { componentStack } = errorInfo;
-    // TODO(v9): Remove this check and type `componentStack` to be React.ErrorInfo['componentStack'].
-    const passedInComponentStack: string | undefined = componentStack == null ? undefined : componentStack;
-
     const { beforeCapture, onError, showDialog, dialogOptions } = this.props;
     withScope(scope => {
       if (beforeCapture) {
-        beforeCapture(scope, error, passedInComponentStack);
+        beforeCapture(scope, error, componentStack);
       }
 
       const eventId = captureReactException(error, errorInfo, { mechanism: { handled: !!this.props.fallback } });
 
       if (onError) {
-        onError(error, passedInComponentStack, eventId);
+        onError(error, componentStack, eventId);
       }
       if (showDialog) {
         this._lastEventId = eventId;
@@ -158,35 +155,30 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     const { fallback, children } = this.props;
     const state = this.state;
 
-    if (state.error) {
-      let element: React.ReactElement | undefined = undefined;
-      if (typeof fallback === 'function') {
-        element = React.createElement(fallback, {
-          error: state.error,
-          componentStack: state.componentStack as string,
-          resetError: this.resetErrorBoundary,
-          eventId: state.eventId as string,
-        });
-      } else {
-        element = fallback;
-      }
-
-      if (React.isValidElement(element)) {
-        return element;
-      }
-
-      if (fallback) {
-        DEBUG_BUILD && logger.warn('fallback did not produce a valid ReactElement');
-      }
+    if (state.error === null) {
+      return typeof children === 'function' ? children() : children;
+    }
 
-      // Fail gracefully if no fallback provided or is not valid
-      return null;
+    const element =
+      typeof fallback === 'function'
+        ? React.createElement(fallback, {
+            error: state.error,
+            componentStack: state.componentStack,
+            resetError: this.resetErrorBoundary,
+            eventId: state.eventId,
+          })
+        : fallback;
+
+    if (React.isValidElement(element)) {
+      return element;
     }
 
-    if (typeof children === 'function') {
-      return (children as () => React.ReactNode)();
+    if (fallback) {
+      DEBUG_BUILD && logger.warn('fallback did not produce a valid ReactElement');
     }
-    return children;
+
+    // Fail gracefully if no fallback provided or is not valid
+    return null;
   }
 }