feat(ui): Add error.cause to <ErrorHandler>

static/app/components/errorBoundary.tsx

@@ -55,15 +55,18 @@ class ErrorBoundary extends Component<Props, State> {
         Object.keys(errorTag).forEach(tag => scope.setTag(tag, errorTag[tag]));
       }
 
-      // Based on https://github.com/getsentry/sentry-javascript/blob/6f4ad562c469f546f1098136b65583309d03487b/packages/react/src/errorboundary.tsx#L75-L85
-      const errorBoundaryError = new Error(error.message);
-      errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
-      errorBoundaryError.stack = errorInfo.componentStack!;
-
-      error.cause = errorBoundaryError;
-
-      scope.setExtra('errorInfo', errorInfo);
-      Sentry.captureException(error);
+      try {
+        // Based on https://github.com/getsentry/sentry-javascript/blob/6f4ad562c469f546f1098136b65583309d03487b/packages/react/src/errorboundary.tsx#L75-L85
+        const errorBoundaryError = new Error(error.message);
+        errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
+        errorBoundaryError.stack = errorInfo.componentStack!;
+        error.cause = errorBoundaryError;
+      } catch {
+        // Some browsers won't let you write to Error instance
+        scope.setExtra('errorInfo', errorInfo);
+      } finally {
+        Sentry.captureException(error);
+      }
     });
   }
 

static/app/components/lazyLoad.tsx

@@ -76,8 +76,20 @@ class ErrorBoundary extends Component<{children: React.ReactNode}, ErrorBoundary
       if (isWebpackChunkLoadingError(error)) {
         scope.setFingerprint(['webpack', 'error loading chunk']);
       }
-      scope.setExtra('errorInfo', errorInfo);
-      Sentry.captureException(error);
+      try {
+        // Based on https://github.com/getsentry/sentry-javascript/blob/6f4ad562c469f546f1098136b65583309d03487b/packages/react/src/errorboundary.tsx#L75-L85
+        const errorBoundaryError = new Error(error.message);
+        errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
+        errorBoundaryError.stack = errorInfo.componentStack!;
+
+        // This will mutate `error` and get captured to Sentry in `RouteError`
+        error.cause = errorBoundaryError;
+      } catch {
+        // Some browsers won't let you write to Error instance
+        scope.setExtra('errorInfo', errorInfo);
+      } finally {
+        Sentry.captureException(error);
+      }
     });
 
     // eslint-disable-next-line no-console

static/app/utils/errorHandler.tsx

@@ -24,12 +24,24 @@ export default function errorHandler<P>(WrappedComponent: React.ComponentType<P>
       error: undefined,
     };
 
-    componentDidCatch(_error: Error, info: React.ErrorInfo) {
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
       // eslint-disable-next-line no-console
       console.error(
         'Component stack trace caught in <ErrorHandler />:',
-        info.componentStack
+        errorInfo.componentStack
       );
+
+      try {
+        // Based on https://github.com/getsentry/sentry-javascript/blob/6f4ad562c469f546f1098136b65583309d03487b/packages/react/src/errorboundary.tsx#L75-L85
+        const errorBoundaryError = new Error(error.message);
+        errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
+        errorBoundaryError.stack = errorInfo.componentStack!;
+
+        // This will mutate `error` and get captured to Sentry in `RouteError`
+        error.cause = errorBoundaryError;
+      } catch {
+        // Some browsers won't let you write to Error instance
+      }
     }
 
     render() {