test(nuxt): Add test for distributed client-to-server request (#16788)

While working on route parametrization, [it came up in this
PR](#16785) that
there are different transactions/spans which should be parametrized:
- `pageload` transaction -> it's already parametrized because of the
`vueIntegration`
- SSR `http.server` transaction -> not parametrized
- `http.client` span when doing an extra server request -> not
parametrized
- `http.server` span when doing an extra server request -> not
parametrized

This test is added to have a visualization of the current state of
parametrization to be able to iterate on it.

**The PR is quite long but the test case and the tests are just
copy-pasted to all Nuxt E2E tests.**

Author: s1gr1d

dev-packages/e2e-tests/README.md

@@ -133,3 +133,24 @@ A standardized frontend test application has the following features:
 ### Standardized Backend Test Apps
 
 TBD
+
+### Standardized Frontend-to-Backend Test Apps
+
+A standardized Meta-Framework test application has the following features:
+
+- Has a parameterized backend API route `/user/:id` that returns a JSON object with the user ID.
+- Has a parameterized frontend page (can be SSR) `/user/:id` that fetches the user data on the client-side from the API route and displays it.
+
+This setup creates the scenario where the frontend page loads, and then immediately makes an API request to the backend API.
+
+The following test cases for connected tracing should be implemented in the test app:
+
+- Capturing a distributed page load trace when a page is loaded
+  - The HTML meta-tag should include the Sentry trace data and baggage
+  - The server root span should be the parent of the client pageload span
+  - All routes (server and client) should be parameterized, e.g. `/user/5` should be captured as `/user/:id` route
+- Capturing a distributed trace when requesting the API from the client-side
+  - There should be three transactions involved: the client pageload, the server "pageload", and the server API request
+  - The client pageload should include an `http.client` span that is the parent of the server API request span
+  - All three transactions and the `http.client` span should share the same `trace_id`
+  - All `transaction` names and the `span` description should be parameterized, e.g. `/user/5` should be captured as `/user/:id` route

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <button @click="fetchData">Fetch Server Data</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFetch} from '#imports'
+import { useFetch } from '#imports';
 
-const fetchData = async () => {
+const fetchError = async () => {
   await useFetch('/api/server-error');
-}
+};
 </script>

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/test-param/[param].vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useRoute, useFetch } from '#imports'
+import { useRoute, useFetch } from '#imports';
 
 const route = useRoute();
 const param = route.params.param;
 
 const fetchError = async () => {
   await useFetch(`/api/param-error/${param}`);
-}
+};
 
 const fetchData = async () => {
   await useFetch(`/api/test-param/${param}`);
@@ -18,6 +18,5 @@ const fetchData = async () => {
 
   <ErrorButton id="errorBtn" errorText="Error thrown from Param Route Button" />
   <button @click="fetchData">Fetch Server Data</button>
-  <button @click="fetchError">Fetch Server Error</button>
+  <button @click="fetchError">Fetch Server API Error</button>
 </template>
-

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/test-param/user/[userId].vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useFetch, useRoute } from '#imports';
+
+const route = useRoute();
+const userId = route.params.userId as string;
+
+const { data } = await useFetch(`/api/user/${userId}`, {
+  server: false, // Don't fetch during SSR, only client-side
+});
+</script>
+
+<template>
+  <div>
+    <p v-if="data">User ID: {{ data }}</p>
+  </div>
+</template>

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/server/api/user/[userId].ts

@@ -0,0 +1,7 @@
+import { defineEventHandler, getRouterParam } from '#imports';
+
+export default defineEventHandler(event => {
+  const userId = getRouterParam(event, 'userId');
+
+  return `UserId Param: ${userId}!`;
+});

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts

@@ -8,7 +8,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
-    await page.getByText('Fetch Server Data', { exact: true }).click();
+    await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const error = await errorPromise;
 
@@ -26,7 +26,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
-    await page.getByRole('button', { name: 'Fetch Server Error', exact: true }).click();
+    await page.getByRole('button', { name: 'Fetch Server API Error', exact: true }).click();
 
     const error = await errorPromise;
 

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

@@ -66,4 +66,91 @@ test.describe('distributed tracing', () => {
     expect(clientTxnEvent.contexts?.trace?.parent_span_id).toBe(serverTxnEvent.contexts?.trace?.span_id);
     expect(serverTxnEvent.contexts?.trace?.trace_id).toBe(metaTraceId);
   });
+
+  test('capture a distributed trace from a client-side API request with parametrized routes', async ({ page }) => {
+    const clientTxnEventPromise = waitForTransaction('nuxt-3-dynamic-import', txnEvent => {
+      return txnEvent.transaction === '/test-param/user/:userId()';
+    });
+    const ssrTxnEventPromise = waitForTransaction('nuxt-3-dynamic-import', txnEvent => {
+      return txnEvent.transaction?.includes('GET /test-param/user') ?? false;
+    });
+    const serverReqTxnEventPromise = waitForTransaction('nuxt-3-dynamic-import', txnEvent => {
+      return txnEvent.transaction?.includes('GET /api/user/') ?? false;
+    });
+
+    // Navigate to the page which will trigger an API call from the client-side
+    await page.goto(`/test-param/user/${PARAM}`);
+
+    const [clientTxnEvent, ssrTxnEvent, serverReqTxnEvent] = await Promise.all([
+      clientTxnEventPromise,
+      ssrTxnEventPromise,
+      serverReqTxnEventPromise,
+    ]);
+
+    const httpClientSpan = clientTxnEvent?.spans?.find(span => span.description === `GET /api/user/${PARAM}`);
+
+    expect(clientTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: '/test-param/user/:userId()', // parametrized route
+        transaction_info: { source: 'route' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'pageload',
+            origin: 'auto.pageload.vue',
+          }),
+        }),
+      }),
+    );
+
+    expect(httpClientSpan).toBeDefined();
+    expect(httpClientSpan).toEqual(
+      expect.objectContaining({
+        description: `GET /api/user/${PARAM}`, // fixme: parametrize
+        parent_span_id: clientTxnEvent.contexts?.trace?.span_id, // pageload span is parent
+        data: expect.objectContaining({
+          url: `/api/user/${PARAM}`,
+          type: 'fetch',
+          'sentry.op': 'http.client',
+          'sentry.origin': 'auto.http.browser',
+          'http.method': 'GET',
+        }),
+      }),
+    );
+
+    expect(ssrTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
+        transaction_info: { source: 'url' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'http.server',
+            origin: 'auto.http.otel.http',
+          }),
+        }),
+      }),
+    );
+
+    expect(serverReqTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: `GET /api/user/${PARAM}`,
+        transaction_info: { source: 'url' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'http.server',
+            origin: 'auto.http.otel.http',
+            parent_span_id: httpClientSpan?.span_id, // http.client span is parent
+          }),
+        }),
+      }),
+    );
+
+    // All 3 transactions and the http.client span should share the same trace_id
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBeDefined();
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(httpClientSpan?.trace_id);
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(ssrTxnEvent.contexts?.trace?.trace_id);
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(serverReqTxnEvent.contexts?.trace?.trace_id);
+  });
 });

dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <button @click="fetchData">Fetch Server Data</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFetch} from '#imports'
+import { useFetch } from '#imports';
 
-const fetchData = async () => {
+const fetchError = async () => {
   await useFetch('/api/server-error');
-}
+};
 </script>

dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/test-param/[param].vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useRoute, useFetch } from '#imports'
+import { useRoute, useFetch } from '#imports';
 
 const route = useRoute();
 const param = route.params.param;
 
 const fetchError = async () => {
   await useFetch(`/api/param-error/${param}`);
-}
+};
 
 const fetchData = async () => {
   await useFetch(`/api/test-param/${param}`);
@@ -18,6 +18,5 @@ const fetchData = async () => {
 
   <ErrorButton id="errorBtn" errorText="Error thrown from Param Route Button" />
   <button @click="fetchData">Fetch Server Data</button>
-  <button @click="fetchError">Fetch Server Error</button>
+  <button @click="fetchError">Fetch Server API Error</button>
 </template>
-

dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/test-param/user/[userId].vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useFetch, useRoute } from '#imports';
+
+const route = useRoute();
+const userId = route.params.userId as string;
+
+const { data } = await useFetch(`/api/user/${userId}`, {
+  server: false, // Don't fetch during SSR, only client-side
+});
+</script>
+
+<template>
+  <div>
+    <p v-if="data">User ID: {{ data }}</p>
+  </div>
+</template>

dev-packages/e2e-tests/test-applications/nuxt-3-min/server/api/user/[userId].ts

@@ -0,0 +1,7 @@
+import { defineEventHandler, getRouterParam } from '#imports';
+
+export default defineEventHandler(event => {
+  const userId = getRouterParam(event, 'userId');
+
+  return `UserId Param: ${userId}!`;
+});

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

@@ -8,7 +8,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
-    await page.getByText('Fetch Server Data', { exact: true }).click();
+    await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const error = await errorPromise;
 
@@ -26,7 +26,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
-    await page.getByRole('button', { name: 'Fetch Server Error', exact: true }).click();
+    await page.getByRole('button', { name: 'Fetch Server API Error', exact: true }).click();
 
     const error = await errorPromise;
 

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

@@ -66,4 +66,91 @@ test.describe('distributed tracing', () => {
     expect(clientTxnEvent.contexts?.trace?.parent_span_id).toBe(serverTxnEvent.contexts?.trace?.span_id);
     expect(serverTxnEvent.contexts?.trace?.trace_id).toBe(metaTraceId);
   });
+
+  test('capture a distributed trace from a client-side API request with parametrized routes', async ({ page }) => {
+    const clientTxnEventPromise = waitForTransaction('nuxt-3-min', txnEvent => {
+      return txnEvent.transaction === '/test-param/user/:userId()';
+    });
+    const ssrTxnEventPromise = waitForTransaction('nuxt-3-min', txnEvent => {
+      return txnEvent.transaction?.includes('GET /test-param/user') ?? false;
+    });
+    const serverReqTxnEventPromise = waitForTransaction('nuxt-3-min', txnEvent => {
+      return txnEvent.transaction?.includes('GET /api/user/') ?? false;
+    });
+
+    // Navigate to the page which will trigger an API call from the client-side
+    await page.goto(`/test-param/user/${PARAM}`);
+
+    const [clientTxnEvent, ssrTxnEvent, serverReqTxnEvent] = await Promise.all([
+      clientTxnEventPromise,
+      ssrTxnEventPromise,
+      serverReqTxnEventPromise,
+    ]);
+
+    const httpClientSpan = clientTxnEvent?.spans?.find(span => span.description === `GET /api/user/${PARAM}`);
+
+    expect(clientTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: '/test-param/user/:userId()', // parametrized route
+        transaction_info: { source: 'route' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'pageload',
+            origin: 'auto.pageload.vue',
+          }),
+        }),
+      }),
+    );
+
+    expect(httpClientSpan).toBeDefined();
+    expect(httpClientSpan).toEqual(
+      expect.objectContaining({
+        description: `GET /api/user/${PARAM}`, // fixme: parametrize
+        parent_span_id: clientTxnEvent.contexts?.trace?.span_id, // pageload span is parent
+        data: expect.objectContaining({
+          url: `/api/user/${PARAM}`,
+          type: 'fetch',
+          'sentry.op': 'http.client',
+          'sentry.origin': 'auto.http.browser',
+          'http.method': 'GET',
+        }),
+      }),
+    );
+
+    expect(ssrTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
+        transaction_info: { source: 'url' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'http.server',
+            origin: 'auto.http.otel.http',
+          }),
+        }),
+      }),
+    );
+
+    expect(serverReqTxnEvent).toEqual(
+      expect.objectContaining({
+        type: 'transaction',
+        transaction: `GET /api/user/${PARAM}`,
+        transaction_info: { source: 'url' },
+        contexts: expect.objectContaining({
+          trace: expect.objectContaining({
+            op: 'http.server',
+            origin: 'auto.http.otel.http',
+            parent_span_id: httpClientSpan?.span_id, // http.client span is parent
+          }),
+        }),
+      }),
+    );
+
+    // All 3 transactions and the http.client span should share the same trace_id
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBeDefined();
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(httpClientSpan?.trace_id);
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(ssrTxnEvent.contexts?.trace?.trace_id);
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(serverReqTxnEvent.contexts?.trace?.trace_id);
+  });
 });

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <button @click="fetchData">Fetch Server Data</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFetch} from '#imports'
+import { useFetch } from '#imports';
 
-const fetchData = async () => {
+const fetchError = async () => {
   await useFetch('/api/server-error');
-}
+};
 </script>