fix(vue): Ensure root component render span always ends

Author: Lms24

packages/vue/src/tracing.ts

@@ -31,8 +31,10 @@ const HOOKS: { [key in Operation]: Hook[] } = {
   update: ['beforeUpdate', 'updated'],
 };
 
-/** Finish top-level span and activity with a debounce configured using `timeout` option */
-function finishRootSpan(vm: VueSentry, timestamp: number, timeout: number): void {
+/**
+ * End the top-level span and with a debounce configured using `timeout` option
+ */
+function maybeEndRootSpan(vm: VueSentry, timestamp: number, timeout: number): void {
   if (vm.$_sentryRootSpanTimer) {
     clearTimeout(vm.$_sentryRootSpanTimer);
   }
@@ -66,6 +68,8 @@ export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixi
 
   const mixins: Mixins = {};
 
+  const rootComponentSpanFinalTimeout = options.timeout || 2000;
+
   for (const operation of hooks) {
     // Retrieve corresponding hooks from Vue lifecycle.
     // eg. mount => ['beforeMount', 'mounted']
@@ -80,6 +84,14 @@ export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixi
         const isRoot = this.$root === this;
 
         if (isRoot) {
+          /**
+           * The root component span is basically an idle child span that remains active
+           * as long as child components are processed (mounted, updated, etc).
+           * Every time a child component span ends, we debounce the ending of the root
+           * component span so that the root span duration still reflects potential future
+           * child spans.
+           * See {@link maybeEndRootSpan} for the debounging mechanism.
+           */
           this.$_sentryRootSpan =
             this.$_sentryRootSpan ||
             startInactiveSpan({
@@ -90,6 +102,9 @@ export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixi
               },
               onlyIfParent: true,
             });
+
+          // call debounced end function once directly, just in case no child components call it
+          maybeEndRootSpan(this, timestampInSeconds(), rootComponentSpanFinalTimeout);
         }
 
         // Skip components that we don't want to track to minimize the noise and give a more granular control to the user
@@ -101,6 +116,8 @@ export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixi
 
         // We always want to track root component
         if (!isRoot && !shouldTrack) {
+          // even if we don't track `this` component, we still want to end the root span eventually
+          maybeEndRootSpan(this, timestampInSeconds(), rootComponentSpanFinalTimeout);
           return;
         }
 
@@ -137,7 +154,7 @@ export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixi
           if (!span) return;
           span.end();
 
-          finishRootSpan(this, timestampInSeconds(), options.timeout || 2000);
+          maybeEndRootSpan(this, timestampInSeconds(), rootComponentSpanFinalTimeout);
         }
       };
     }

packages/vue/test/tracing/tracingMixin.test.ts

@@ -27,11 +27,10 @@ vi.mock('../../src/vendor/components', () => {
   };
 });
 
-const mockSpanFactory = (): { name?: string; op?: string; end: Mock; startChild: Mock } => ({
+const mockSpanFactory = (): { name?: string; op?: string; end: Mock } => ({
   name: undefined,
   op: undefined,
   end: vi.fn(),
-  startChild: vi.fn(),
 });
 
 vi.useFakeTimers();
@@ -127,23 +126,25 @@ describe('Vue Tracing Mixins', () => {
       );
     });
 
-    it('should finish root component span on timer after component spans end', () => {
-      // todo/fixme: This root component span is only finished if trackComponents is true --> it should probably be always finished
-      const mixins = createTracingMixins({ trackComponents: true, timeout: 1000 });
-      const rootMockSpan = mockSpanFactory();
-      mockRootInstance.$_sentryRootSpan = rootMockSpan;
-
-      // Create and finish a component span
-      mixins.beforeMount.call(mockVueInstance);
-      mixins.mounted.call(mockVueInstance);
-
-      // Root component span should not end immediately
-      expect(rootMockSpan.end).not.toHaveBeenCalled();
-
-      // After timeout, root component span should end
-      vi.advanceTimersByTime(1001);
-      expect(rootMockSpan.end).toHaveBeenCalled();
-    });
+    it.each([true, false])(
+      'should finish root component span on timer after component spans end, if trackComponents is %s',
+      () => {
+        const mixins = createTracingMixins({ trackComponents: false, timeout: 1000 });
+        const rootMockSpan = mockSpanFactory();
+        mockRootInstance.$_sentryRootSpan = rootMockSpan;
+
+        // Create and finish a component span
+        mixins.beforeMount.call(mockVueInstance);
+        mixins.mounted.call(mockVueInstance);
+
+        // Root component span should not end immediately
+        expect(rootMockSpan.end).not.toHaveBeenCalled();
+
+        // After timeout, root component span should end
+        vi.advanceTimersByTime(1001);
+        expect(rootMockSpan.end).toHaveBeenCalled();
+      },
+    );
   });
 
   describe('Component Span Lifecycle', () => {