feat(react)!: Update ErrorBoundary componentStack type (#14742)

The principle thing that drove this change was this todo:

https://github.com/getsentry/sentry-javascript/blob/5b773779693cb52c9173c67c42cf2a9e48e927cb/packages/react/src/errorboundary.tsx#L101-L102

Specifically we wanted to remove `null` as a valid state from
`componentStack`, making sure that all exposed public API see it as
`string | undefined`. React always returns a `string` `componentStack`
from the error boundary, so this matches our typings more closely to
react.

By making this change, we can also clean up the `render` logic a little.
Specifically we can check for `state.componentStack === null` to
determine if a fallback is rendered, and then I went ahead and removed
some unnecessary nesting.

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 @nwalters512, @aloisklink, @arturovt, @benjick, @maximepvrt, and @mstrokin. Thank you for your contributions!
+Work in this release was contributed by @nwalters512, @aloisklink, @arturovt, @benjick, @maximepvrt, @mstrokin, and @kunal-511. Thank you for your contributions!
 
 - **feat(solidstart)!: Default to `--import` setup and add `autoInjectServerSentry` ([#14862](https://github.com/getsentry/sentry-javascript/pull/14862))**
 

docs/migration/v8-to-v9.md

@@ -126,6 +126,12 @@ Older Typescript versions _may_ still work, but we will not test them anymore an
 
   To customize which files are deleted after upload, define the `filesToDeleteAfterUpload` array with globs.
 
+### `@sentry/react`
+
+The `componentStack` field in the `ErrorBoundary` component is now typed as `string` instead of `string | null | undefined` for the `onError` and `onReset` lifecycle methods. This more closely matches the actual behavior of React, which always returns a `string` whenever a component stack is available.
+
+In the `onUnmount` lifecycle method, the `componentStack` field is now typed as `string | null`. The `componentStack` is `null` when no error has been thrown at time of unmount.
+
 ### Uncategorized (TODO)
 
 TODO

packages/react/src/errorboundary.tsx

@@ -17,6 +17,11 @@ export type FallbackRender = (errorData: {
   resetError(): void;
 }) => React.ReactElement;
 
+type OnUnmountType = {
+  (error: null, componentStack: null, eventId: null): void;
+  (error: unknown, componentStack: string, eventId: string): void;
+};
+
 export type ErrorBoundaryProps = {
   children?: React.ReactNode | (() => React.ReactNode);
   /** If a Sentry report dialog should be rendered on error */
@@ -42,15 +47,23 @@ export type ErrorBoundaryProps = {
    */
   handled?: boolean | 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;
-  /** Called on componentWillUnmount() */
-  onUnmount?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined;
+  /**
+   * Called when the error boundary resets due to a reset call from the
+   * fallback render props function.
+   */
+  onReset?: ((error: unknown, componentStack: string, eventId: string) => void) | undefined;
+  /**
+   * Called on componentWillUnmount() with the error, componentStack, and eventId.
+   *
+   * If the error boundary never encountered an error, the error
+   * componentStack, and eventId will be null.
+   */
+  onUnmount?: OnUnmountType | 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 =
@@ -65,7 +78,7 @@ type ErrorBoundaryState =
       eventId: string;
     };
 
-const INITIAL_STATE = {
+const INITIAL_STATE: ErrorBoundaryState = {
   componentStack: null,
   error: null,
   eventId: null,
@@ -104,20 +117,17 @@ 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 handled = this.props.handled != null ? this.props.handled : !!this.props.fallback;
       const eventId = captureReactException(error, errorInfo, { mechanism: { handled } });
 
       if (onError) {
-        onError(error, passedInComponentStack, eventId);
+        onError(error, componentStack, eventId);
       }
       if (showDialog) {
         this._lastEventId = eventId;
@@ -143,7 +153,15 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     const { error, componentStack, eventId } = this.state;
     const { onUnmount } = this.props;
     if (onUnmount) {
-      onUnmount(error, componentStack, eventId);
+      if (this.state === INITIAL_STATE) {
+        // If the error boundary never encountered an error, call onUnmount with null values
+        onUnmount(null, null, null);
+      } else {
+        // `componentStack` and `eventId` are guaranteed to be non-null here because `onUnmount` is only called
+        // when the error boundary has already encountered an error.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        onUnmount(error, componentStack!, eventId!);
+      }
     }
 
     if (this._cleanupHook) {
@@ -156,7 +174,10 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     const { onReset } = this.props;
     const { error, componentStack, eventId } = this.state;
     if (onReset) {
-      onReset(error, componentStack, eventId);
+      // `componentStack` and `eventId` are guaranteed to be non-null here because `onReset` is only called
+      // when the error boundary has already encountered an error.
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      onReset(error, componentStack!, eventId!);
     }
     this.setState(INITIAL_STATE);
   }
@@ -165,35 +186,33 @@ 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.bind(this),
-          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');
-      }
+    // `componentStack` is only null in the initial state, when no error has been captured.
+    // If an error has been captured, `componentStack` will be a string.
+    // We cannot check `state.error` because null can be thrown as an error.
+    if (state.componentStack === 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;
   }
 }