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

Nuxt shows if it is running in a dev environment in the variable
`import.meta.dev`
([docs](https://nuxt.com/docs/4.x/api/advanced/import-meta#runtime-app-properties))
- the Vite variable `import.meta.env.DEV`
([docs](https://vite.dev/guide/env-and-mode#built-in-constants)) is not
available.

To test this, a dev E2E test environment has been added. This includes a
bash script which runs `nuxt dev` first to generate the necessary files
and then starts the dev command again with the `NODE_OPTIONS` env.

Right now, the development environment tests only test this specific
feature (detecting the dev environment) because a bunch of existing
tests are failing in dev mode. This is probably because the dev test
setup needs to be a bit different (like waiting for `networkidle`) and a
lot of tests would need some adaption (can be done in another PR).

Added an entry to contributors as there was already a PR for that a
while ago: #15179

Closes #15623
Closes #15147

Author: s1gr1d

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