debugging

Author: BYK

dev-packages/e2e-tests/test-applications/nextjs-15-spotlight/app/page.tsx

@@ -5,21 +5,31 @@ import * as Sentry from '@sentry/nextjs';
 
 // Next.js replaces process.env.NEXT_PUBLIC_* at BUILD TIME with literal values
 const NEXT_PUBLIC_SPOTLIGHT_VALUE = process.env.NEXT_PUBLIC_SENTRY_SPOTLIGHT;
+// Also check the internal _sentrySpotlight that withSentryConfig injects
+const INTERNAL_SPOTLIGHT_VALUE = process.env._sentrySpotlight;
 
 export default function SpotlightTestPage() {
   const [spotlightEnabled, setSpotlightEnabled] = useState<boolean | null>(null);
+  const [integrationNames, setIntegrationNames] = useState<string[]>([]);
 
   useEffect(() => {
     // Check if Spotlight integration is registered
     const client = Sentry.getClient();
     const integration = client?.getIntegrationByName?.('SpotlightBrowser');
     setSpotlightEnabled(!!integration);
 
+    // Get all integration names for debugging
+    // @ts-expect-error accessing internal property for debugging
+    const intNames = client?._integrations ? Object.keys(client._integrations) : [];
+    setIntegrationNames(intNames);
+
     // Log for debugging
     console.log('Spotlight test results:', {
       envValue: NEXT_PUBLIC_SPOTLIGHT_VALUE,
+      internalEnvValue: INTERNAL_SPOTLIGHT_VALUE,
       integrationFound: !!integration,
       clientExists: !!client,
+      integrationNames: intNames,
     });
   }, []);
 
@@ -30,13 +40,17 @@ export default function SpotlightTestPage() {
       <div data-testid="env-value">
         <h2>Environment Variable</h2>
         <p>NEXT_PUBLIC_SENTRY_SPOTLIGHT: {NEXT_PUBLIC_SPOTLIGHT_VALUE || 'undefined'}</p>
+        <p>_sentrySpotlight (internal): {INTERNAL_SPOTLIGHT_VALUE || 'undefined'}</p>
       </div>
 
       <div data-testid="spotlight-status">
         <h2>Spotlight Integration Status</h2>
         <p data-testid="spotlight-enabled">
           {spotlightEnabled === null ? 'Loading...' : spotlightEnabled ? 'ENABLED' : 'DISABLED'}
         </p>
+        <p data-testid="integration-names">
+          Integrations: {integrationNames.join(', ') || 'none'}
+        </p>
       </div>
     </div>
   );

dev-packages/e2e-tests/test-applications/nextjs-15-spotlight/tests/spotlight.test.ts

@@ -11,9 +11,14 @@ test.describe('Spotlight auto-enablement in Next.js development mode', () => {
     const envValue = await page.getByTestId('env-value').textContent();
     expect(envValue).toContain('true');
 
+    // Get diagnostic info before asserting
+    const integrationNames = await page.getByTestId('integration-names').textContent();
+
     // Check Spotlight integration is enabled
     const spotlightStatus = await page.getByTestId('spotlight-enabled').textContent();
-    expect(spotlightStatus).toBe('ENABLED');
+    expect(spotlightStatus, `Spotlight should be ENABLED. Env value: ${envValue}. Integrations: ${integrationNames}`).toBe(
+      'ENABLED',
+    );
   });
 
   test('no console errors during initialization', async ({ page }) => {

packages/nextjs/src/client/index.ts

@@ -143,19 +143,27 @@ function getDefaultIntegrations(options: BrowserOptions): Integration[] {
   );
 
   // Auto-enable Spotlight from NEXT_PUBLIC_SENTRY_SPOTLIGHT env var
-  // We read NEXT_PUBLIC_SENTRY_SPOTLIGHT directly because Next.js guarantees that
-  // NEXT_PUBLIC_* variables are exposed to the browser via webpack DefinePlugin replacement.
-  // Using a custom _sentrySpotlight variable doesn't work reliably because Next.js doesn't
-  // always replace arbitrary env vars in node_modules code.
-  const spotlightEnvValue = process.env.NEXT_PUBLIC_SENTRY_SPOTLIGHT;
+  // The value is injected at build time via buildTimeVariables in withSentryConfig
+  // following the same pattern as _sentryRelease
+  const spotlightEnvValue = process.env._sentrySpotlight;
+  // eslint-disable-next-line no-console
+  console.log('[Sentry Next.js] Spotlight debug:', {
+    spotlightEnvValue,
+    optionsSpotlight: options.spotlight,
+    typeofSpotlightEnvValue: typeof spotlightEnvValue,
+  });
   if (spotlightEnvValue !== undefined && options.spotlight === undefined) {
     const boolValue = envToBool(spotlightEnvValue, { strict: true });
     const spotlightConfig = boolValue !== null ? boolValue : spotlightEnvValue;
     const spotlightValue = resolveSpotlightOptions(undefined, spotlightConfig);
+    // eslint-disable-next-line no-console
+    console.log('[Sentry Next.js] Spotlight resolved:', { boolValue, spotlightConfig, spotlightValue });
 
     if (spotlightValue) {
       const spotlightArgs = typeof spotlightValue === 'string' ? { sidecarUrl: spotlightValue } : undefined;
       customDefaultIntegrations.push(spotlightBrowserIntegration(spotlightArgs));
+      // eslint-disable-next-line no-console
+      console.log('[Sentry Next.js] Spotlight integration added');
     }
   }
 

packages/nextjs/src/config/withSentryConfig.ts

@@ -610,9 +610,12 @@ function setUpBuildTimeVariables(
     buildTimeVariables._sentryRelease = releaseName;
   }
 
-  // Note: NEXT_PUBLIC_SENTRY_SPOTLIGHT is read directly in the client code because
-  // Next.js guarantees that NEXT_PUBLIC_* variables are exposed to the browser.
-  // No need to inject it as a build-time variable here.
+  // Inject Spotlight config from NEXT_PUBLIC_SENTRY_SPOTLIGHT env var
+  // We check both userNextConfig.env (from next.config.js) and process.env (from .env files or shell)
+  const spotlightValue = userNextConfig.env?.NEXT_PUBLIC_SENTRY_SPOTLIGHT ?? process.env.NEXT_PUBLIC_SENTRY_SPOTLIGHT;
+  if (spotlightValue) {
+    buildTimeVariables._sentrySpotlight = spotlightValue;
+  }
 
   if (typeof userNextConfig.env === 'object') {
     userNextConfig.env = { ...buildTimeVariables, ...userNextConfig.env };