Next.js CDN (App-router) withSentryConfig in Dev mode broke client side routing

[thasuohm]

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

7.61.0

Framework Version

Next 13.4.10

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

1. set up HOST (my setting is 127.0.0.1 cdn.localhost)

2. config next.config.js

async headers() {
    return [
      {
        source: '/_next/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*',
          },
        ],
      },
    ]
  },
assetPrefix: 'http://cdn.localhost:3000',
crossOrigin: 'anonymous',

module.exports = withSentryConfig(nextConfig)

3. run dev mode pnpm dev
4. client-side route to some page

Expected Result

no CORS error happen and the route correctly without a full reload

Actual Result

1. I am in route /a
2. I click Link tag to go to /b
3. It got an error CORS and the current page has a full reload and i am still in /a
4. click Link tag to go to /b
5. error disappears and go to /b correctly

this happens only when I set assetPrefix + withSentryConfig and run in dev mode

[lforst]

Hi, can you share details about the preflight response? Thanks!

Even better would be a small reproduction example (stackblitz, github repo, or similar) we could use to reproduce htis ourselves. Thanks!

[thasuohm]

Hi, can you share details about the preflight response? Thanks!

Even better would be a small reproduction example (stackblitz, github repo, or similar) we could use to reproduce htis ourselves. Thanks!

here is my GitHub repo to reproduce
https://github.com/thasuohm/sentry-test

it looks like it happens when I put
tracesSampleRate: 1,
inside
sentry.client.config.ts

[lforst]

I can reproduce, unfortunately, I don't know why exactly it happens and how to fix it.

Seems like the preflight request fails, because webpack's hmr endpoint doesn't excpect OPTIONS. I have a suspicion that this is not an issue with the Sentry SDK itself but rather a bug in webpack/Next.js that surfaces when the SDK is used - but not 100% sure.

[LemonDouble]

I know it sounds weird, but if you're using Chrome, could you try installing React Devloper Tools Chrome Extension?
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

I had a similar issue, I installed the extension and Hot Reload worked fine.
I realize this isn't a fundamental solution, but it seems like a simple thing to try.