fix(astro): Ensure span name from beforeStartSpan isn't overwritten

Author: Lms24

dev-packages/e2e-tests/test-applications/astro-5/sentry.client.config.js

@@ -5,5 +5,17 @@ Sentry.init({
   environment: 'qa',
   tracesSampleRate: 1.0,
   tunnel: 'http://localhost:3031/', // proxy server
-  integrations: [Sentry.browserTracingIntegration()],
+  integrations: [
+    Sentry.browserTracingIntegration({
+      beforeStartSpan: opts => {
+        if (opts.name.startsWith('/blog/')) {
+          return {
+            ...opts,
+            name: window.location.pathname,
+          }
+        }
+        return opts;
+      }
+    })
+  ],
 });

dev-packages/e2e-tests/test-applications/astro-5/src/pages/blog/[slug].astro

@@ -0,0 +1,12 @@
+---
+import Layout from '../../layouts/Layout.astro';
+
+export const prerender = false;
+
+const { slug } = Astro.params;
+
+---
+
+<Layout title="Dynamic SSR page">
+  <h1>Blog post: {slug}</h1>
+</Layout>

dev-packages/e2e-tests/test-applications/astro-5/src/pages/index.astro

@@ -17,6 +17,7 @@ import Layout from '../layouts/Layout.astro';
       <a href="/test-static" title="static page">Static Page</a>
       <a href="/server-island">Server Island</a>
       <a href="/user-page/myUsername123">Test Parametrized Routes</a>
+      <a href="/blog/my-post">Route Parametrization override</a>
     </ul>
   </main>
 </Layout>

dev-packages/e2e-tests/test-applications/astro-5/tests/tracing.dynamic.test.ts

@@ -369,4 +369,18 @@ test.describe('parametrized vs static paths', () => {
       request: { url: expect.stringContaining('/user-page/settings') },
     });
   });
+
+  test('allows for span name override via beforeStartSpan', async ({ page }) => {
+    const clientPageloadTxnPromise = waitForTransaction('astro-5', txnEvent => {
+      return txnEvent?.transaction?.startsWith('/blog/') ?? false;
+    });
+
+    await page.goto('/blog/my-post');
+
+    const clientPageloadTxn = await clientPageloadTxnPromise;
+    expect(clientPageloadTxn).toMatchObject({
+      transaction: '/blog/my-post',
+      transaction_info: { source: 'custom' },
+    });
+  });
 });

packages/astro/src/client/browserTracingIntegration.ts

@@ -1,6 +1,6 @@
-import { browserTracingIntegration as originalBrowserTracingIntegration, WINDOW } from '@sentry/browser';
+import { browserTracingIntegration as originalBrowserTracingIntegration, startBrowserTracingPageLoadSpan, WINDOW } from '@sentry/browser';
 import type { Integration, TransactionSource } from '@sentry/core';
-import { debug, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import { browserPerformanceTimeOrigin, debug, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 
 /**
@@ -18,35 +18,53 @@ function getMetaContent(metaName: string): string | undefined {
 export function browserTracingIntegration(
   options: Parameters<typeof originalBrowserTracingIntegration>[0] = {},
 ): Integration {
-  const integration = originalBrowserTracingIntegration(options);
+  const integration = originalBrowserTracingIntegration({...options, instrumentPageLoad: false});
 
   return {
     ...integration,
-    setup(client) {
-      // Original integration setup call
-      integration.setup?.(client);
-
-      client.on('afterStartPageLoadSpan', pageLoadSpan => {
-        const routeNameFromMetaTags = getMetaContent('sentry-route-name');
-
-        if (routeNameFromMetaTags) {
-          let decodedRouteName;
-          try {
-            decodedRouteName = decodeURIComponent(routeNameFromMetaTags);
-          } catch {
-            // We ignore errors here, e.g. if the value cannot be URL decoded.
-            return;
-          }
-
-          DEBUG_BUILD && debug.log(`[Tracing] Using route name from Sentry HTML meta-tag: ${decodedRouteName}`);
-
-          pageLoadSpan.updateName(decodedRouteName);
-          pageLoadSpan.setAttributes({
-            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route' as TransactionSource,
-            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.astro',
+    afterAllSetup(client) {
+      // Original integration afterAllSetup call
+      integration.afterAllSetup?.(client);
+
+      if (WINDOW.location) {
+        if (options.instrumentPageLoad != false) {
+          const origin = browserPerformanceTimeOrigin();
+
+          const { name, source } = getPageloadSpanName();
+
+          startBrowserTracingPageLoadSpan(client, {
+            name,
+            // pageload should always start at timeOrigin (and needs to be in s, not ms)
+            startTime: origin ? origin / 1000 : undefined,
+            attributes: {
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.astro',
+            },
           });
         }
-      });
-    },
+      }
+    }
+  };
+}
+
+function getPageloadSpanName(): {name: string, source: TransactionSource} {
+  try {
+    const routeNameFromMetaTags = getMetaContent('sentry-route-name');
+    if (routeNameFromMetaTags) {
+      const decodedRouteName = decodeURIComponent(routeNameFromMetaTags);
+
+      DEBUG_BUILD && debug.log(`[Tracing] Using route name from Sentry HTML meta-tag: ${decodedRouteName}`);
+
+      return {
+        name: decodedRouteName,
+        source: 'route',
+      };
+    }
+  } catch {
+    // fail silently if decoding or reading the meta tag fails
+  }
+  return {
+    name: WINDOW.location.pathname,
+    source: 'url',
   };
 }