New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Next.js v14.2 links don't respond to clicks when Sentry is enabled #11796
Comments
Hi, I just took a look at this. Thanks for reporting in any case! So I can see that your deployed application is broken. When I click the first link, everything works fine. If I do a browser-back and then click on a link, it won't navigate anymore. However, I ran the reproduction locally with Did you configure anything differently in the test environment you linked? Is your Vercel instance configured in a special way? Do you have enough Vercel quota? In general, we don't really support canary builds of Next.js, or rather we don't have any guarantees for them as they are often very buggy. We have tests for Next.js canaries just so we catch any bugs that may make it into stable, but we don't recommend them to be used with the SDK. |
Hi, it's a completely weird thing. I mostly cannot reproduce it on I did not do anything special on Vercel. I just selected the repo and configured the three env vars that point to Sentry. I'm using a free Vercel account, and looking at my usage I'm not hitting any limits. The canary next.js build I used was purely because I initially thought it was a Next.js issue, so I used their reproduction template. But the problem is the same on the latest stable Next.js version. I can revert to that version if that makes sense for the reproduction. When you tested your own deployed app on Vercel, did you try multiple links on the page? Because what I'm seeing is that some links are actually clickable and they will send you to the right page. But at the same time others don't respond to clicks at all and will result in a page crash when you leave the app open for a little while. |
Hey @rvanlaarhoven , @lforst is currently on vacation until Thursday, he'll look some more into it when he's back (I'd love to help out but sadly my understanding of Next.js internals is limited, and I fear this is a rather tricky thing to debug 😬 ) One additional question maybe: Does this happen on every deploy, or just on some deploys? E.g. are there sometimes deploys were all links work? Or are there always broken links? |
No worries! I think it happens on every deploy. Or at least that's how I've been debugging this; reducing the code of my actual app down to the core issue by stripping things, deploying again, stripping some more, etc. And I've then moved the essentials I found over to the repro I shared above and it happened again. I've been doing quite a few deploys and it always kept on happening unless I either:
Some things I did notice;
I've also been monitoring the Next.js issues page for any similar problems. I haven't seen any with the same issue, but I do see there are more issues with linking (mostly focused on intercepting routes which is not the case in my repro) |
FWIW, I've also tried removing Sentry completely and just use the |
Just did some more tests.
As I mentioned earlier the prefetch does work and results in a 200 response quickly. But, on a click it triggers another fetch with a different Whenever I disable Sentry completely and/or remove the |
Honestly, this is very fishy and I struggle to understand what in the DefinePlugin may cause this (or rather how Would you mind upgrading to the v8 beta of the SDK (version The migration docs can be found here: https://docs.sentry.io/platforms/javascript/guides/nextjs/migration/v7-to-v8/ |
Nice, I'm not seeing any issues after migrating to v8 beta! Tested it both for the reproduction on localhost and Vercel, and tested on the actual app and seems to be fixed! |
@rvanlaarhoven Very odd but I am happy that v8 fixes this. I couldn't even think of any changes that could have influenced this 🤔 Closing the issue in the meanwhile. Feel free to hit us up here if the bug happens again! |
Is there an existing issue for this?
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/nextjs
SDK Version
7.112.2
Framework Version
Nextjs 14.2.3 & 14.3.0-canary.23
Link to Sentry event
No response
SDK Setup
No response
Steps to Reproduce
After upgrading Next.js from v14.1.3 to v14.2.3 (and v14.3.0-canary) I noticed that some links in my app didn't respond to clicks anymore and resulted in a full page crash several seconds after the clicks. In production, not in development.
After some digging I found that it only happens when
@sentry/nextjs
is enabled, and it only seems to happen on links to pages that use a server-sidefetch
to an external api (It was a Neon database in my case, but replaced it with a random free rest api in the reproduction below).It looks like it's caused by setting the
__SENTRY_DEBUG__
&__SENTRY_TRACING__
flags tofalse
in mynext.config.js
(as suggested here).I created a reproduction repo & test environment here:
Expected Result
Enabling Sentry should not have a negative effect when clicking links.
Actual Result
See "steps to reproduce" section.
The text was updated successfully, but these errors were encountered: