ref(react): Add mechanism to reactErrorHandler and adjust mechanism in ErrorBoundary (#17602)

Both mechanisms now follow the trace origin naming scheme.
Decided to make the `handled` value of `reactErrorHandler` depend on the
definedness of the passed callback.

Author: Lms24

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

@@ -19,6 +19,20 @@ test('Catches errors caught by error boundary', async ({ page }) => {
 
   expect(errorEvent.exception?.values).toHaveLength(2);
   expect(errorEvent.exception?.values?.[0]?.value).toBe('caught error');
+  expect(errorEvent.exception?.values?.[0]?.mechanism).toEqual({
+    type: 'auto.function.react.error_handler',
+    handled: true, // true because a callback was provided
+    exception_id: 1,
+    parent_id: 0,
+    source: 'cause',
+  });
+
+  expect(errorEvent.exception?.values?.[1]?.value).toBe('caught error');
+  expect(errorEvent.exception?.values?.[1]?.mechanism).toEqual({
+    type: 'generic',
+    handled: true, // true because a callback was provided
+    exception_id: 0,
+  });
 });
 
 test('Catches errors uncaught by error boundary', async ({ page }) => {
@@ -39,4 +53,18 @@ test('Catches errors uncaught by error boundary', async ({ page }) => {
 
   expect(errorEvent.exception?.values).toHaveLength(2);
   expect(errorEvent.exception?.values?.[0]?.value).toBe('uncaught error');
+  expect(errorEvent.exception?.values?.[0]?.mechanism).toEqual({
+    type: 'auto.function.react.error_handler',
+    handled: true, // true because a callback was provided
+    exception_id: 1,
+    parent_id: 0,
+    source: 'cause',
+  });
+
+  expect(errorEvent.exception?.values?.[1]?.value).toBe('uncaught error');
+  expect(errorEvent.exception?.values?.[1]?.mechanism).toEqual({
+    type: 'generic',
+    handled: true, // true because a callback was provided
+    exception_id: 0,
+  });
 });

packages/react/src/error.ts

@@ -95,8 +95,11 @@ export function reactErrorHandler(
 ): (error: any, errorInfo: ErrorInfo) => void {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (error: any, errorInfo: ErrorInfo) => {
-    const eventId = captureReactException(error, errorInfo);
-    if (callback) {
+    const hasCallback = !!callback;
+    const eventId = captureReactException(error, errorInfo, {
+      mechanism: { handled: hasCallback, type: 'auto.function.react.error_handler' },
+    });
+    if (hasCallback) {
       callback(error, errorInfo, eventId);
     }
   };

packages/react/src/errorboundary.tsx

@@ -123,7 +123,9 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       }
 
       const handled = this.props.handled != null ? this.props.handled : !!this.props.fallback;
-      const eventId = captureReactException(error, errorInfo, { mechanism: { handled } });
+      const eventId = captureReactException(error, errorInfo, {
+        mechanism: { handled, type: 'auto.function.react.error_boundary' },
+      });
 
       if (onError) {
         onError(error, componentStack, eventId);

packages/react/test/error.test.ts

@@ -1,5 +1,6 @@
-import { describe, expect, test } from 'vitest';
-import { isAtLeastReact17 } from '../src/error';
+import * as SentryBrowser from '@sentry/browser';
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
+import { isAtLeastReact17, reactErrorHandler } from '../src/error';
 
 describe('isAtLeastReact17', () => {
   test.each([
@@ -13,3 +14,45 @@ describe('isAtLeastReact17', () => {
     expect(isAtLeastReact17(input)).toBe(output);
   });
 });
+
+describe('reactErrorHandler', () => {
+  const captureException = vi.spyOn(SentryBrowser, 'captureException');
+
+  beforeEach(() => {
+    captureException.mockClear();
+  });
+
+  it('captures errors as unhandled when no callback is provided', () => {
+    const error = new Error('test error');
+    const errorInfo = { componentStack: 'component stack' };
+
+    const handler = reactErrorHandler();
+
+    handler(error, errorInfo);
+
+    expect(captureException).toHaveBeenCalledTimes(1);
+    expect(captureException).toHaveBeenCalledWith(error, {
+      mechanism: { handled: false, type: 'auto.function.react.error_handler' },
+    });
+  });
+
+  it('captures errors as handled when a callback is provided', () => {
+    captureException.mockReturnValueOnce('custom-event-id');
+
+    const error = new Error('test error');
+    const errorInfo = { componentStack: 'component stack' };
+
+    const callback = vi.fn();
+    const handler = reactErrorHandler(callback);
+
+    handler(error, errorInfo);
+
+    expect(captureException).toHaveBeenCalledTimes(1);
+    expect(captureException).toHaveBeenCalledWith(error, {
+      mechanism: { handled: true, type: 'auto.function.react.error_handler' },
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(error, errorInfo, 'custom-event-id');
+  });
+});

packages/react/test/errorboundary.test.tsx

@@ -385,7 +385,7 @@ describe('ErrorBoundary', () => {
 
       expect(mockCaptureException).toHaveBeenCalledTimes(1);
       expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Error), {
-        mechanism: { handled: true },
+        mechanism: { handled: true, type: 'auto.function.react.error_boundary' },
       });
 
       expect(scopeSetContextSpy).toHaveBeenCalledTimes(1);
@@ -444,7 +444,7 @@ describe('ErrorBoundary', () => {
 
       expect(mockCaptureException).toHaveBeenCalledTimes(1);
       expect(mockCaptureException).toHaveBeenLastCalledWith('bam', {
-        mechanism: { handled: true },
+        mechanism: { handled: true, type: 'auto.function.react.error_boundary' },
       });
 
       expect(scopeSetContextSpy).toHaveBeenCalledTimes(1);
@@ -483,7 +483,7 @@ describe('ErrorBoundary', () => {
 
       expect(mockCaptureException).toHaveBeenCalledTimes(1);
       expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Error), {
-        mechanism: { handled: true },
+        mechanism: { handled: true, type: 'auto.function.react.error_boundary' },
       });
 
       expect(scopeSetContextSpy).toHaveBeenCalledTimes(1);
@@ -527,7 +527,7 @@ describe('ErrorBoundary', () => {
 
       expect(mockCaptureException).toHaveBeenCalledTimes(1);
       expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Error), {
-        mechanism: { handled: true },
+        mechanism: { handled: true, type: 'auto.function.react.error_boundary' },
       });
 
       expect(scopeSetContextSpy).toHaveBeenCalledTimes(1);
@@ -695,7 +695,7 @@ describe('ErrorBoundary', () => {
 
         expect(mockCaptureException).toHaveBeenCalledTimes(1);
         expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
-          mechanism: { handled: expected },
+          mechanism: { handled: expected, type: 'auto.function.react.error_boundary' },
         });
 
         expect(scopeSetContextSpy).toHaveBeenCalledTimes(1);