feat(nuxt): Set transaction name for server error (#13292)

Setting the transaction name to display the API route where the error
happened:

![image](https://github.com/user-attachments/assets/5954fc45-e710-44ab-b29a-f90e6bd480a4)

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

@@ -3,6 +3,8 @@
     <header>
       <nav>
         <ul>
+          <li><NuxtLink to="/fetch-server-error">Fetch Server Error</NuxtLink></li>
+          <li><NuxtLink to="/param-error/1234">Fetch Param Server Error</NuxtLink></li>
           <li><NuxtLink to="/client-error">Client Error</NuxtLink></li>
         </ul>
       </nav>
@@ -11,3 +13,5 @@
   </NuxtLayout>
 </template>
 
+<script setup>
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <button @click="fetchData">Fetch Server Data</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const fetchData = async () => {
+  await useFetch('/api/server-error');
+}
+</script>

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

@@ -1,4 +1,15 @@
 <template>
   <p>{{ $route.params.param }} - {{ $route.params.param }}</p>
+
   <ErrorButton errorText="Error thrown from Param Route Button"  />
+  <button @click="fetchData">Fetch Server Data</button>
 </template>
+
+<script setup lang="ts">
+const route = useRoute();
+const param = route.params.param;
+
+const fetchData = async () => {
+  await useFetch(`/api/param-error/${param}`);
+}
+</script>

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

@@ -0,0 +1,3 @@
+export default defineEventHandler(_e => {
+  throw new Error('Nuxt 3 Param Server error');
+});

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

@@ -0,0 +1,3 @@
+export default defineEventHandler(event => {
+  throw new Error('Nuxt 3 Server error');
+});

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

@@ -0,0 +1,5 @@
+export default defineEventHandler(event => {
+  const param = getRouterParam(event, 'param');
+
+  return `Param: ${param}!`;
+});

dev-packages/e2e-tests/test-applications/nuxt-3/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

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

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+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-3', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 3 Server error';
+    });
+
+    await page.goto(`/fetch-server-error`);
+    await page.getByText('Fetch Server Data').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.mechanism.handled).toBe(false);
+  });
+
+  test('captures api fetch error (fetched on click) with parametrized route', async ({ page }) => {
+    const errorPromise = waitForError('nuxt-3', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 3 Param Server error';
+    });
+
+    await page.goto(`/test-param/1234`);
+    await page.getByText('Fetch Server Data').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.mechanism.handled).toBe(false);
+  });
+});

packages/nuxt/src/runtime/plugins/sentry.server.ts

@@ -1,4 +1,4 @@
-import { captureException } from '@sentry/node';
+import * as Sentry from '@sentry/node';
 import { H3Error } from 'h3';
 import { defineNitroPlugin } from 'nitropack/runtime';
 import type { NuxtRenderHTMLContext } from 'nuxt/app';
@@ -14,9 +14,18 @@ export default defineNitroPlugin(nitroApp => {
       }
     }
 
+    const { method, path } = {
+      method: errorContext.event && errorContext.event._method ? errorContext.event._method : '',
+      path: errorContext.event && errorContext.event._path ? errorContext.event._path : null,
+    };
+
+    if (path) {
+      Sentry.getCurrentScope().setTransactionName(`${method} ${path}`);
+    }
+
     const structuredContext = extractErrorContext(errorContext);
 
-    captureException(error, {
+    Sentry.captureException(error, {
       captureContext: { contexts: { nuxt: structuredContext } },
       mechanism: { handled: false },
     });