Tracing headers are not sent to server when distributed tracing is enabled

[BerkOzdilek]

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/remix

SDK Version

7.63.0

Framework Version

@remix-run: 1.19.3

Link to Sentry event

https://passionfroot.sentry.io/performance/summary/?project=4504292779163648&query=&referrer=performance-transaction-summary&statsPeriod=14d&transaction=routes%2F__landing-page%2F%24creatorSlug&unselectedSeries=p100%28%29&unselectedSeries=avg%28%29

SDK Setup

// entry.client.ts
Sentry.init({
  dsn: "SENTRY_DSN",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.remixRouterInstrumentation(
        useEffect,
        useLocation,
        useMatches
      ),
    }),
  ],
  release: "b53002ff109fb8194bf6cd029aa8fbf786db71d2",
  tracesSampleRate: 1,
  environment: "development",
  beforeSend(event) {
    if (event.user) {
      delete event.user.email;
      delete event.user.name;
    }
    return event;
  },
});

// entry.server.ts
Sentry.init({
  dsn: "SENTRY_DSN",
  debug: process.env.SENTRY_DEBUG === "true",
  release: "b53002ff109fb8194bf6cd029aa8fbf786db71d2",
  serverName: "http://localhost:3000",
  environment: "development",
  tracesSampleRate: 1,
  integrations: [new Sentry.Integrations.Prisma({ client: db })],
});

Steps to Reproduce

I created a repository for you to reproduce the issue, its basically a remix project created with blues stack and added sentry integration as described in your guide. We have a slightly different setup in our own project but I believe this example repo represents the problem enough.
The issue is on the client side, sentry-trace and baggage headers are not added as expected to the outgoing requests to server.

1. Go to https://github.com/BerkOzdilek/sentry-remix-distributed-tracing-issue and checkout the project
2. Run npm install
3. Run docker-compose up, will create a postgres db on 5432. (if you want to use your own db then edit .env file with correct credentials)
4. Run npm run build
5. Run npm run dev
6. Go to http://localhost:3000 and inspect the network traffic
7. Click "Signup" and observe the outgoing requests headers

Expected Result

For the outgoing requests to server from client should contain the sentry-trace and baggage headers

Actual Result

If you look to our performance dashboard you'll see that FE and BE traces are not linked to each other. Once I debugged I saw that the sentry-trace and baggage headers are not sent to server request so that backend can not know the tracing decision and the parent trace id.

[lforst]

Hi, is it possible that when hitting the login button, there is no active transaction on the scope?

Tracing headers are only attached when there is an active transaction. Out of the box, transactions are only created during page loads and page navigations.

Could this be the issue here?

(Please not that I didn't try your repro yet - just wanted to get this Q out of the way first)

[BerkOzdilek]

@lforst thanks for fast reply. Just realised I haven't set the SENTRY_DSN and try it out for this repository, now once I did it I can see the tracing headers. Updating to latests version must have fixed the issue. Im closing this one

[BerkOzdilek]

@lforst is there a way to configure when to send tracing headers? As you said; I think it was the initial reason why we thought headers are not sent, we would like to set them on top of page loads and page navigations

[AbhiPrasad]

Hey @BerkOzdilek, you can use the tracePropagationTargets option to decide what requests to attach to headers.

https://docs.sentry.io/platforms/javascript/guides/remix/usage/distributed-tracing/#how-to-use-distributed-tracing

When there is no active transaction though, the trace is not sampled, so there will be no distributed trace via performance transactions in Sentry. With the current version of the SDK though, the header is still sent (sampled flag set to false), so errors will still be linked together.