test(nuxt): Update Nuxt version and add Nitro $fetch test (#17713)

This PR adds the following:
- an E2E test case for Nitro `$fetch` requests
- Upgrading the Nuxt 4 version (previously in alpha)
- Deleting the `app.vue` file as this is not needed when using the
`app/pages` directory (following the [Nuxt
docs](https://nuxt.com/docs/4.x/guide/directory-structure/app/app))

Author: s1gr1d

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

@@ -1,6 +1,7 @@
 <template>
   <div>
     <button @click="fetchError">Fetch Server API Error</button>
+    <button @click="fetchNitroFetch">Fetch Nitro $fetch</button>
   </div>
 </template>
 
@@ -10,4 +11,8 @@ import { useFetch } from '#imports';
 const fetchError = async () => {
   await useFetch('/api/server-error');
 };
+
+const fetchNitroFetch = async () => {
+  await useFetch('/api/nitro-fetch');
+};
 </script>

dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-error.vue renamed to dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/fetch-server-routes.vue

@@ -1,3 +1,20 @@
 <template>
-  <h1>Hello!</h1>
+  <NuxtLayout>
+    <header>
+      <nav>
+        <ul>
+          <li><NuxtLink to="/fetch-server-routes">Fetch Server Routes</NuxtLink></li>
+          <li><NuxtLink to="/test-param/1234">Fetch Param</NuxtLink></li>
+          <li><NuxtLink to="/client-error">Client Error</NuxtLink></li>
+        </ul>
+      </nav>
+    </header>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+import { useSentryTestTag } from '#imports';
+
+useSentryTestTag();
+</script>

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

@@ -18,7 +18,7 @@
   "dependencies": {
     "@pinia/nuxt": "^0.5.5",
     "@sentry/nuxt": "latest || *",
-    "nuxt": "^4.0.0-alpha.4"
+    "nuxt": "^4.1.2"
   },
   "devDependencies": {
     "@playwright/test": "~1.53.2",

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

@@ -0,0 +1,5 @@
+import { defineEventHandler } from '#imports';
+
+export default defineEventHandler(async () => {
+  return await $fetch('https://example.com');
+});

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

@@ -7,7 +7,7 @@ test.describe('server-side errors', async () => {
       return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 4 Server error';
     });
 
-    await page.goto(`/fetch-server-error`);
+    await page.goto(`/fetch-server-routes`);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const error = await errorPromise;

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

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/nuxt';
 
 test('sends a server action transaction on pageload', async ({ page }) => {
@@ -43,3 +43,21 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
 
   expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
 });
+
+test('captures server API calls made with Nitro $fetch', async ({ page }) => {
+  const transactionPromise = waitForTransaction('nuxt-4', async transactionEvent => {
+    return transactionEvent.transaction === 'GET /api/nitro-fetch';
+  });
+
+  await page.goto(`/fetch-server-routes`);
+  await page.getByText('Fetch Nitro $fetch', { exact: true }).click();
+
+  const httpServerFetchSpan = await transactionPromise;
+  const httpClientSpan = httpServerFetchSpan.spans.find(span => span.description === 'GET https://example.com/');
+
+  expect(httpServerFetchSpan.transaction).toEqual('GET /api/nitro-fetch');
+  expect(httpServerFetchSpan.contexts.trace.op).toEqual('http.server');
+
+  expect(httpClientSpan.parent_span_id).toEqual(httpServerFetchSpan.contexts.trace.span_id);
+  expect(httpClientSpan.op).toEqual('http.client');
+});