add new tests (connected tracing)

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue

@@ -3,8 +3,8 @@ import ErrorButton from '../components/ErrorButton.vue';
 </script>
 
 <template>
-  <ErrorButton id="errorBtn"  error-text="Error thrown from nuxt-4 E2E test app"/>
-  <ErrorButton id="errorBtn2" error-text="Another Error thrown from nuxt-4 E2E test app"/>
+  <ErrorButton id="errorBtn"  error-text="Error thrown from Nuxt-4 E2E test app"/>
+  <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-4 E2E test app"/>
 </template>
 
 

dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/[param].vue

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

dev-packages/e2e-tests/test-applications/nuxt-4/server/api/param-error/[param].ts

@@ -1,5 +1,5 @@
 import { defineEventHandler } from '#imports';
 
 export default defineEventHandler(_e => {
-  throw new Error('Nuxt 3 Param Server error');
+  throw new Error('Nuxt 4 Param Server error');
 });

dev-packages/e2e-tests/test-applications/nuxt-4/server/api/server-error.ts

@@ -1,5 +1,5 @@
 import { defineEventHandler } from '#imports';
 
 export default defineEventHandler(event => {
-  throw new Error('Nuxt 3 Server error');
+  throw new Error('Nuxt 4 Server error');
 });

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

@@ -4,7 +4,7 @@ import { waitForError } from '@sentry-internal/test-utils';
 test.describe('client-side errors', async () => {
   test('captures error thrown on click', async ({ page }) => {
     const errorPromise = waitForError('nuxt-4', async errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from nuxt-4 E2E test app';
+      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Nuxt-4 E2E test app';
     });
 
     await page.goto(`/client-error`);
@@ -18,7 +18,7 @@ test.describe('client-side errors', async () => {
         values: [
           {
             type: 'Error',
-            value: 'Error thrown from nuxt-4 E2E test app',
+            value: 'Error thrown from Nuxt-4 E2E test app',
             mechanism: {
               handled: false,
             },
@@ -58,7 +58,7 @@ test.describe('client-side errors', async () => {
 
   test('page is still interactive after client error', async ({ page }) => {
     const error1Promise = waitForError('nuxt-4', async errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from nuxt-4 E2E test app';
+      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Nuxt-4 E2E test app';
     });
 
     await page.goto(`/client-error`);
@@ -67,7 +67,7 @@ test.describe('client-side errors', async () => {
     const error1 = await error1Promise;
 
     const error2Promise = waitForError('nuxt-4', async errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'Another Error thrown from nuxt-4 E2E test app';
+      return errorEvent?.exception?.values?.[0]?.value === 'Another Error thrown from Nuxt-4 E2E test app';
     });
 
     await page.locator('#errorBtn2').click();
@@ -79,7 +79,7 @@ test.describe('client-side errors', async () => {
         values: [
           {
             type: 'Error',
-            value: 'Error thrown from nuxt-4 E2E test app',
+            value: 'Error thrown from Nuxt-4 E2E test app',
             mechanism: {
               handled: false,
             },
@@ -93,7 +93,7 @@ test.describe('client-side errors', async () => {
         values: [
           {
             type: 'Error',
-            value: 'Another Error thrown from nuxt-4 E2E test app',
+            value: 'Another Error thrown from Nuxt-4 E2E test app',
             mechanism: {
               handled: false,
             },

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

@@ -4,37 +4,37 @@ import { waitForError } from '@sentry-internal/test-utils';
 test.describe('server-side errors', async () => {
   test('captures api fetch error (fetched on click)', async ({ page }) => {
     const errorPromise = waitForError('nuxt-4', async errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 3 Server error';
+      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 4 Server error';
     });
 
     await page.goto(`/fetch-server-error`);
-    await page.getByText('Fetch Server Data').click();
+    await page.getByText('Fetch Server Data', { exact: true }).click();
 
     const error = await errorPromise;
 
     expect(error.transaction).toEqual('GET /api/server-error');
 
     const exception = error.exception.values[0];
     expect(exception.type).toEqual('Error');
-    expect(exception.value).toEqual('Nuxt 3 Server error');
+    expect(exception.value).toEqual('Nuxt 4 Server error');
     expect(exception.mechanism.handled).toBe(false);
   });
 
   test('captures api fetch error (fetched on click) with parametrized route', async ({ page }) => {
     const errorPromise = waitForError('nuxt-4', async errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 3 Param Server error';
+      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 4 Param Server error';
     });
 
     await page.goto(`/test-param/1234`);
-    await page.getByText('Fetch Server Data').click();
+    await page.getByRole('button', { name: 'Fetch Server Error', exact: true }).click();
 
     const error = await errorPromise;
 
     expect(error.transaction).toEqual('GET /api/param-error/1234');
 
     const exception = error.exception.values[0];
     expect(exception.type).toEqual('Error');
-    expect(exception.value).toEqual('Nuxt 3 Param Server error');
+    expect(exception.value).toEqual('Nuxt 4 Param Server error');
     expect(exception.mechanism.handled).toBe(false);
   });
 });

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

@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test.describe('distributed tracing', () => {
+  const PARAM = 's0me-param';
+
+  test('capture a distributed pageload trace', async ({ page }) => {
+    const clientTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
+      return txnEvent.transaction === '/test-param/:param()';
+    });
+
+    const serverTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
+      return txnEvent.transaction.includes('GET /test-param/');
+    });
+
+    const [_, clientTxnEvent, serverTxnEvent] = await Promise.all([
+      page.goto(`/test-param/${PARAM}`),
+      clientTxnEventPromise,
+      serverTxnEventPromise,
+      expect(page.getByText(`Param: ${PARAM}`)).toBeVisible(),
+    ]);
+
+    expect(clientTxnEvent).toMatchObject({
+      transaction: '/test-param/:param()',
+      transaction_info: { source: 'route' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'pageload',
+          origin: 'auto.pageload.vue',
+        },
+      },
+    });
+
+    expect(serverTxnEvent).toMatchObject({
+      transaction: 'GET /test-param/s0me-param', // todo: parametrize (nitro)
+      transaction_info: { source: 'url' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'http.server',
+          origin: 'auto.http.otel.http',
+        },
+      },
+    });
+
+    // connected trace
+    expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(serverTxnEvent.contexts?.trace?.trace_id);
+    expect(clientTxnEvent.contexts?.trace?.parent_span_id).toBe(serverTxnEvent.contexts?.trace?.span_id);
+  });
+});