ref(react): Rely on error.cause to link ErrorBoundary errors

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -1,13 +1,4 @@
-import {
-  captureEvent,
-  captureException,
-  eventFromException,
-  ReportDialogOptions,
-  Scope,
-  showReportDialog,
-  withScope,
-} from '@sentry/browser';
-import { Event } from '@sentry/types';
+import { captureException, ReportDialogOptions, Scope, showReportDialog, withScope } from '@sentry/browser';
 import { logger, parseSemver } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
@@ -71,31 +62,14 @@ const INITIAL_STATE = {
  * @param error An error captured by React Error Boundary
  * @param componentStack The component stacktrace
  */
-function captureReactErrorBoundaryError(error: Error, componentStack: string): string {
-  const errorBoundaryError = new Error(error.message);
-  errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
-  errorBoundaryError.stack = componentStack;
-
-  let errorBoundaryEvent: Event = {};
-  void eventFromException({}, errorBoundaryError).then(e => {
-    errorBoundaryEvent = e;
-  });
-
-  if (
-    errorBoundaryEvent.exception &&
-    Array.isArray(errorBoundaryEvent.exception.values) &&
-    reactVersion.major &&
-    reactVersion.major >= 17
-  ) {
-    let originalEvent: Event = {};
-    void eventFromException({}, error).then(e => {
-      originalEvent = e;
-    });
-    if (originalEvent.exception && Array.isArray(originalEvent.exception.values)) {
-      originalEvent.exception.values = [...errorBoundaryEvent.exception.values, ...originalEvent.exception.values];
-    }
-
-    return captureEvent(originalEvent);
+function captureReactErrorBoundaryError(error: Error & { cause?: Error }, componentStack: string): string {
+  if (reactVersion.major && reactVersion.major >= 17) {
+    const errorBoundaryError = new Error(error.message);
+    errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
+    errorBoundaryError.stack = componentStack;
+
+    error.cause = errorBoundaryError;
+    return captureException(error);
   }
 
   return captureException(error, { contexts: { react: { componentStack } } });

packages/react/test/errorboundary-integration.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { useState } from 'react';
+
+import { init } from '../src';
+import { ErrorBoundary, ErrorBoundaryProps } from '../src/errorboundary';
+
+function Boo({ title }: { title: string }): JSX.Element {
+  throw new Error(title);
+}
+
+function Bam(): JSX.Element {
+  const [title] = useState('boom');
+  return <Boo title={title} />;
+}
+
+const TestApp: React.FC<ErrorBoundaryProps> = ({ children, ...props }) => {
+  const [isError, setError] = React.useState(false);
+  return (
+    <ErrorBoundary
+      {...props}
+      onReset={(...args) => {
+        setError(false);
+        if (props.onReset) {
+          props.onReset(...args);
+        }
+      }}
+    >
+      {isError ? <Bam /> : children}
+      <button
+        data-testid="errorBtn"
+        onClick={() => {
+          setError(true);
+        }}
+      />
+    </ErrorBoundary>
+  );
+};
+
+describe.only('Integration Test', () => {
+  it('captures an error and sends it to Sentry', () => {
+    init({
+      dsn: '',
+      beforeSend: event => {
+        console.log(event);
+        return event;
+      },
+    });
+
+    render(
+      <TestApp fallback={<p>You have hit an error</p>}>
+        <h1>children</h1>
+      </TestApp>,
+    );
+
+    const btn = screen.getByTestId('errorBtn');
+    fireEvent.click(btn);
+  });
+});