From dcb5c334bf7dc8cb2093db785df0fe5735fe38b2 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Wed, 2 Jul 2025 13:23:12 +0200
Subject: [PATCH 1/3] rename error button

---
 .../nuxt-3-dynamic-import/pages/fetch-server-error.vue    | 8 ++++----
 .../nuxt-3-dynamic-import/tests/errors.server.test.ts     | 2 +-
 .../nuxt-3-min/pages/fetch-server-error.vue               | 8 ++++----
 .../nuxt-3-min/tests/errors.server.test.ts                | 2 +-
 .../nuxt-3-top-level-import/pages/fetch-server-error.vue  | 8 ++++----
 .../nuxt-3-top-level-import/tests/errors.server.test.ts   | 4 ++--
 .../test-applications/nuxt-3/pages/fetch-server-error.vue | 8 ++++----
 .../test-applications/nuxt-3/tests/errors.server.test.ts  | 2 +-
 .../nuxt-4/app/pages/fetch-server-error.vue               | 8 ++++----
 .../test-applications/nuxt-4/tests/errors.server.test.ts  | 2 +-
 10 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue
index 8cb2a9997e58..25ed45233d98 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue
+++ b/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 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>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts
index b781642c2b4f..3dbc2d8e55e9 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts
+++ b/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 Error', { exact: true }).click();
 
     const error = await errorPromise;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue
index 8cb2a9997e58..25ed45233d98 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue
+++ b/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 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>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts
index 8f20aa938893..099ec8a24fa7 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts
+++ b/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 Error', { exact: true }).click();
 
     const error = await errorPromise;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue
index 8cb2a9997e58..25ed45233d98 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue
+++ b/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 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>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
index 053ec5b6ab67..de520ed57f8c 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
@@ -12,7 +12,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 Error', { exact: true }).click();
 
     const transactionEvent = await transactionEventPromise;
     const error = await errorPromise;
@@ -40,7 +40,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 Error', { exact: true }).click();
 
     const transactionEvent = await transactionEventPromise;
     const error = await errorPromise;
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
index 8cb2a9997e58..25ed45233d98 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <button @click="fetchData">Fetch Server Data</button>
+    <button @click="fetchError">Fetch Server 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>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts
index d1556d511bf0..c590413e4b14 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/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 Error', { exact: true }).click();
 
     const error = await errorPromise;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
index 8cb2a9997e58..25ed45233d98 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <button @click="fetchData">Fetch Server Data</button>
+    <button @click="fetchError">Fetch Server 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>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts
index 396870d19925..862b92217f7b 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/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 Error', { exact: true }).click();
 
     const error = await errorPromise;
 

From 2be7aa8409fc25ff7f06db42a7f6778c598313b3 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Wed, 2 Jul 2025 13:59:20 +0200
Subject: [PATCH 2/3] test(nuxt): Add test for distributed server request

---
 .../nuxt-4/tests/tracing.test.ts              | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.test.ts
index 505a912c95d5..511880da17a6 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.test.ts
@@ -66,4 +66,70 @@ 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 server request with parametrization', async ({ page }) => {
+    const clientTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
+      return txnEvent.transaction === '/test-param/:param()';
+    });
+
+    const ssrTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
+      return txnEvent.transaction.includes('GET /test-param/');
+    });
+
+    const serverReqTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
+      return txnEvent.transaction.includes('GET /api/test-param/');
+    });
+
+    const [, clientTxnEvent, ssrTxnEvent, , , serverReqTxnEvent] = await Promise.all([
+      page.goto(`/test-param/${PARAM}`),
+      clientTxnEventPromise,
+      ssrTxnEventPromise,
+      expect(page.getByText(`Param: ${PARAM}`)).toBeVisible(),
+      page.getByText('Fetch Server Data', { exact: true }).click(),
+      serverReqTxnEventPromise,
+    ]);
+
+    const httpClientSpan = clientTxnEvent?.spans?.find(span => span.description === `GET /api/test-param/${PARAM}`);
+
+    expect(ssrTxnEvent).toMatchObject({
+      transaction: `GET /test-param/${PARAM}`, // todo: parametrize (nitro)
+      transaction_info: { source: 'url' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'http.server',
+          origin: 'auto.http.otel.http',
+        },
+      },
+    });
+
+    expect(httpClientSpan).toMatchObject({
+      description: `GET /api/test-param/${PARAM}`, // todo: parametrize (nitro)
+      parent_span_id: clientTxnEvent.contexts?.trace?.span_id, // pageload span is parent
+      data: expect.objectContaining({
+        'sentry.op': 'http.client',
+        'sentry.origin': 'auto.http.browser',
+        'http.request_method': 'GET',
+      }),
+    });
+
+    expect(serverReqTxnEvent).toMatchObject({
+      transaction: `GET /api/test-param/${PARAM}`, // todo: parametrize (nitro)
+      transaction_info: { source: 'url' },
+      type: 'transaction',
+      contexts: {
+        trace: {
+          op: 'http.server',
+          origin: 'auto.http.otel.http',
+          parent_span_id: httpClientSpan?.span_id, // http.client span is parent
+        },
+      },
+    });
+
+    // All 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);
+  });
 });

From 77bbd04ed1d56efbd81427f9210c4d0e95801638 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Wed, 2 Jul 2025 14:28:55 +0200
Subject: [PATCH 3/3] fix button naming to be exact

---
 .../nuxt-3-dynamic-import/pages/fetch-server-error.vue     | 2 +-
 .../nuxt-3-dynamic-import/pages/test-param/[param].vue     | 7 +++----
 .../nuxt-3-dynamic-import/tests/errors.server.test.ts      | 4 ++--
 .../nuxt-3-min/pages/fetch-server-error.vue                | 2 +-
 .../nuxt-3-min/pages/test-param/[param].vue                | 7 +++----
 .../nuxt-3-min/tests/errors.server.test.ts                 | 4 ++--
 .../nuxt-3-top-level-import/pages/fetch-server-error.vue   | 2 +-
 .../nuxt-3-top-level-import/pages/test-param/[param].vue   | 7 +++----
 .../nuxt-3-top-level-import/tests/errors.server.test.ts    | 6 +++---
 .../test-applications/nuxt-3/pages/fetch-server-error.vue  | 2 +-
 .../test-applications/nuxt-3/pages/test-param/[param].vue  | 7 +++----
 .../test-applications/nuxt-3/tests/errors.server.test.ts   | 4 ++--
 .../nuxt-4/app/pages/fetch-server-error.vue                | 2 +-
 .../nuxt-4/app/pages/test-param/[param].vue                | 7 +++----
 .../test-applications/nuxt-4/tests/errors.server.test.ts   | 4 ++--
 15 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue
index 25ed45233d98..0e9aeb34b4fc 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/fetch-server-error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="fetchError">Fetch Server Error</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/test-param/[param].vue b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/test-param/[param].vue
index e83392b37b5c..019404aaf460 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/pages/test-param/[param].vue
+++ b/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>
-
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts
index 3dbc2d8e55e9..b18da9ba0a3b 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts
+++ b/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 Error', { 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;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue
index 25ed45233d98..0e9aeb34b4fc 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/fetch-server-error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="fetchError">Fetch Server Error</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/test-param/[param].vue b/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/test-param/[param].vue
index e83392b37b5c..019404aaf460 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-min/pages/test-param/[param].vue
+++ b/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>
-
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts
index 099ec8a24fa7..40904b51b993 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts
+++ b/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 Error', { 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;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue
index 25ed45233d98..0e9aeb34b4fc 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/fetch-server-error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="fetchError">Fetch Server Error</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/test-param/[param].vue b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/test-param/[param].vue
index e83392b37b5c..019404aaf460 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/pages/test-param/[param].vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-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>
-
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
index de520ed57f8c..551a33ee1fc1 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts
@@ -12,7 +12,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
-    await page.getByText('Fetch Server Error', { exact: true }).click();
+    await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const transactionEvent = await transactionEventPromise;
     const error = await errorPromise;
@@ -40,7 +40,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
-    await page.getByText('Fetch Server Error', { exact: true }).click();
+    await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const transactionEvent = await transactionEventPromise;
     const error = await errorPromise;
@@ -57,7 +57,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;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
index 25ed45233d98..0e9aeb34b4fc 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/fetch-server-error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="fetchError">Fetch Server Error</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/test-param/[param].vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/test-param/[param].vue
index e83392b37b5c..019404aaf460 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/test-param/[param].vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/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>
-
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts
index c590413e4b14..b62654b60c47 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/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 Error', { 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;
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
index 25ed45233d98..0e9aeb34b4fc 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="fetchError">Fetch Server Error</button>
+    <button @click="fetchError">Fetch Server API Error</button>
   </div>
 </template>
 
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/[param].vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/[param].vue
index e83392b37b5c..019404aaf460 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/[param].vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/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>
-
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts
index 862b92217f7b..1d593cb09caf 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.server.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/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 Error', { 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;