Strapi backend apps negatively impacted by requests with baggage

[smeubank]

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 package are you using?

@sentry/browser

SDK Version

7.3.1

Framework Version

No response

Link to Sentry event

No response

Steps to Reproduce

https://twitter.com/Paratron/status/1542093313150537731

Expected Result

Backend receive requests with baggage without issue

Actual Result

At least in this case there appear to be some issue.

Let's ensure we understand what the issue exactly is, the cause, and if it possibly scales to any other platforms.

[AbhiPrasad]

I wonder why sentry-trace doesn’t cause issues, but baggage does.

It’s worthwhile that our solution here is to create an SDK for StrapiJS that configure this stuff out of the box.

[Paratron]

Hey, sentry-trace caused the same issue but I did only notice that a couple of minutes after the tweet :)

The reason is that Strapi is restrictive about which HTTP headers are allowed for CORS requests. I guess there wouldn't be any issue in production since I mapped the strapi API to example.com/api and the frontend runs on example.com/app but on local development, the strapi backend runs on localhost:1337 and the frontend on localhost:3000, therefore, CORS is needed.

[AbhiPrasad]

Yup totally. We do indicate this as part of our docs: https://docs.sentry.io/platforms/javascript/performance/instrumentation/automatic-instrumentation/#tracingorigins

You will need to configure your web server CORS to allow the sentry-trace and baggage headers. The configuration might look like "Access-Control-Allow-Headers: sentry-trace" and "Access-Control-Allow-Headers: baggage", but it depends on your set up. If you do not allow the two headers, the request might be blocked.

There’s perhaps a way we make this more clear to users though - thank you for the feedback @Paratron

[Paratron]

To be honest, I looked at the "how to implement" part, mostly copy and pasted the code and called it a day. It worked in the past without any problems (used Sentry on a few apps already) and for some reason it started NOW to cause problems.

My belly tells me the headers are required when the backend uses Sentry as well so a complete frontend/backend trace can be made. Maybe make this an opt-in feature, since not everybody might want to automatically use sentry everywhere.

Or maybe leave it on by default but make it obvious in the default copy/paste code:

Sentry.init({
    dsn: "thedsn",
    integrations: [new BrowserTracing({
            // This will add HTTP headers to API requests for serverside Sentry tracing.
            // Read more under: http://example.com/docs/crazy-cors-breaking-headers
            sendServersideTracingHeaders: true
        })],

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
});

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀