Sentry headers from browser fetch request change after being proxied through NextJS Server using middleware and rewrite.

[zeeshan-at-extra-year]

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.1.0

Framework Version

Next 14.2.4

Link to Sentry event

https://extrayear.sentry.io/traces/trace/e496329273177d9dc22c4caba543e428/?node=txn-892cf59a8ba7458fa0128d556bcf6853&pageEnd&pageStart&project=4508092950183936&query=trace%3Ae496329273177d9dc22c4caba543e428&source=traces&statsPeriod=2h&timestamp=1739840031.143

Reproduction Example/SDK Setup

sentry.client.config.ts

// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import { Environment } from '@newdays/platform-layer/common/environment';
import { MonitoringConfig } from '@newdays/platform-layer/common/monitoring-config';
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'https://aedf18cc6cd72059ecd18e07156d03eb@o4507609249611776.ingest.us.sentry.io/4508092950183936',

  // Add optional integrations for additional features
  integrations: [Sentry.replayIntegration(), Sentry.browserTracingIntegration()],

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ['localhost', /^https:\/\/app.*/],

  // Define how likely Replay events are sampled.
  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // Define how likely Replay events are sampled when an error occurs.
  replaysOnErrorSampleRate: 1.0,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  // The environment for emitting metrics
  environment: Environment.get(),

  // Whether to enable monitoring
  enabled: MonitoringConfig.isEnabled(),
});

sentry.edge.config.ts

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import { Environment } from '@newdays/platform-layer/common/environment';
import { MonitoringConfig } from '@newdays/platform-layer/common/monitoring-config';
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'https://aedf18cc6cd72059ecd18e07156d03eb@o4507609249611776.ingest.us.sentry.io/4508092950183936',

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  // The environment for emitting metrics
  environment: Environment.get(),

  // Whether to enable monitoring
  enabled: MonitoringConfig.isEnabled(),
});

sentry.server.config.ts

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import { Environment } from '@newdays/platform-layer/common/environment';
import { MonitoringConfig } from '@newdays/platform-layer/common/monitoring-config';
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'https://aedf18cc6cd72059ecd18e07156d03eb@o4507609249611776.ingest.us.sentry.io/4508092950183936',

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  // The environment for emitting metrics
  environment: Environment.get(),

  // Whether to enable monitoring
  enabled: MonitoringConfig.isEnabled(),
});

Steps to Reproduce

1. Setup backend with NestJS and enable sentry on nestjs.
2. Setup frontend with nextjs and enable sentry on nextjs. The frontend should be using nextjs rewrite to proxy the path to an external URL.
3. Make a browser fetch request to the path.
4. Examine fetch request headers in browser and ensure that the sentry headers match the meta tags embedded in the browser.
5. Examine headers on backend.

Expected Result

Sentry trace propagation expectations

When a fetch request is made with proper sentry headers, the trace should continue on the nextjs server and on the backend. While the trace does continue on the nextjs server, the sentry headers get overwritten with some other trace before being sent to the external URL.

Actual Result

Fetch request in browser

[zeeshan-at-extra-year]

Few things I have already verified:

• The sentry headers get attached by the browser from the meta tags.
• The sentry headers are present when the request is intercepted by middleware in the nextjs server.
• The headers change when they arrive on the external URL after rewrite.
• The sentry headers are preserved when the request is made directly from nextjs server (i.e no browser fetch is done.)

[Lms24]

Hi @zeeshan-at-extra-year thanks for writing in and for the detailed report! I've forwarded this in the team to people better versed in NextJS than me. We'll get back to you.

[chargome]

Hey @zeeshan-at-extra-year !
Just to better understand this: the headers from your browser fetch request never make it to the NestJS server (you could check out the received headers of a controller using @Headers)?

[zeeshan-at-extra-year]

the headers from your browser fetch request never make it to the NestJS server

Yes that is correct. The headers from the browser fetch request never make it to the NestJS server.

(you could check out the received headers of a controller using @headers)

I did try this out. I added a global middleware to log all request headers. The sentry-trace header is not the same as the browser fetch request header. The baggage seems to have the same public key as the baggage on the browser.

[chargome]

And your request flow is from Browser -> NextJS Backend -> NestJS Backend? Could you maybe provide a minimal repro for this?