@sentry/nextjs: captureException generates Event ID, but no Network Request visible & event not received by Sentry

[yoooyo24]

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

1. Set up a basic Next.js project using the App Router (e.g., npx create-next-app@latest).
2. Install @sentry/nextjs: npm install @sentry/nextjs (or yarn/pnpm).
3. Run the Sentry Wizard: npx @sentry/wizard@latest -i nextjs. Follow prompts to create config files.
4. Ensure sentry.client.config.js includes debug: true and your correct DSN (similar to setup example above).
5. 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).
6. Start the Next.js development server: npm run dev.
7. Open the test page (e.g., http://localhost:3000/sentry-test) in a browser (tested on Windows 10/11 with Edge/Chrome).
8. 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).
9. Click the "Trigger Test Error" button.
10. Observe the Console log for the Event ID and Flush completion messages.
11. Observe the Network tab for outgoing requests to Sentry.
12. Copy the Event ID from the console and search for it in the Sentry Issues UI for the corresponding project.

Expected Result

1. A valid Sentry Event ID is logged in the browser console after clicking the button.
2. The Sentry.flush() promise resolves and logs its completion message.
3. An HTTP POST request to the Sentry ingest endpoint (.../envelope/...) appears in the browser's Network tab, ideally with a 200 OK status.
4. The captured error event appears in the Sentry Issues UI shortly after and is searchable by the generated Event ID.

Actual Result

1. A valid Sentry Event ID is correctly logged in the browser console after clicking the button.
2. The Sentry.flush() promise resolves successfully and logs its completion message.
3. 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.
4. 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.

[lforst]

Hi, thanks for writing in. Have you seen the troubleshooting page in the docs yet? https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data It has a section on what might be contributing to the SDK not sending data.

[yoooyo24]

Hi @lforst, thanks for the pointer! Yes, I reviewed that section and confirmed the following based on our previous troubleshooting (detailed in the main issue description): *DSN Configuration:* Confirmed DSN is correct and loaded, as **performance traces** *are* being successfully sent from this same Next.js application and appear in the Sentry Traces UI. *Environment Variables: *Confirmed variables (if used, or hardcoded DSN during testing) are correctly accessible client-side, again evidenced by Traces working. *Ad-blockers:* Ruled out. Tested with extensions disabled, in Incognito mode, and in a different browser. Furthermore, a **barebones HTML test** using ***@***.***/browser` via CDN worked perfectly in the same browser environment (details below and in the issue). *(`debug: true`:)*This was enabled. The console logs clearly show ` *Sentry.captureException*` being called, a valid Event ID being generated, and `Sentry.flush()` completing successfully. However, no transport-related errors or logs indicating the event was added to the send queue appear for the failed event in the Next.js app context. *Stats/Quota:*Checked Usage History. No obvious quota limitations were hit that would block only these client-side errors while allowing traces. (Trial plan with infinite reserved errors). *(`sideEffects: false`)* in `*package.json*`: Checked `package.json`, and the `"sideEffects"` key is *not present*. *Despite these checks, the core issue persists specifically for client-side errors in the Next.js app:* 1. `Sentry.captureException` generates a valid Event ID in the browser console. 2. No network request to the Sentry ingest endpoint appears in the browser's Network tab. 3. The event cannot be found in Sentry Issues when searching by the generated Event ID. *Crucially:* - Performance (Traces) from the same Next.js app *do* reach Sentry. - A (Barebones HTML test) (using ***@***.***/browser` CDN script directly in `sentry_test.html` loaded via `file:///`) works perfectly: Event ID generated, network request visible with 200 status, and the event appears in Sentry Issues. This strongly suggests the problem is isolated to how ***@***.***/nextjs` handles client-side `captureException` transport within the Next.js App Router environment, as fundamental connectivity and SDK functionality seem okay otherwise. Happy to provide any further information or run additional tests.

…

On Fri, Mar 28, 2025 at 3:19 AM Luca Forstner ***@***.***> wrote: Hi, thanks for writing in. Have you seen the troubleshooting page in the docs yet? https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data It has a section on what might be contributing to the SDK not sending data. — Reply to this email directly, view it on GitHub <#15885 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BO3DBLMJU2K6NFMZJAAIVSD2WTSYJAVCNFSM6AAAAABZ6F2H3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONRQGQYTSNZVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: lforst]*lforst* left a comment (getsentry/sentry-javascript#15885) <#15885 (comment)> Hi, thanks for writing in. Have you seen the troubleshooting page in the docs yet? https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data It has a section on what might be contributing to the SDK not sending data. — Reply to this email directly, view it on GitHub <#15885 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BO3DBLMJU2K6NFMZJAAIVSD2WTSYJAVCNFSM6AAAAABZ6F2H3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONRQGQYTSNZVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lforst]

Can you check the stats page in sentry?