fix(react): Set handled value in ErrorBoundary depending on fallback (#10989)

Previously, we made a change to always mark such errors as unhandled
(#8914). However, as pointed out and discussed in #10985, this isn't
always the best default value. I propose we set handled/unhandled
depending on the presence of the `fallback` component. If users specify
a fallback, I think it's safe to mark the error handled, given that
users show something else instead of the errored component.

Author: Lms24

packages/react/src/errorboundary.tsx

@@ -147,7 +147,9 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
         captureContext: {
           contexts: { react: { componentStack } },
         },
-        mechanism: { handled: false },
+        // If users provide a fallback component we can assume they are handling the error.
+        // Therefore, we set the mechanism depending on the presence of the fallback prop.
+        mechanism: { handled: !!this.props.fallback },
       });
 
       if (onError) {

packages/react/test/errorboundary.test.tsx

@@ -242,7 +242,7 @@ describe('ErrorBoundary', () => {
         captureContext: {
           contexts: { react: { componentStack: expect.any(String) } },
         },
-        mechanism: { handled: false },
+        mechanism: { handled: true },
       });
 
       expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
@@ -300,7 +300,7 @@ describe('ErrorBoundary', () => {
         captureContext: {
           contexts: { react: { componentStack: expect.any(String) } },
         },
-        mechanism: { handled: false },
+        mechanism: { handled: true },
       });
 
       // Check if error.cause -> react component stack
@@ -339,7 +339,7 @@ describe('ErrorBoundary', () => {
         captureContext: {
           contexts: { react: { componentStack: expect.any(String) } },
         },
-        mechanism: { handled: false },
+        mechanism: { handled: true },
       });
 
       expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
@@ -383,7 +383,7 @@ describe('ErrorBoundary', () => {
         captureContext: {
           contexts: { react: { componentStack: expect.any(String) } },
         },
-        mechanism: { handled: false },
+        mechanism: { handled: true },
       });
 
       expect(mockOnError.mock.calls[0][0]).toEqual(mockCaptureException.mock.calls[0][0]);
@@ -515,6 +515,48 @@ describe('ErrorBoundary', () => {
       expect(mockOnReset).toHaveBeenCalledTimes(1);
       expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
     });
+
+    it('sets `handled: true` when a fallback is provided', async () => {
+      render(
+        <TestApp fallback={({ resetError }) => <button data-testid="reset" onClick={resetError} />}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(1);
+      expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
+        captureContext: {
+          contexts: { react: { componentStack: expect.any(String) } },
+        },
+        mechanism: { handled: true },
+      });
+    });
+
+    it('sets `handled: false` when no fallback is provided', async () => {
+      render(
+        <TestApp>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(1);
+      expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
+        captureContext: {
+          contexts: { react: { componentStack: expect.any(String) } },
+        },
+        mechanism: { handled: false },
+      });
+    });
   });
 });