Multiple trace IDs generated in sentry-trace header when using Next.js

[hiroshinishio]

Is there an existing issue for this?

• [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [x] I have reviewed the documentation https://docs.sentry.io/
• [x] 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

8.33.1

Framework Version

Next 14.2.14

Link to Sentry event

https://paprikavpn.sentry.io/performance/trace/0b7da23d63cc4a7d9436abf37ace0e0c

Reproduction Example/SDK Setup

Dependencies

{
  "dependencies": {
    "@next/third-parties": "^14.2.14",
    "@nextui-org/react": "2.4.2",
    "@nextui-org/use-infinite-scroll": "^2.1.5",
    "@nimpl/middleware-chain": "^0.4.0",
    "@sentry/nextjs": "^8.33.1",
    "caniuse-lite": "^1.0.30001667",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.13",
    "framer-motion": "^11.11.0",
    "intl-locale-textinfo-polyfill": "^2.1.1",
    "negotiator": "^0.6.3",
    "next": "^14.2.14",
    "next-mdx-remote": "^5.0.0",
    "next-seo": "^6.6.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "sharp": "^0.33.5",
    "swr": "^2.2.5",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^14.2.14",
    "@svgr/webpack": "^8.1.0",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/node": "^22.7.4",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.0",
    "@types/uuid": "^10.0.0",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "cssnano-preset-advanced": "^7.0.6",
    "eslint": "^8.57.1",
    "eslint-config-next": "^14.2.14",
    "postcss": "^8.4.47",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.8",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.6.2"
  }
}

sentry.client.config.ts

import * as Sentry from '@sentry/nextjs';

import { API_BASE_URL, APP_BASE_URL, ENVIRONMENT, RELEASE, SENTRY_DSN, SENTRY_TRACES_SAMPLE_RATE } from '@/config';

Sentry.init({
  dsn: SENTRY_DSN,
  release: RELEASE,
  environment: ENVIRONMENT,
  tracesSampleRate: SENTRY_TRACES_SAMPLE_RATE,
  tracePropagationTargets: [APP_BASE_URL, API_BASE_URL],
  integrations: [Sentry.browserTracingIntegration()],
});

instrumentation.ts

import * as Sentry from '@sentry/nextjs';

import { API_BASE_URL, ENVIRONMENT, RELEASE, SENTRY_DSN, SENTRY_TRACES_SAMPLE_RATE } from '@/config';

export async function register() {
  Sentry.init({
    dsn: SENTRY_DSN,
    release: RELEASE,
    environment: ENVIRONMENT,
    tracesSampleRate: SENTRY_TRACES_SAMPLE_RATE,
    tracePropagationTargets: [API_BASE_URL],
  });
}

export const onRequestError = Sentry.captureRequestError;

Steps to Reproduce

1. Enable tracePropagationTargets and configure it to point to your backend server.
2. Make HTTP requests using fetch inside middleware or during SSG generation in a Next.js project.
3. When performing an HTTP request, Sentry will add the Baggage and Sentry-Trace headers to the outgoing requests.
4. These headers will be received by the backend (using sentry-go).
5. The Sentry-Trace header will contain two trace IDs, for example: 0b7da23d63cc4a7d9436abf37ace0e0c-9510fafae5f1c2c5-1,faca5d26f53d660657d9e4b073fb8da2-74dbb120f6aca02a-1
6. Due to the presence of two trace IDs, the backend cannot correctly parse the Parent Span ID, leading to incorrect transaction linking.

Expected Result

The Sentry-Trace header should contain only a single trace ID.

Actual Result

The Sentry-Trace header contains multiple trace IDs.

[gitauto-ai[bot]]

Click the checkbox below to generate a PR!

• [ ] Generate PR

@hiroshinishio, You have 5 requests left in this cycle which refreshes on 2024-11-04 02:56:25+00:00. If you have any questions or concerns, please contact us at info@gitauto.ai.

[gitauto-ai[bot]]

Sorry, we have an error. Please try again.

Have feedback or need help? Feel free to email info@gitauto.ai.