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 },
  });