Next.js Standalone Server crashes when you navigate away from a page that hasn't finished await call
Unanswered
decorum posted this in #help-forum
decorumOP
Hey folks, weird problem my team and I are noticing. We've been building a Next.js app for a while now, using the App Router (v14.2.3), and everything has been smooth sailing - in Dev Mode...
We have End-To-End (E2E) Tests set up with Playwright, but they've been failing pretty consistently for a while now. I finally got some time to investigate it over the last couple of weeks and had seen some non-idiomatic Next.js stuff going on with respect to rendering pages and such. Namely, using a
Normally, this wouldn't be a problem. However, we're rendering clickable Links in these two different calls that are kicked off in parallel. One always returns very quickly, and we wanted it to be that way so that users could always navigate away quickly if they needed to. But, because the other (slower) call hadn't resolved yet, clicking on the Link that's there very quickly, the whole page crashes - forcing users to refresh the page.
But E2E tests don't reliably refresh the page when they encounter a failure (and I'd argue, they shouldn't).
So my question is: has anyone else faced these kinds of nuanced crashes throughout their app?
FWIW, the typical error message we get is along the lines of:
Or some variation therein.
We have End-To-End (E2E) Tests set up with Playwright, but they've been failing pretty consistently for a while now. I finally got some time to investigate it over the last couple of weeks and had seen some non-idiomatic Next.js stuff going on with respect to rendering pages and such. Namely, using a
useEffect in a client component to fetch data for a page in a Server Action.Normally, this wouldn't be a problem. However, we're rendering clickable Links in these two different calls that are kicked off in parallel. One always returns very quickly, and we wanted it to be that way so that users could always navigate away quickly if they needed to. But, because the other (slower) call hadn't resolved yet, clicking on the Link that's there very quickly, the whole page crashes - forcing users to refresh the page.
But E2E tests don't reliably refresh the page when they encounter a failure (and I'd argue, they shouldn't).
So my question is: has anyone else faced these kinds of nuanced crashes throughout their app?
FWIW, the typical error message we get is along the lines of:
TypeError: Cannot read properties of undefined (reading 'filter')Or some variation therein.
8 Replies
decorumOP
I fully intend to rewrite a lot of this to be more idiomatic Next.js, but I was curious if this was "expected" behavior when a page hasn't finished loading things
@decorum I fully intend to rewrite a lot of this to be more idiomatic Next.js, but I was curious if this was "expected" behavior when a page hasn't finished loading things
I wouldnt say expected no... Ive never seen that. If you can setup some kind of sample id be happy to look into it and help, I reckon having a route handler with a long wait in it and navigate away while thats going off should trigger it based on your tests?
decorumOP
Yeah, that's exactly right. I'll try to recreate a sample tomorrow, but this code must have gotten away from me while I was working on other things because now the navigation and routing is all gnarly - half client side, half server side... Definitely smelly code...
Yeah, even with things mangled I couldnt think of what could be causing it, based on the description. Will be interested to see what comes up.
decorumOP
I tried re-creating this in an example, and I spent so much time on it but still couldn't recreate the problem... I'd share the company code if I could, but I'm sure that'd violate all kinds of NDA and employee handbook rules 🤣
I appreciate you getting back to me @Jboncz , but I'm gonna close this issue out for now since I can't recreate it
I'll update here though if my team and I fix it - that's gonna be the focus for this week, so I'll keep y'all posted
No worries sounds good!