feat(nuxt): Detect development environment and add dev E2E test

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
-Work in this release was contributed by @xgedev, @Mohataseem89, @sebws, @G-Rath, and @gianpaj. Thank you for your contributions!
+Work in this release was contributed by @xgedev, @Mohataseem89, @sebws, @G-Rath, @maximepvrt, and @gianpaj. Thank you for your contributions!
 
 - ref(nextjs): Drop `resolve` dependency from the Next.js SDK ([#18618](https://github.com/getsentry/sentry-javascript/pull/18618))
 

dev-packages/e2e-tests/test-applications/nuxt-4/nuxt-start-dev-server.bash

@@ -0,0 +1,49 @@
+#!/bin/bash
+# To enable Sentry in Nuxt dev, it needs the sentry.server.config.mjs file from the .nuxt folder.
+# First, we need to start 'nuxt dev' to generate the file, and then start 'nuxt dev' again with the NODE_OPTIONS to have Sentry enabled.
+
+# Using a different port to avoid playwright already starting with the tests for port 3030
+TEMP_PORT=3035
+
+# 1.  Start dev in background - this generates .nuxt folder
+pnpm dev -p $TEMP_PORT &
+DEV_PID=$!
+
+# 2.  Wait for the sentry.server.config.mjs file to appear
+echo "Waiting for .nuxt/dev/sentry.server.config.mjs file..."
+COUNTER=0
+while [ ! -f ".nuxt/dev/sentry.server.config.mjs" ] && [ $COUNTER -lt 30 ]; do
+    sleep 1
+    ((COUNTER++))
+done
+
+if [ ! -f ".nuxt/dev/sentry.server.config.mjs" ]; then
+    echo "ERROR: .nuxt/dev/sentry.server.config.mjs file never appeared!"
+    echo "This usually means the Nuxt dev server failed to start or generate the file. Try to rerun the test."
+    pkill -P $DEV_PID || kill $DEV_PID
+    exit 1
+fi
+
+# 3.  Cleanup
+echo "Found .nuxt/dev/sentry.server.config.mjs, stopping 'nuxt dev' process..."
+pkill -P $DEV_PID || kill $DEV_PID
+
+# Wait for port to be released
+echo "Waiting for port $TEMP_PORT to be released..."
+COUNTER=0
+# Check if port is still in use
+while lsof -i :$TEMP_PORT > /dev/null 2>&1 && [ $COUNTER -lt 10 ]; do
+    sleep 1
+    ((COUNTER++))
+done
+
+if lsof -i :$TEMP_PORT > /dev/null 2>&1; then
+    echo "WARNING: Port $TEMP_PORT still in use after 10 seconds, proceeding anyway..."
+else
+    echo "Port $TEMP_PORT released successfully"
+fi
+
+echo "Starting nuxt dev with Sentry server config..."
+
+# 4.  Start the actual dev command which should be used for the tests
+NODE_OPTIONS='--import ./.nuxt/dev/sentry.server.config.mjs' nuxt dev

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

@@ -11,9 +11,11 @@
     "start:import": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs",
     "clean": "npx nuxi cleanup",
     "test": "playwright test",
+    "test:prod": "TEST_ENV=production playwright test",
+    "test:dev": "TEST_ENV=development playwright test environment",
     "test:build": "pnpm install && pnpm build",
     "test:build-canary": "pnpm add nuxt@npm:nuxt-nightly@latest && pnpm add nitropack@npm:nitropack-nightly@latest && pnpm install --force && pnpm build",
-    "test:assert": "pnpm test"
+    "test:assert": "pnpm test:prod && pnpm test:dev"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.5",

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

@@ -1,7 +1,25 @@
 import { getPlaywrightConfig } from '@sentry-internal/test-utils';
 
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+  throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+  if (testEnv === 'development') {
+    return 'bash ./nuxt-start-dev-server.bash';
+  }
+
+  if (testEnv === 'production') {
+    return 'pnpm start:import';
+  }
+
+  throw new Error(`Unknown test env: ${testEnv}`);
+};
+
 const config = getPlaywrightConfig({
-  startCommand: `pnpm start:import`,
+  startCommand: getStartCommand(),
 });
 
 export default config;

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

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/nuxt';
 import { usePinia, useRuntimeConfig } from '#imports';
 
 Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: useRuntimeConfig().public.sentry.dsn,
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,

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

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/nuxt';
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  environment: 'qa', // dynamic sampling bias to keep transactions
   tracesSampleRate: 1.0, //  Capture 100% of the transactions
   tunnel: 'http://localhost:3031/', // proxy server
 });

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

@@ -0,0 +1,77 @@
+import { expect, test } from '@playwright/test';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { isDevMode } from './isDevMode';
+
+test.describe('environment detection', async () => {
+  test('sets correct environment for client-side errors', async ({ page }) => {
+    const errorPromise = waitForError('nuxt-4', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Nuxt-4 E2E test app';
+    });
+
+    // We have to wait for networkidle in dev mode because clicking the button is a no-op otherwise (network requests are blocked during page load)
+    await page.goto(`/client-error`, isDevMode ? { waitUntil: 'networkidle' } : {});
+    await page.locator('#errorBtn').click();
+
+    const error = await errorPromise;
+
+    if (isDevMode) {
+      expect(error.environment).toBe('development');
+    } else {
+      expect(error.environment).toBe('production');
+    }
+  });
+
+  test('sets correct environment for client-side transactions', async ({ page }) => {
+    const transactionPromise = waitForTransaction('nuxt-4', async transactionEvent => {
+      return transactionEvent.transaction === '/test-param/:param()';
+    });
+
+    await page.goto(`/test-param/1234`);
+
+    const transaction = await transactionPromise;
+
+    if (isDevMode) {
+      expect(transaction.environment).toBe('development');
+    } else {
+      expect(transaction.environment).toBe('production');
+    }
+  });
+
+  test('sets correct environment for server-side errors', async ({ page }) => {
+    const errorPromise = waitForError('nuxt-4', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Nuxt 4 Server error';
+    });
+
+    await page.goto(`/fetch-server-routes`, isDevMode ? { waitUntil: 'networkidle' } : {});
+    await page.getByText('Fetch Server API Error', { exact: true }).click();
+
+    const error = await errorPromise;
+
+    expect(error.transaction).toBe('GET /api/server-error');
+
+    if (isDevMode) {
+      expect(error.environment).toBe('development');
+    } else {
+      expect(error.environment).toBe('production');
+    }
+  });
+
+  test('sets correct environment for server-side transactions', async ({ page }) => {
+    const transactionPromise = waitForTransaction('nuxt-4', async transactionEvent => {
+      return transactionEvent.transaction === 'GET /api/nitro-fetch';
+    });
+
+    await page.goto(`/fetch-server-routes`, isDevMode ? { waitUntil: 'networkidle' } : {});
+    await page.getByText('Fetch Nitro $fetch', { exact: true }).click();
+
+    const transaction = await transactionPromise;
+
+    expect(transaction.contexts.trace.op).toBe('http.server');
+
+    if (isDevMode) {
+      expect(transaction.environment).toBe('development');
+    } else {
+      expect(transaction.environment).toBe('production');
+    }
+  });
+});

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

@@ -0,0 +1 @@
+export const isDevMode = !!process.env.TEST_ENV && process.env.TEST_ENV.includes('development');

packages/core/src/constants.ts

@@ -1 +1,2 @@
 export const DEFAULT_ENVIRONMENT = 'production';
+export const DEV_ENVIRONMENT = 'development';

packages/core/src/index.ts

@@ -101,7 +101,7 @@ export {
   headersToDict,
   httpHeadersToSpanAttributes,
 } from './utils/request';
-export { DEFAULT_ENVIRONMENT } from './constants';
+export { DEFAULT_ENVIRONMENT, DEV_ENVIRONMENT } from './constants';
 export { addBreadcrumb } from './breadcrumbs';
 export { functionToStringIntegration } from './integrations/functiontostring';
 // eslint-disable-next-line deprecation/deprecation

packages/nuxt/package.json

@@ -53,6 +53,7 @@
     "@sentry/cloudflare": "10.32.1",
     "@sentry/core": "10.32.1",
     "@sentry/node": "10.32.1",
+    "@sentry/node-core": "10.32.1",
     "@sentry/rollup-plugin": "^4.6.1",
     "@sentry/vite-plugin": "^4.6.1",
     "@sentry/vue": "10.32.1"

packages/nuxt/src/client/sdk.ts

@@ -1,6 +1,6 @@
 import { getDefaultIntegrations as getBrowserDefaultIntegrations, init as initBrowser } from '@sentry/browser';
 import type { Client } from '@sentry/core';
-import { applySdkMetadata } from '@sentry/core';
+import { applySdkMetadata, DEFAULT_ENVIRONMENT, DEV_ENVIRONMENT } from '@sentry/core';
 import type { SentryNuxtClientOptions } from '../common/types';
 
 /**
@@ -12,6 +12,7 @@ export function init(options: SentryNuxtClientOptions): Client | undefined {
   const sentryOptions = {
     /* BrowserTracing is added later with the Nuxt client plugin */
     defaultIntegrations: [...getBrowserDefaultIntegrations(options)],
+    environment: import.meta.dev ? DEV_ENVIRONMENT : DEFAULT_ENVIRONMENT,
     ...options,
   };
 

packages/nuxt/src/server/sdk.ts

@@ -1,12 +1,21 @@
 import * as path from 'node:path';
 import type { Client, Event, EventProcessor, Integration } from '@sentry/core';
-import { applySdkMetadata, debug, flush, getGlobalScope, vercelWaitUntil } from '@sentry/core';
+import {
+  applySdkMetadata,
+  debug,
+  DEFAULT_ENVIRONMENT,
+  DEV_ENVIRONMENT,
+  flush,
+  getGlobalScope,
+  vercelWaitUntil,
+} from '@sentry/core';
 import {
   getDefaultIntegrations as getDefaultNodeIntegrations,
   httpIntegration,
   init as initNode,
   type NodeOptions,
 } from '@sentry/node';
+import { isCjs } from '@sentry/node-core';
 import { DEBUG_BUILD } from '../common/debug-build';
 import type { SentryNuxtServerOptions } from '../common/types';
 
@@ -17,6 +26,7 @@ import type { SentryNuxtServerOptions } from '../common/types';
  */
 export function init(options: SentryNuxtServerOptions): Client | undefined {
   const sentryOptions = {
+    environment: !isCjs() && import.meta.dev ? DEV_ENVIRONMENT : DEFAULT_ENVIRONMENT,
     ...options,
     defaultIntegrations: getNuxtDefaultIntegrations(options),
   };