test(nuxt): Add tests for Vue component tracking (#13633)

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nuxt-3/sentry.client.config.ts

@@ -6,4 +6,5 @@ Sentry.init({
   dsn: useRuntimeConfig().public.sentry.dsn,
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
+  trackComponents: true,
 });

dev-packages/e2e-tests/test-applications/nuxt-3/tests/performance.client.test.ts

@@ -0,0 +1,57 @@
+import { expect, test } from '@nuxt/test-utils/playwright';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import type { Span } from '@sentry/nuxt';
+
+test('sends a pageload root span with a parameterized URL', async ({ page }) => {
+  const transactionPromise = waitForTransaction('nuxt-3', async transactionEvent => {
+    return transactionEvent.transaction === '/test-param/:param()';
+  });
+
+  await page.goto(`/test-param/1234`);
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.source': 'route',
+          'sentry.origin': 'auto.pageload.vue',
+          'sentry.op': 'pageload',
+          'params.param': '1234',
+        },
+        op: 'pageload',
+        origin: 'auto.pageload.vue',
+      },
+    },
+    transaction: '/test-param/:param()',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});
+
+test('sends component tracking spans when `trackComponents` is enabled', async ({ page }) => {
+  const transactionPromise = waitForTransaction('nuxt-3', async transactionEvent => {
+    return transactionEvent.transaction === '/client-error';
+  });
+
+  await page.goto(`/client-error`);
+
+  const rootSpan = await transactionPromise;
+  const errorButtonSpan = rootSpan.spans.find((span: Span) => span.description === 'Vue <ErrorButton>');
+
+  const expected = {
+    data: { 'sentry.origin': 'auto.ui.vue', 'sentry.op': 'ui.vue.mount' },
+    description: 'Vue <ErrorButton>',
+    op: 'ui.vue.mount',
+    parent_span_id: expect.any(String),
+    span_id: expect.any(String),
+    start_timestamp: expect.any(Number),
+    timestamp: expect.any(Number),
+    trace_id: expect.any(String),
+    origin: 'auto.ui.vue',
+  };
+
+  expect(errorButtonSpan).toMatchObject(expected);
+});

dev-packages/e2e-tests/test-applications/nuxt-3/tests/tracing.client.test.ts

@@ -1,4 +1,5 @@
 import type { Integration, Options, StackParser } from '@sentry/types';
+import type { SentryNuxtClientOptions } from './common/types';
 import type * as clientSdk from './index.client';
 import type * as serverSdk from './index.server';
 
@@ -8,7 +9,7 @@ export * from './index.client';
 export * from './index.server';
 
 // re-export colliding types
-export declare function init(options: Options | clientSdk.BrowserOptions | serverSdk.NodeOptions): void;
+export declare function init(options: Options | SentryNuxtClientOptions | serverSdk.NodeOptions): void;
 export declare const linkedErrorsIntegration: typeof clientSdk.linkedErrorsIntegration;
 export declare const contextLinesIntegration: typeof clientSdk.contextLinesIntegration;
 export declare const getDefaultIntegrations: (options: Options) => Integration[];