feat: Add VueRouterInstrumentation

Author: HazAT

packages/vue/package.json

@@ -42,7 +42,8 @@
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-typescript2": "^0.21.0",
     "typescript": "3.7.5",
-    "vue": "^2.6"
+    "vue": "^2.6",
+    "vue-router": "^3.0.1"
   },
   "scripts": {
     "build": "run-p build:es5 build:esm build:bundle",

packages/vue/src/index.ts

@@ -22,5 +22,6 @@ export {
 } from '@sentry/browser';
 
 export { init } from './sdk';
+export { vueRouterInstrumentation } from './vuerouter';
 
 createVueEventProcessor();

packages/vue/src/sdk.ts

@@ -146,7 +146,7 @@ export function init(
     tracing: false,
     ...options,
     tracingOptions: {
-      hooks: ['mount', 'update'],
+      hooks: ['activate', 'mount', 'update'],
       timeout: 2000,
       trackComponents: false,
       ...options.tracingOptions,
@@ -270,22 +270,23 @@ export class VueHelper {
         ? this._options.tracingOptions.trackComponents.indexOf(name) > -1
         : this._options.tracingOptions.trackComponents;
 
-      if (!this._rootSpan || !shouldTrack) {
+      const childOf = this._rootSpan || getActiveTransaction(getCurrentHub());
+
+      if (!childOf || !shouldTrack) {
         return;
       }
 
       const now = timestampWithMs();
       const span = spans[operation];
-
       // On the first handler call (before), it'll be undefined, as `$once` will add it in the future.
       // However, on the second call (after), it'll be already in place.
       if (span) {
         span.finish();
         this._finishRootSpan(now);
       } else {
         vm.$once(`hook:${hook}`, () => {
-          if (this._rootSpan) {
-            spans[operation] = this._rootSpan.startChild({
+          if (childOf) {
+            spans[operation] = childOf.startChild({
               description: `Vue <${name}>`,
               op: operation,
             });
@@ -332,6 +333,7 @@ export class VueHelper {
       // We should always finish the span, only should pop activity if using @sentry/apm
       if (this._rootSpan) {
         this._rootSpan.finish(timestamp);
+        this._rootSpan = undefined;
       }
     }, this._options.tracingOptions.timeout);
   }

packages/vue/src/vuerouter.ts

@@ -0,0 +1,66 @@
+import { captureException } from '@sentry/browser';
+import { Transaction, TransactionContext } from '@sentry/types';
+import VueRouter from 'vue-router';
+
+export type Action = 'PUSH' | 'REPLACE' | 'POP';
+
+export type Location = {
+  pathname: string;
+  action?: Action;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} & Record<string, any>;
+
+export type VueRouterInstrumentation = <T extends Transaction>(
+  startTransaction: (context: TransactionContext) => T | undefined,
+  startTransactionOnPageLoad?: boolean,
+  startTransactionOnLocationChange?: boolean,
+) => void;
+
+let firstLoad = true;
+
+/**
+ * Creates routing instrumentation for Vue Router v2
+ *
+ * @param router The Vue Router instance that is used
+ */
+export function vueRouterInstrumentation(router: VueRouter): VueRouterInstrumentation {
+  return (
+    startTransaction: (context: TransactionContext) => Transaction | undefined,
+    startTransactionOnPageLoad: boolean = true,
+    startTransactionOnLocationChange: boolean = true,
+  ) => {
+    router.onError(error => captureException(error));
+
+    const tags = {
+      'routing.instrumentation': 'vue-router',
+    };
+    router.beforeEach((to, _from, next) => {
+      const data = {
+        params: to.params,
+        query: to.query,
+      };
+
+      if (startTransactionOnPageLoad && firstLoad) {
+        startTransaction({
+          name: to.name || to.path,
+          op: 'pageload',
+          tags,
+          data,
+        });
+        firstLoad = false;
+        next();
+        return;
+      }
+      if (startTransactionOnLocationChange && !firstLoad) {
+        startTransaction({
+          name: to.name || to.matched[0].path || to.path,
+          op: 'navigation',
+          tags,
+          data,
+        });
+        next();
+        return;
+      }
+    });
+  };
+}

yarn.lock

@@ -19083,6 +19083,11 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
+vue-router@^3.0.1:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
+  integrity sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==
+
 vue@^2.6:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"