fix(astro): Ensure traces are correctly propagated for static routes (#17536)

This refactors the astro middleware a bit to be more correct & future
proof.

Right now, http.server spans are not emitted by the node http
integration because import-in-the-middle does not work with Astro. So we
emit our own. This PR makes astro ready to also handle the base
http.server spans and enhance them with routing information.

It also handles static routes better: these do not emit spans anymore
now, and do not continue traces, but instead only propagate the
parametrized route to the client, no trace data.

One fundamental problem remains that is not fixed in this PR:
`Sentry.init()` is only injected via `page-ssr` into SSR pages. This
means that only once any SSR page is hit, the server-side part of Sentry
is initialized. If you hit a prerendered (static) page first, sentry
will not be initialized and thus neither errors are captured nor spans
created. For regular prerendered pages this should be fine because we do
not need to run anything at runtime there. However, when you hit a
prerendered page that has a server-island, the server island (which is
dynamic) will not be instrumented either because Sentry is not
initialized yet.

I don't think we can fix this with the current set of primitives we
have, so this is a future problem to look into...

---------

Co-authored-by: Lukas Stracke <[email protected]>

Author: mydea

dev-packages/e2e-tests/test-applications/astro-4/package.json

@@ -4,9 +4,9 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev --force",
-    "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
+    "start": "node ./dist/server/entry.mjs",
     "astro": "astro",
     "test:build": "pnpm install && pnpm build",
     "test:assert": "TEST_ENV=production playwright test"

dev-packages/e2e-tests/test-applications/astro-4/playwright.config.mjs

@@ -7,7 +7,7 @@ if (!testEnv) {
 }
 
 const config = getPlaywrightConfig({
-  startCommand: 'node ./dist/server/entry.mjs',
+  startCommand: 'pnpm start',
 });
 
 export default config;

dev-packages/e2e-tests/test-applications/astro-4/tests/errors.client.test.ts

@@ -70,7 +70,6 @@ test.describe('client-side errors', () => {
       contexts: {
         trace: {
           trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-          parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
           span_id: expect.stringMatching(/[a-f0-9]{16}/),
         },
       },

dev-packages/e2e-tests/test-applications/astro-4/tests/tracing.static.test.ts

@@ -21,14 +21,14 @@ test.describe('tracing in static/pre-rendered routes', () => {
     const clientPageloadTraceId = clientPageloadTxn.contexts?.trace?.trace_id;
     const clientPageloadParentSpanId = clientPageloadTxn.contexts?.trace?.parent_span_id;
 
-    const sentryTraceMetaTagContent = await page.locator('meta[name="sentry-trace"]').getAttribute('content');
-    const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
+    const sentryTraceMetaTags = await page.locator('meta[name="sentry-trace"]').count();
+    expect(sentryTraceMetaTags).toBe(0);
 
-    const [metaTraceId, metaParentSpanId, metaSampled] = sentryTraceMetaTagContent?.split('-') || [];
+    const baggageMetaTags = await page.locator('meta[name="baggage"]').count();
+    expect(baggageMetaTags).toBe(0);
 
     expect(clientPageloadTraceId).toMatch(/[a-f0-9]{32}/);
-    expect(clientPageloadParentSpanId).toMatch(/[a-f0-9]{16}/);
-    expect(metaSampled).toBe('1');
+    expect(clientPageloadParentSpanId).toBeUndefined();
 
     expect(clientPageloadTxn).toMatchObject({
       contexts: {
@@ -40,9 +40,8 @@ test.describe('tracing in static/pre-rendered routes', () => {
           }),
           op: 'pageload',
           origin: 'auto.pageload.astro',
-          parent_span_id: metaParentSpanId,
           span_id: expect.stringMatching(/[a-f0-9]{16}/),
-          trace_id: metaTraceId,
+          trace_id: expect.stringMatching(/[a-f0-9]{32}/),
         },
       },
       platform: 'javascript',
@@ -53,9 +52,6 @@ test.describe('tracing in static/pre-rendered routes', () => {
       type: 'transaction',
     });
 
-    expect(baggageMetaTagContent).toContain('sentry-transaction=GET%20%2Ftest-static'); // URL-encoded for 'GET /test-static'
-    expect(baggageMetaTagContent).toContain('sentry-sampled=true');
-
     await page.waitForTimeout(1000); // wait another sec to ensure no server transaction is sent
   });
 });

dev-packages/e2e-tests/test-applications/astro-5/package.json

@@ -7,6 +7,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "start": "node ./dist/server/entry.mjs",
     "test:build": "pnpm install && pnpm build",
     "test:assert": "TEST_ENV=production playwright test"
   },

dev-packages/e2e-tests/test-applications/astro-5/playwright.config.mjs

@@ -7,7 +7,7 @@ if (!testEnv) {
 }
 
 const config = getPlaywrightConfig({
-  startCommand: 'node ./dist/server/entry.mjs',
+  startCommand: 'pnpm start',
 });
 
 export default config;

dev-packages/e2e-tests/test-applications/astro-5/tests/errors.client.test.ts

@@ -70,7 +70,6 @@ test.describe('client-side errors', () => {
       contexts: {
         trace: {
           trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-          parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
           span_id: expect.stringMatching(/[a-f0-9]{16}/),
         },
       },

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

@@ -4,28 +4,27 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 test.describe('tracing in static routes with server islands', () => {
   test('only sends client pageload transaction and server island endpoint transaction', async ({ page }) => {
     const clientPageloadTxnPromise = waitForTransaction('astro-5', txnEvent => {
-      return txnEvent?.transaction === '/server-island';
+      return txnEvent.transaction === '/server-island';
     });
 
     const serverIslandEndpointTxnPromise = waitForTransaction('astro-5', evt => {
-      return !!evt.transaction?.startsWith('GET /_server-islands');
+      return evt.transaction === 'GET /_server-islands/[name]';
     });
 
     await page.goto('/server-island');
 
     const clientPageloadTxn = await clientPageloadTxnPromise;
-
     const clientPageloadTraceId = clientPageloadTxn.contexts?.trace?.trace_id;
     const clientPageloadParentSpanId = clientPageloadTxn.contexts?.trace?.parent_span_id;
 
-    const sentryTraceMetaTagContent = await page.locator('meta[name="sentry-trace"]').getAttribute('content');
-    const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
+    const sentryTraceMetaTags = await page.locator('meta[name="sentry-trace"]').count();
+    expect(sentryTraceMetaTags).toBe(0);
 
-    const [metaTraceId, metaParentSpanId, metaSampled] = sentryTraceMetaTagContent?.split('-') || [];
+    const baggageMetaTags = await page.locator('meta[name="baggage"]').count();
+    expect(baggageMetaTags).toBe(0);
 
     expect(clientPageloadTraceId).toMatch(/[a-f0-9]{32}/);
-    expect(clientPageloadParentSpanId).toMatch(/[a-f0-9]{16}/);
-    expect(metaSampled).toBe('1');
+    expect(clientPageloadParentSpanId).toBeUndefined();
 
     expect(clientPageloadTxn).toMatchObject({
       contexts: {
@@ -37,9 +36,8 @@ test.describe('tracing in static routes with server islands', () => {
           }),
           op: 'pageload',
           origin: 'auto.pageload.astro',
-          parent_span_id: metaParentSpanId,
           span_id: expect.stringMatching(/[a-f0-9]{16}/),
-          trace_id: metaTraceId,
+          trace_id: clientPageloadTraceId,
         },
       },
       platform: 'javascript',
@@ -63,9 +61,6 @@ test.describe('tracing in static routes with server islands', () => {
       ]),
     );
 
-    expect(baggageMetaTagContent).toContain('sentry-transaction=GET%20%2Fserver-island'); // URL-encoded for 'GET /server-island'
-    expect(baggageMetaTagContent).toContain('sentry-sampled=true');
-
     const serverIslandEndpointTxn = await serverIslandEndpointTxnPromise;
 
     expect(serverIslandEndpointTxn).toMatchObject({

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

@@ -21,14 +21,14 @@ test.describe('tracing in static/pre-rendered routes', () => {
     const clientPageloadTraceId = clientPageloadTxn.contexts?.trace?.trace_id;
     const clientPageloadParentSpanId = clientPageloadTxn.contexts?.trace?.parent_span_id;
 
-    const sentryTraceMetaTagContent = await page.locator('meta[name="sentry-trace"]').getAttribute('content');
-    const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
+    const sentryTraceMetaTags = await page.locator('meta[name="sentry-trace"]').count();
+    expect(sentryTraceMetaTags).toBe(0);
 
-    const [metaTraceId, metaParentSpanId, metaSampled] = sentryTraceMetaTagContent?.split('-') || [];
+    const baggageMetaTags = await page.locator('meta[name="baggage"]').count();
+    expect(baggageMetaTags).toBe(0);
 
     expect(clientPageloadTraceId).toMatch(/[a-f0-9]{32}/);
-    expect(clientPageloadParentSpanId).toMatch(/[a-f0-9]{16}/);
-    expect(metaSampled).toBe('1');
+    expect(clientPageloadParentSpanId).toBeUndefined();
 
     expect(clientPageloadTxn).toMatchObject({
       contexts: {
@@ -40,9 +40,8 @@ test.describe('tracing in static/pre-rendered routes', () => {
           }),
           op: 'pageload',
           origin: 'auto.pageload.astro',
-          parent_span_id: metaParentSpanId,
           span_id: expect.stringMatching(/[a-f0-9]{16}/),
-          trace_id: metaTraceId,
+          trace_id: expect.stringMatching(/[a-f0-9]{32}/),
         },
       },
       platform: 'javascript',
@@ -53,9 +52,6 @@ test.describe('tracing in static/pre-rendered routes', () => {
       type: 'transaction',
     });
 
-    expect(baggageMetaTagContent).toContain('sentry-transaction=GET%20%2Ftest-static'); // URL-encoded for 'GET /test-static'
-    expect(baggageMetaTagContent).toContain('sentry-sampled=true');
-
     await page.waitForTimeout(1000); // wait another sec to ensure no server transaction is sent
   });
 });