fix(react): Set handled value in ErrorBoundary depending on fallbac…

…k [v7] (#11037) Backport of #10989
getsentry · Mar 12, 2024 · 1c71e8e · 1c71e8e
1 parent c6e03a3
commit 1c71e8e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/packages/react/src/errorboundary.tsx b/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) {

diff --git a/packages/react/test/errorboundary.test.tsx b/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 },
+      });
+    });
   });
 });