fix e2e tests

Author: AbhiPrasad

dev-packages/e2e-tests/test-applications/react-19/src/index.tsx

@@ -5,7 +5,6 @@ import ReactDOM from 'react-dom/client';
 import Index from './pages/Index';
 
 Sentry.init({
-  debug: true,
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn:
     process.env.REACT_APP_E2E_TEST_DSN ||
@@ -15,8 +14,12 @@ Sentry.init({
 });
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement, {
-  onUncaughtError: Sentry.reactErrorHandler(),
-  onCaughtError: Sentry.reactErrorHandler(),
+  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
+    console.warn(error, errorInfo);
+  }),
+  onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
+    console.warn(error, errorInfo);
+  }),
 });
 
 root.render(

dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx

@@ -42,7 +42,7 @@ class SampleErrorBoundary extends React.Component {
 
   render() {
     if (this.state.error) {
-      return <div>Caught an error: {this.state.error}</div>;
+      return <div>Caught an error: {JSON.stringify(this.state.error)}</div>;
     }
     return this.props.children;
   }

dev-packages/e2e-tests/test-applications/react-19/tests/errors.test.ts

@@ -2,8 +2,12 @@ import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/event-proxy-server';
 
 test('Catches errors caught by error boundary', async ({ page }) => {
+  page.on('console', message => {
+    expect(message.text()).toContain('caught error');
+  });
+
   const errorEventPromise = waitForError('react-19', event => {
-    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+    return !event.type && event.exception?.values?.[0]?.value === 'caught error';
   });
 
   await page.goto('/');
@@ -13,13 +17,17 @@ test('Catches errors caught by error boundary', async ({ page }) => {
 
   const errorEvent = await errorEventPromise;
 
-  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values).toHaveLength(2);
   expect(errorEvent.exception?.values?.[0]?.value).toBe('caught error');
 });
 
 test('Catches errors uncaught by error boundary', async ({ page }) => {
+  page.on('console', message => {
+    expect(message.text()).toContain('uncaught error');
+  });
+
   const errorEventPromise = waitForError('react-19', event => {
-    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+    return !event.type && event.exception?.values?.[0]?.value === 'uncaught error';
   });
 
   await page.goto('/');
@@ -29,6 +37,6 @@ test('Catches errors uncaught by error boundary', async ({ page }) => {
 
   const errorEvent = await errorEventPromise;
 
-  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values).toHaveLength(2);
   expect(errorEvent.exception?.values?.[0]?.value).toBe('uncaught error');
 });

packages/react/package.json

@@ -56,7 +56,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@types/history-4": "npm:@types/[email protected]",
     "@types/history-5": "npm:@types/[email protected]",
-    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/hoist-non-react-statics": "^3.3.5",
     "@types/node-fetch": "^2.6.0",
     "@types/react": "^18.0.0",
     "@types/react-router-3": "npm:@types/[email protected]",

packages/react/src/errorboundary.tsx

@@ -36,13 +36,13 @@ export type ErrorBoundaryProps = {
    */
   fallback?: React.ReactElement | FallbackRender | undefined;
   /** Called when the error boundary encounters an error */
-  onError?: ((error: unknown, componentStack: string, eventId: string) => void) | undefined;
+  onError?: ((error: unknown, componentStack: string | undefined, 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, eventId: string | null) => void) | undefined;
+  onReset?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined;
   /** Called on componentWillUnmount() */
-  onUnmount?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined;
+  onUnmount?: ((error: unknown, componentStack: string | null | undefined, 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;
 };
@@ -97,16 +97,19 @@ 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, componentStack);
+        beforeCapture(scope, error, passedInComponentStack);
       }
 
       const eventId = captureReactException(error, errorInfo, { mechanism: { handled: !!this.props.fallback } });
 
       if (onError) {
-        onError(error, componentStack, eventId);
+        onError(error, passedInComponentStack, eventId);
       }
       if (showDialog) {
         this._lastEventId = eventId;
@@ -186,7 +189,6 @@ function withErrorBoundary<P extends Record<string, any>>(
   WrappedComponent: React.ComponentType<P>,
   errorBoundaryOptions: ErrorBoundaryProps,
 ): React.FC<P> {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
 
   const Wrapped: React.FC<P> = (props: P) => (
@@ -195,12 +197,13 @@ function withErrorBoundary<P extends Record<string, any>>(
     </ErrorBoundary>
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   Wrapped.displayName = `errorBoundary(${componentDisplayName})`;
 
   // Copy over static methods from Wrapped component to Profiler HOC
   // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
-  hoistNonReactStatics(Wrapped, WrappedComponent);
+  // Need to set type to any because of hoist-non-react-statics typing
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  hoistNonReactStatics(Wrapped, WrappedComponent as any);
   return Wrapped;
 }
 

yarn.lock

@@ -8469,10 +8469,10 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.4.tgz#0b6c62240d1fac020853aa5608758991d9f6ef3d"
   integrity sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg==
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hoist-non-react-statics@^3.3.5":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"