feat(vue): Mark errors caught by Vue wrappers as unhandled (#8905)

Report exceptions caught by our Vue error handler and routing instrumentation as unhandled.

Detailed write up in #8890

Author: Lms24

packages/vue/src/errorhandler.ts

@@ -1,4 +1,5 @@
 import { getCurrentHub } from '@sentry/browser';
+import { addExceptionMechanism } from '@sentry/utils';
 
 import type { Options, ViewModel, Vue } from './types';
 import { formatComponentName, generateComponentTrace } from './vendor/components';
@@ -31,6 +32,14 @@ export const attachErrorHandler = (app: Vue, options: Options): void => {
     setTimeout(() => {
       getCurrentHub().withScope(scope => {
         scope.setContext('vue', metadata);
+
+        scope.addEventProcessor(event => {
+          addExceptionMechanism(event, {
+            handled: false,
+          });
+          return event;
+        });
+
         getCurrentHub().captureException(error);
       });
     });

packages/vue/src/router.ts

@@ -1,5 +1,6 @@
 import { captureException, WINDOW } from '@sentry/browser';
 import type { Transaction, TransactionContext, TransactionSource } from '@sentry/types';
+import { addExceptionMechanism } from '@sentry/utils';
 
 import { getActiveTransaction } from './tracing';
 
@@ -78,7 +79,16 @@ export function vueRouterInstrumentation(
       });
     }
 
-    router.onError(error => captureException(error));
+    router.onError(error =>
+      captureException(error, scope => {
+        scope.addEventProcessor(event => {
+          addExceptionMechanism(event, { handled: false });
+          return event;
+        });
+
+        return scope;
+      }),
+    );
 
     router.beforeEach((to, from, next) => {
       // According to docs we could use `from === VueRouter.START_LOCATION` but I couldnt get it working for Vue 2

packages/vue/test/router.test.ts

@@ -72,7 +72,8 @@ describe('vueRouterInstrumentation()', () => {
     onErrorCallback(testError);
 
     expect(captureExceptionSpy).toHaveBeenCalledTimes(1);
-    expect(captureExceptionSpy).toHaveBeenCalledWith(testError);
+    // second function is the scope callback
+    expect(captureExceptionSpy).toHaveBeenCalledWith(testError, expect.any(Function));
   });
 
   it.each([