hmm

Author: BYK

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

@@ -7,22 +7,35 @@ import * as Sentry from '@sentry/nextjs';
 const NEXT_PUBLIC_SPOTLIGHT_VALUE = process.env.NEXT_PUBLIC_SENTRY_SPOTLIGHT;
 // Check internal values (these may or may not be replaced depending on bundler)
 const INTERNAL_SPOTLIGHT_PROCESS_ENV = process.env._sentrySpotlight;
-// @ts-expect-error - accessing globalThis for debugging
-const INTERNAL_SPOTLIGHT_GLOBAL = typeof globalThis !== 'undefined' ? globalThis._sentrySpotlight : 'globalThis undefined';
-// @ts-expect-error - accessing manual global set in instrumentation-client.ts
-const MANUAL_SPOTLIGHT_GLOBAL = typeof globalThis !== 'undefined' ? globalThis._sentrySpotlightManual : 'globalThis undefined';
-// @ts-expect-error - accessing SDK debug info
-const SDK_DEBUG_INFO = typeof globalThis !== 'undefined' ? globalThis._sentrySpotlightDebug : undefined;
-// @ts-expect-error - accessing init marker
-const INIT_CALLED = typeof globalThis !== 'undefined' ? globalThis._sentryNextjsInitCalled : undefined;
-// @ts-expect-error - accessing init timestamp
-const INIT_TIMESTAMP = typeof globalThis !== 'undefined' ? globalThis._sentryNextjsInitTimestamp : undefined;
 
 export default function SpotlightTestPage() {
   const [spotlightEnabled, setSpotlightEnabled] = useState<boolean | null>(null);
   const [integrationNames, setIntegrationNames] = useState<string[]>([]);
+  const [debugInfo, setDebugInfo] = useState<{
+    internalGlobal: string;
+    manualGlobal: string;
+    sdkDebug: unknown;
+    initCalled: unknown;
+  } | null>(null);
 
   useEffect(() => {
+    // Read globals at runtime (after init has run)
+    // @ts-expect-error - accessing globalThis for debugging
+    const internalGlobal = globalThis._sentrySpotlight;
+    // @ts-expect-error - accessing manual global
+    const manualGlobal = globalThis._sentrySpotlightManual;
+    // @ts-expect-error - accessing SDK debug info
+    const sdkDebug = globalThis._sentrySpotlightDebug;
+    // @ts-expect-error - accessing init marker
+    const initCalled = globalThis._sentryNextjsInitCalled;
+
+    setDebugInfo({
+      internalGlobal: String(internalGlobal ?? 'undefined'),
+      manualGlobal: String(manualGlobal ?? 'undefined'),
+      sdkDebug,
+      initCalled,
+    });
+
     // Check if Spotlight integration is registered
     const client = Sentry.getClient();
     const integration = client?.getIntegrationByName?.('SpotlightBrowser');
@@ -37,9 +50,10 @@ export default function SpotlightTestPage() {
     console.log('Spotlight test results:', {
       envValue: NEXT_PUBLIC_SPOTLIGHT_VALUE,
       internalProcessEnv: INTERNAL_SPOTLIGHT_PROCESS_ENV,
-      internalGlobal: INTERNAL_SPOTLIGHT_GLOBAL,
-      manualGlobal: MANUAL_SPOTLIGHT_GLOBAL,
-      sdkDebugInfo: SDK_DEBUG_INFO,
+      internalGlobal,
+      manualGlobal,
+      sdkDebugInfo: sdkDebug,
+      initCalled,
       integrationFound: !!integration,
       clientExists: !!client,
       integrationNames: intNames,
@@ -54,15 +68,14 @@ export default function SpotlightTestPage() {
         <h2>Environment Variable</h2>
         <p>NEXT_PUBLIC_SENTRY_SPOTLIGHT: {NEXT_PUBLIC_SPOTLIGHT_VALUE || 'undefined'}</p>
         <p>process.env._sentrySpotlight: {String(INTERNAL_SPOTLIGHT_PROCESS_ENV) || 'undefined'}</p>
-        <p>globalThis._sentrySpotlight: {String(INTERNAL_SPOTLIGHT_GLOBAL) || 'undefined'}</p>
-        <p>globalThis._sentrySpotlightManual: {String(MANUAL_SPOTLIGHT_GLOBAL) || 'undefined'}</p>
+        <p>globalThis._sentrySpotlight: {debugInfo?.internalGlobal || 'loading...'}</p>
+        <p>globalThis._sentrySpotlightManual: {debugInfo?.manualGlobal || 'loading...'}</p>
       </div>
 
       <div data-testid="sdk-debug">
         <h2>SDK Debug Info (what SDK saw during init)</h2>
-        <p>init() called: {String(INIT_CALLED)}</p>
-        <p>init() timestamp: {String(INIT_TIMESTAMP)}</p>
-        <pre>{SDK_DEBUG_INFO ? JSON.stringify(SDK_DEBUG_INFO, null, 2) : 'No debug info'}</pre>
+        <p>init() called: {String(debugInfo?.initCalled ?? 'loading...')}</p>
+        <pre>{debugInfo?.sdkDebug ? JSON.stringify(debugInfo.sdkDebug, null, 2) : 'No debug info'}</pre>
       </div>
 
       <div data-testid="spotlight-status">

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

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -7,6 +7,9 @@ test.describe('Spotlight auto-enablement in Next.js development mode', () => {
     // Wait for client-side hydration and Sentry initialization
     await page.waitForTimeout(2000);
 
+    // Wait a bit for useEffect to run and update state
+    await page.waitForTimeout(1000);
+
     // Check environment variable is accessible
     const envValue = await page.getByTestId('env-value').textContent();
     expect(envValue).toContain('true');

packages/nextjs/src/client/index.ts

@@ -52,10 +52,9 @@ declare const __SENTRY_TRACING__: boolean;
 
 /** Inits the Sentry NextJS SDK on the browser with the React SDK. */
 export function init(options: BrowserOptions): Client | undefined {
-  // Debug marker to verify this init() is being called
+  // Debug marker to verify this init() is being called (for e2e tests)
   if (typeof globalThis !== 'undefined') {
     (globalThis as Record<string, unknown>)._sentryNextjsInitCalled = true;
-    (globalThis as Record<string, unknown>)._sentryNextjsInitTimestamp = Date.now();
   }
 
   if (clientIsInitialized) {

packages/nextjs/src/config/webpack.ts

@@ -451,11 +451,16 @@ export function constructWebpackConfigFunction({
     // when NEXT_PUBLIC_SENTRY_SPOTLIGHT is set. We use DefinePlugin because Next.js
     // doesn't replace process.env.* in node_modules code.
     if (runtime === 'client' && spotlightConfig) {
+      // eslint-disable-next-line no-console
+      console.log('[@sentry/nextjs] Webpack DefinePlugin: Injecting process.env._sentrySpotlight =', JSON.stringify(spotlightConfig));
       newConfig.plugins.push(
         new buildContext.webpack.DefinePlugin({
           'process.env._sentrySpotlight': JSON.stringify(spotlightConfig),
         }),
       );
+    } else if (runtime === 'client') {
+      // eslint-disable-next-line no-console
+      console.log('[@sentry/nextjs] Webpack DefinePlugin: NOT injecting spotlight. runtime=', runtime, 'spotlightConfig=', spotlightConfig);
     }
 
     return newConfig;