From 2cd52f19e4bb9e092b483c13b0a5947b42ed3113 Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Tue, 2 Aug 2022 14:36:00 -0400
Subject: [PATCH] feat(js): Add React ErrorBoundary componentStack to errors

Make use of React 17+ Native Component Stack errors and attach them to
errors being captured by Sentry. This should provide a more useful
stacktrace when trying to debug these issues.
---
 static/app/components/errorBoundary.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/app/components/errorBoundary.tsx b/static/app/components/errorBoundary.tsx
index 20da77023859b5..09bcec8d622d45 100644
--- a/static/app/components/errorBoundary.tsx
+++ b/static/app/components/errorBoundary.tsx
@@ -62,6 +62,13 @@ 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);
     });