fix: Capture unexpected TypeError when capturing RouteError (#16327)

fix: Capture unexpected Type Error in capturing RouteError

Wraps unreproducible TypeError (missing setter) in Error.message property in a try-catch. When the TypeError is thrown it causes the initial RouteError to be ignored and the newer and less
informative TypeError to be captured by Sentry instead. Currently, a minority of users are
affected and certain browser and/or browser extension incompatibility is suspected.

By capturing the new TypeError, and returning to the RouteError context, we are then able to capture the emitted RouteError. This should help in the discovery of the actual errors causing the RouteError and perhaps uncover the root cause of the TypeError.

Fixes GH-16314
Fixes Sentry-JAVASCRIPT-129Q

Author: jeffkwoh

src/sentry/static/sentry/app/views/routeError.jsx

@@ -35,17 +35,35 @@ class RouteError extends React.Component {
     }
 
     const route = getRouteStringFromRoutes(routes);
+    const enrichScopeContext = scope => {
+      scope.setExtra('route', route);
+      scope.setExtra('orgFeatures', (organization && organization.features) || []);
+      scope.setExtra('orgAccess', (organization && organization.access) || []);
+      scope.setExtra('projectFeatures', (project && project.features) || []);
+      return scope;
+    };
+
     if (route) {
-      error.message = `${error.message}: ${route}`;
+      /**
+       * Unexpectedly, error.message would sometimes not have a setter property, causing another exception to be thrown,
+       * and losing the original error in the process. Wrapping the mutation in a try-catch in an attempt to preserve
+       * the original error for logging.
+       * See https://github.com/getsentry/sentry/issues/16314 for more details.
+       */
+      try {
+        error.message = `${error.message}: ${route}`;
+      } catch (e) {
+        Sentry.withScope(scope => {
+          enrichScopeContext(scope);
+          Sentry.captureException(e);
+        });
+      }
     }
     // TODO(dcramer): show something in addition to embed (that contains it?)
     // throw this in a timeout so if it errors we dont fall over
     this._timeout = window.setTimeout(() => {
       Sentry.withScope(scope => {
-        scope.setExtra('route', route);
-        scope.setExtra('orgFeatures', (organization && organization.features) || []);
-        scope.setExtra('orgAccess', (organization && organization.access) || []);
-        scope.setExtra('projectFeatures', (project && project.features) || []);
+        enrichScopeContext(scope);
         Sentry.captureException(error);
       });