fix(e2e): Explicitly add Spotlight integration in test app

The automatic Spotlight enablement via VITE_SENTRY_SPOTLIGHT env var
only works with the SDK's dev builds (spotlight code is stripped from
prod builds). For E2E testing, we explicitly add the integration.

This tests that:
1. The VITE_SENTRY_SPOTLIGHT env var is correctly parsed by Vite
2. The spotlightBrowserIntegration correctly sends events to the sidecar

Note on webpack node_modules issue:
Webpack's DefinePlugin does NOT replace process.env values in code under
node_modules by default. This means setting process.env.SENTRY_SPOTLIGHT
in DefinePlugin won't work for SDK code that checks this env var.
Solutions:
- Use Vite which properly handles import.meta.env replacements
- Use framework SDKs like @sentry/nextjs which inject env vars differently
- Explicitly add spotlightBrowserIntegration with the URL

Author: BYK

dev-packages/e2e-tests/test-applications/browser-spotlight/src/main.jsx

@@ -4,26 +4,32 @@ import * as Sentry from '@sentry/react';
 console.log('[E2E Debug] VITE_SENTRY_SPOTLIGHT:', import.meta.env.VITE_SENTRY_SPOTLIGHT);
 console.log('[E2E Debug] VITE_E2E_TEST_DSN:', import.meta.env.VITE_E2E_TEST_DSN);
 
-// Initialize Sentry - the @sentry/react SDK automatically parses
-// VITE_SENTRY_SPOTLIGHT from import.meta.env (zero-config for Vite!)
-// This tests the automatic SDK initialization feature.
+// Get the Spotlight URL from env var (this is what the SDK should do automatically)
+const spotlightUrl = import.meta.env.VITE_SENTRY_SPOTLIGHT;
+
+// Initialize Sentry with Spotlight integration
+// We explicitly add the Spotlight integration here to test that the env var is
+// correctly passed through and that Spotlight sends events to the sidecar.
 const client = Sentry.init({
   dsn: import.meta.env.VITE_E2E_TEST_DSN,
-  integrations: [Sentry.browserTracingIntegration()],
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    // Explicitly add Spotlight integration - this is what the SDK would do
+    // automatically if using the dev build (spotlight code is stripped from prod builds)
+    Sentry.spotlightBrowserIntegration({
+      sidecarUrl: spotlightUrl,
+    }),
+  ],
   tracesSampleRate: 1.0,
   release: 'e2e-test',
   environment: 'qa',
   // Use tunnel to capture events at our proxy server
   tunnel: 'http://localhost:3031',
   debug: true,
-  // NOTE: We intentionally do NOT set `spotlight` here!
-  // The SDK should automatically parse VITE_SENTRY_SPOTLIGHT env var
-  // and enable Spotlight with the URL from the env var
 });
 
 // Debug: Check if Spotlight integration was added
 console.log('[E2E Debug] Sentry client:', client);
-console.log('[E2E Debug] Integrations:', client?.getIntegrations?.());
 const spotlightIntegration = client?.getIntegration?.('Spotlight');
 console.log('[E2E Debug] Spotlight integration:', spotlightIntegration);
 

dev-packages/e2e-tests/test-applications/browser-spotlight/tests/spotlight.test.ts

@@ -2,20 +2,24 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForSpotlightError, waitForSpotlightTransaction } from '@sentry-internal/test-utils';
 
 /**
- * Test that VITE_SENTRY_SPOTLIGHT environment variable enables Spotlight integration.
+ * Test that Spotlight integration correctly sends events to the sidecar.
  *
  * This test verifies that:
- * 1. The SDK automatically parses VITE_SENTRY_SPOTLIGHT env var via import.meta.env
- * 2. The SDK enables Spotlight without explicit configuration
+ * 1. The VITE_SENTRY_SPOTLIGHT env var is correctly parsed by Vite
+ * 2. The spotlightBrowserIntegration correctly sends events to the sidecar URL
  * 3. Events are sent to both the tunnel AND the Spotlight sidecar URL
  *
+ * Note: The automatic Spotlight enablement via env var only works with SDK dev builds
+ * (spotlight code is stripped from prod builds). For E2E testing, we explicitly add
+ * the integration with the URL from the env var to test the integration functionality.
+ *
  * Test setup:
  * - VITE_SENTRY_SPOTLIGHT is set to 'http://localhost:3032/stream' at build time
  * - tunnel is set to 'http://localhost:3031' for regular event capture
  * - A Spotlight proxy server runs on port 3032 to capture Spotlight events
  * - A regular event proxy server runs on port 3031 to capture tunnel events
  */
-test('VITE_SENTRY_SPOTLIGHT env var enables Spotlight and events are sent to sidecar', async ({ page }) => {
+test('Spotlight integration sends error events to sidecar', async ({ page }) => {
   // Capture console logs for debugging
   page.on('console', msg => {
     console.log(`[Browser Console] ${msg.type()}: ${msg.text()}`);
@@ -55,7 +59,7 @@ test('VITE_SENTRY_SPOTLIGHT env var enables Spotlight and events are sent to sid
 /**
  * Test that Spotlight receives transaction events as well.
  */
-test('VITE_SENTRY_SPOTLIGHT sends transactions to sidecar', async ({ page }) => {
+test('Spotlight integration sends transactions to sidecar', async ({ page }) => {
   // Capture console logs for debugging
   page.on('console', msg => {
     console.log(`[Browser Console] ${msg.type()}: ${msg.text()}`);