fix(sveltekit): Ensure navigations and redirects always create a new transaction (#10656)

Adjust the root span/transaction creation
behaviour of the SvelteKit router instrumentation:

- We no longer check for an active span to create a new navigation span
- This is possible without any `pageloadOngoing` flag because, luckily,
pageload and navigation instrumentation is completely decoupled
- Consequently, navigations happening directly after the first pageload
will now create their own transaction instead of being attached to the
pageload transaction
- Consequently, redirects within a (user perceived) navigation are now
treated as separate transactions, where the "current" navigation
finishes the transaction of the previous redirect.

Additional changes:
* Removed tag for routing instrumentation (we now have `sentry.origin`
for this anyway)
* Added more navigation info to the spans:
* `sentry.sveltekit.navigation.type`: indicates the source of the
navigation (link click, back/forward button press, goto/redirect call,
etc)
  * `sentry.sveltekit.navigation.from`: parameterized navigation start
  * `sentry.sveltekit.navigation.to`: parameterized navigation end

---------

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>

Author: Lms24

dev-packages/e2e-tests/test-applications/sveltekit-2/package.json

@@ -6,6 +6,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
+    "proxy": "ts-node-script start-event-proxy.ts",
     "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/+layout.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-import { onMount } from "svelte";
+  import { onMount } from "svelte";
+
+  import { navigating } from "$app/stores";
+
+  onMount(() => {
+    // Indicate that the SvelteKit app was hydrated
+    document.body.classList.add("hydrated");
+  });
+
 
-onMount(() => {
-  // Indicate that the SvelteKit app was hydrated
-  document.body.classList.add("hydrated");
-});
 </script>
 
 <h1>Sveltekit E2E Test app</h1>

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/+page.svelte

@@ -15,12 +15,15 @@
     <a href="/server-route-error">Server Route error</a>
   </li>
   <li>
-    <a href="/users/123abc">Route with Params</a>
+    <a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
   </li>
   <li>
     <a href="/users">Route with Server Load</a>
   </li>
   <li>
     <a href="/universal-load-fetch">Route with fetch in universal load</a>
   </li>
+  <li>
+    <a id="redirectLink" href="/redirect1">Redirect</a>
+  </li>
 </ul>

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/redirect1/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+  redirect(301, '/redirect2');
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/redirect2/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+  redirect(301, '/users/789');
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/test/performance.test.ts

@@ -184,4 +184,222 @@ test.describe('performance events', () => {
       },
     });
   });
+
+  test('captures a navigation transaction directly after pageload', async ({ page }) => {
+    await page.goto('/');
+
+    const clientPageloadTxnPromise = waitForTransaction('sveltekit-2', txnEvent => {
+      return txnEvent?.contexts?.trace?.op === 'pageload' && txnEvent?.tags?.runtime === 'browser';
+    });
+
+    const clientNavigationTxnPromise = waitForTransaction('sveltekit-2', txnEvent => {
+      return txnEvent?.contexts?.trace?.op === 'navigation' && txnEvent?.tags?.runtime === 'browser';
+    });
+
+    const navigationClickPromise = page.locator('#routeWithParamsLink').click();
+
+    const [pageloadTxnEvent, navigationTxnEvent, _] = await Promise.all([
+      clientPageloadTxnPromise,
+      clientNavigationTxnPromise,
+      navigationClickPromise,
+    ]);
+
+    expect(pageloadTxnEvent).toMatchObject({
+      transaction: '/',
+      tags: { runtime: 'browser' },
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'pageload',
+          origin: 'auto.pageload.sveltekit',
+        },
+      },
+    });
+
+    expect(navigationTxnEvent).toMatchObject({
+      transaction: '/users/[id]',
+      tags: { runtime: 'browser' },
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.sveltekit',
+          data: {
+            'sentry.sveltekit.navigation.from': '/',
+            'sentry.sveltekit.navigation.to': '/users/[id]',
+            'sentry.sveltekit.navigation.type': 'link',
+          },
+        },
+      },
+    });
+
+    const routingSpans = navigationTxnEvent.spans?.filter(s => s.op === 'ui.sveltekit.routing');
+    expect(routingSpans).toHaveLength(1);
+
+    const routingSpan = routingSpans && routingSpans[0];
+    expect(routingSpan).toMatchObject({
+      op: 'ui.sveltekit.routing',
+      description: 'SvelteKit Route Change',
+      data: {
+        'sentry.op': 'ui.sveltekit.routing',
+        'sentry.origin': 'auto.ui.sveltekit',
+        'sentry.sveltekit.navigation.from': '/',
+        'sentry.sveltekit.navigation.to': '/users/[id]',
+        'sentry.sveltekit.navigation.type': 'link',
+      },
+    });
+  });
+
+  test('captures one navigation transaction per redirect', async ({ page }) => {
+    await page.goto('/');
+
+    const clientNavigationRedirect1TxnPromise = waitForTransaction('sveltekit-2', txnEvent => {
+      return (
+        txnEvent?.contexts?.trace?.op === 'navigation' &&
+        txnEvent?.tags?.runtime === 'browser' &&
+        txnEvent?.transaction === '/redirect1'
+      );
+    });
+
+    const clientNavigationRedirect2TxnPromise = waitForTransaction('sveltekit-2', txnEvent => {
+      return (
+        txnEvent?.contexts?.trace?.op === 'navigation' &&
+        txnEvent?.tags?.runtime === 'browser' &&
+        txnEvent?.transaction === '/redirect2'
+      );
+    });
+
+    const clientNavigationRedirect3TxnPromise = waitForTransaction('sveltekit-2', txnEvent => {
+      return (
+        txnEvent?.contexts?.trace?.op === 'navigation' &&
+        txnEvent?.tags?.runtime === 'browser' &&
+        txnEvent?.transaction === '/users/[id]'
+      );
+    });
+
+    const navigationClickPromise = page.locator('#redirectLink').click();
+
+    const [redirect1TxnEvent, redirect2TxnEvent, redirect3TxnEvent, _] = await Promise.all([
+      clientNavigationRedirect1TxnPromise,
+      clientNavigationRedirect2TxnPromise,
+      clientNavigationRedirect3TxnPromise,
+      navigationClickPromise,
+    ]);
+
+    expect(redirect1TxnEvent).toMatchObject({
+      transaction: '/redirect1',
+      tags: { runtime: 'browser' },
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.sveltekit',
+          data: {
+            'sentry.origin': 'auto.navigation.sveltekit',
+            'sentry.op': 'navigation',
+            'sentry.source': 'route',
+            'sentry.sveltekit.navigation.type': 'link',
+            'sentry.sveltekit.navigation.from': '/',
+            'sentry.sveltekit.navigation.to': '/redirect1',
+            'sentry.sample_rate': 1,
+          },
+        },
+      },
+    });
+
+    const redirect1Spans = redirect1TxnEvent.spans?.filter(s => s.op === 'ui.sveltekit.routing');
+    expect(redirect1Spans).toHaveLength(1);
+
+    const redirect1Span = redirect1Spans && redirect1Spans[0];
+    expect(redirect1Span).toMatchObject({
+      op: 'ui.sveltekit.routing',
+      description: 'SvelteKit Route Change',
+      data: {
+        'sentry.op': 'ui.sveltekit.routing',
+        'sentry.origin': 'auto.ui.sveltekit',
+        'sentry.sveltekit.navigation.from': '/',
+        'sentry.sveltekit.navigation.to': '/redirect1',
+        'sentry.sveltekit.navigation.type': 'link',
+      },
+    });
+
+    expect(redirect2TxnEvent).toMatchObject({
+      transaction: '/redirect2',
+      tags: { runtime: 'browser' },
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.sveltekit',
+          data: {
+            'sentry.origin': 'auto.navigation.sveltekit',
+            'sentry.op': 'navigation',
+            'sentry.source': 'route',
+            'sentry.sveltekit.navigation.type': 'goto',
+            'sentry.sveltekit.navigation.from': '/',
+            'sentry.sveltekit.navigation.to': '/redirect2',
+            'sentry.sample_rate': 1,
+          },
+        },
+      },
+    });
+
+    const redirect2Spans = redirect2TxnEvent.spans?.filter(s => s.op === 'ui.sveltekit.routing');
+    expect(redirect2Spans).toHaveLength(1);
+
+    const redirect2Span = redirect2Spans && redirect2Spans[0];
+    expect(redirect2Span).toMatchObject({
+      op: 'ui.sveltekit.routing',
+      description: 'SvelteKit Route Change',
+      data: {
+        'sentry.op': 'ui.sveltekit.routing',
+        'sentry.origin': 'auto.ui.sveltekit',
+        'sentry.sveltekit.navigation.from': '/',
+        'sentry.sveltekit.navigation.to': '/redirect2',
+        'sentry.sveltekit.navigation.type': 'goto',
+      },
+    });
+
+    expect(redirect3TxnEvent).toMatchObject({
+      transaction: '/users/[id]',
+      tags: { runtime: 'browser' },
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.sveltekit',
+          data: {
+            'sentry.origin': 'auto.navigation.sveltekit',
+            'sentry.op': 'navigation',
+            'sentry.source': 'route',
+            'sentry.sveltekit.navigation.type': 'goto',
+            'sentry.sveltekit.navigation.from': '/',
+            'sentry.sveltekit.navigation.to': '/users/[id]',
+            'sentry.sample_rate': 1,
+          },
+        },
+      },
+    });
+
+    const redirect3Spans = redirect3TxnEvent.spans?.filter(s => s.op === 'ui.sveltekit.routing');
+    expect(redirect3Spans).toHaveLength(1);
+
+    const redirect3Span = redirect3Spans && redirect3Spans[0];
+    expect(redirect3Span).toMatchObject({
+      op: 'ui.sveltekit.routing',
+      description: 'SvelteKit Route Change',
+      data: {
+        'sentry.op': 'ui.sveltekit.routing',
+        'sentry.origin': 'auto.ui.sveltekit',
+        'sentry.sveltekit.navigation.from': '/',
+        'sentry.sveltekit.navigation.to': '/users/[id]',
+        'sentry.sveltekit.navigation.type': 'goto',
+      },
+    });
+  });
 });