fix(nuxt): Detect pageload by adding flag in Vue router

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

@@ -8,6 +8,9 @@ const nuxtConfigOptions: ConfigOptions = {
   },
 };
 
+/*  Make sure to import from '@nuxt/test-utils/playwright' in the tests
+ *  Like this: import { expect, test } from '@nuxt/test-utils/playwright' */
+
 const config = getPlaywrightConfig({
   startCommand: `pnpm preview`,
   use: { ...nuxtConfigOptions },

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

@@ -0,0 +1,31 @@
+import { expect, test } from '@nuxt/test-utils/playwright';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+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',
+    },
+  });
+});

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

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '@nuxt/test-utils/playwright';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
 

packages/vue/src/router.ts

@@ -50,18 +50,27 @@ export function instrumentVueRouter(
   },
   startNavigationSpanFn: (context: StartSpanOptions) => void,
 ): void {
+  let IS_FIRST_PAGE_LOAD = true;
+
   router.onError(error => captureException(error, { mechanism: { handled: false } }));
 
   router.beforeEach((to, from, next) => {
     // According to docs we could use `from === VueRouter.START_LOCATION` but I couldnt get it working for Vue 2
     // https://router.vuejs.org/api/#router-start-location
     // https://next.router.vuejs.org/api/#start-location
+    // Additionally, Nuxt does not provide the possibility to check for `from.matched.length === 0` (this is never 0).
+    // Therefore, a flag was added to track the page-load: IS_FIRST_PAGE_LOAD
 
     // from.name:
     // - Vue 2: null
     // - Vue 3: undefined
+    // - Nuxt: same as to.name (always a value)
     // hence only '==' instead of '===', because `undefined == null` evaluates to `true`
-    const isPageLoadNavigation = from.name == null && from.matched.length === 0;
+    const isPageLoadNavigation = (from.name == null && from.matched.length === 0) || (from.name && IS_FIRST_PAGE_LOAD);
+
+    if (IS_FIRST_PAGE_LOAD) {
+      IS_FIRST_PAGE_LOAD = false;
+    }
 
     const attributes: SpanAttributes = {
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.vue',