fix(vue): prevent after hook from starting new span

Author: datbth

packages/vue/src/tracing.ts

@@ -66,7 +66,9 @@ export const createTracingMixins = (options: TracingOptions): Mixins => {
       continue;
     }
 
-    for (const internalHook of internalHooks) {
+    internalHooks.forEach((internalHook, hookType) => {
+      const isBeforeHook = hookType === 0;
+
       mixins[internalHook] = function(this: VueSentry) {
         const isRoot = this.$root === this;
 
@@ -95,24 +97,24 @@ export const createTracingMixins = (options: TracingOptions): Mixins => {
 
         this.$_sentrySpans = this.$_sentrySpans || {};
 
-        // 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.
-        const span = this.$_sentrySpans[operation];
-
-        if (span) {
-          span.finish();
-          finishRootSpan(this, timestampInSeconds(), options.timeout);
-        } else {
+        if (isBeforeHook) {
           const activeTransaction = this.$root?.$_sentryRootSpan || getActiveTransaction();
           if (activeTransaction) {
             this.$_sentrySpans[operation] = activeTransaction.startChild({
               description: `Vue <${name}>`,
               op: `${VUE_OP}.${operation}`,
             });
           }
+        } else {
+          // The span should already be added via the first handler call (in the 'before' hook)
+          const span = this.$_sentrySpans[operation];
+          if (!span) return; // If not, then the before hook did not start the tracking span, probably because it happened even before there is an active transaction
+
+          span.finish();
+          finishRootSpan(this, timestampInSeconds(), options.timeout);
         }
       };
-    }
+    });
   }
 
   return mixins;