@sentry/nextjs: captureException generates Event ID, but no Network Request visible & event not received by Sentry #15885
Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/nextjs
SDK Version
9.9.0
Framework Version
14.0.4
Link to Sentry event
No response
Reproduction Example/SDK Setup
import * as Sentry from '@sentry/nextjs';
console.log('Initializing Sentry Client Config for Next.js');
Sentry.init({
// Use the actual DSN for the project experiencing the issue
dsn: "(Note: Actual DSN redacted for public issue),
// Enable debug logging to see SDK internal messages
debug: true,
// Ensure performance monitoring is enabled if comparing with traces
tracesSampleRate: 1.0,
// Specify environment (optional but good practice)
environment: 'development',
// Optional: Specify release
// release: 'my-test-release@1.0.0',
// Other integrations like Replay might be active, but start minimal for repro
// integrations: [],
});
console.log('Sentry client config init completed.');
// File: src/app/sentry-test/page.js (or similar route in App Router)
'use client'; // Required for button interaction
import React from 'react';
import * as Sentry from '@sentry/nextjs';
export default function SentryTestPage() {
const triggerError = () => {
try {
// Create a unique error instance
const testError = new Error("Manual captureException Test Error - " + new Date().toISOString());
console.log("[Test Page] Reporting error to Sentry:", testError);
// Capture the exception using the SDK
const eventId = Sentry.captureException(testError);
console.log("[Test Page] Sentry.captureException called. Event ID:", eventId); // Critical log
// Attempt to flush events (also completes successfully in tests)
Sentry.flush(2000).then(() => {
console.log('[Test Page] Sentry.flush completed.'); // Critical log
}).catch(err => {
console.error('[Test Page] Sentry.flush failed:', err);
});
} catch (error) {
console.error("[Test Page] Failed to call Sentry.captureException:", error);
}
};
return (
<div style={{ padding: '20px' }}>
<h1>Sentry Test Page (Next.js App Router)</h1>
<button
onClick={triggerError}
style={{ padding: '10px', backgroundColor: 'red', color: 'white', border: 'none' }}
>
Trigger Test Error via captureException
</button>
<p style={{ marginTop: '1em' }}>Check browser console and network tab after clicking.</p>
</div>
);
}
Steps to Reproduce
- Set up a basic Next.js project using the App Router (e.g., npx create-next-app@latest).
- Install @sentry/nextjs: npm install @sentry/nextjs (or yarn/pnpm).
- Run the Sentry Wizard: npx @sentry/wizard@latest -i nextjs. Follow prompts to create config files.
- Ensure sentry.client.config.js includes debug: true and your correct DSN (similar to setup example above).
- Create a client component page route (e.g., src/app/sentry-test/page.js) containing a button that calls Sentry.captureException (similar to setup example above).
- Start the Next.js development server: npm run dev.
- Open the test page (e.g., http://localhost:3000/sentry-test) in a browser (tested on Windows 10/11 with Edge/Chrome).
- Open the browser's Developer Tools. Go to the Console tab and clear it. Go to the Network tab, clear it, ensure "Preserve log" is checked, and optionally filter for your Sentry ingest domain (e.g., ingest.us.sentry.io).
- Click the "Trigger Test Error" button.
- Observe the Console log for the Event ID and Flush completion messages.
- Observe the Network tab for outgoing requests to Sentry.
- Copy the Event ID from the console and search for it in the Sentry Issues UI for the corresponding project.
Expected Result
- A valid Sentry Event ID is logged in the browser console after clicking the button.
- The Sentry.flush() promise resolves and logs its completion message.
- An HTTP POST request to the Sentry ingest endpoint (.../envelope/...) appears in the browser's Network tab, ideally with a 200 OK status.
- The captured error event appears in the Sentry Issues UI shortly after and is searchable by the generated Event ID.
Actual Result
- A valid Sentry Event ID is correctly logged in the browser console after clicking the button.
- The Sentry.flush() promise resolves successfully and logs its completion message.
- NO HTTP request to the Sentry ingest endpoint appears in the browser's Network tab, even with filters disabled or specifically filtering for the ingest domain.
- The captured error event cannot be found in the Sentry Issues UI, even when searching directly by the exact Event ID logged in the console.
Additional Context / Key Findings from Troubleshooting:
-
Performance Monitoring Traces are successfully sent from the same application and appear correctly in the Sentry Traces UI.
-
Testing connectivity via curl from the command line on the same machine to the project's Sentry ingest endpoint succeeds (curl ... https://@/api//envelope/... returns 200 OK or 4xx).
-
System-level interference (browser extensions, hosts file, Windows Firewall, proxy settings) have been investigated and seem unlikely to be the cause.
-
A Barebones HTML Test using the Sentry CDN bundle (@sentry/browser) directly in an HTML file (loaded via file:///) works correctly: it generates an Event ID, the network request appears in DevTools with a 200 OK status, and the event appears in the Sentry Issues UI. This suggests the issue is specific to the @sentry/nextjs integration or its interaction within the Next.js environment.