[nextjs] Preact renders 5x when error is thrown in render and cancels rendering route

[wilsonpage]

Describe the bug
This is a bug related to Preact with Next.JS. If there's a better place to post this please let me know :) When an exception is throw in the render phase of a clientside rendered page the Next.JS pages/_error fails to render.

To Reproduce

• Repro: https://nextjs-preact-demo-wilsonpage.vercel.app/
• Source: https://github.com/wilsonpage/next-preact-error-handling-bug

Steps to reproduce the behavior:

1. Visit /
2. Click link to render /failing
3. Observe fails to JS console showing 5x render and exceptions

Expected behavior

• Should only invoke pages/failing render once
• Should then render pages/_error

[developit]

It looks like Next.js is repeatedly re-rendering the route (there are 5 calls to preact.render()), but I think this may be caused by Preact bubbling thrown errors past components with a componentDidCatch() method if that method doesn't set state (which theirs does not):

preact/src/diff/catch-error.js

Line 24 in 7e33abd

handled = component._dirty;

Normally, componentDidCatch() needs to invoke setState/forceUpdate in order to mark the component as dirty and "claim" the error - Next seems to just be triggering a full re-render after a Promise tick.

I'd be down to remove this personally, though it's unfortunate to drop conditional error bubbling (kinda a useful feature) to get compat :/

[developit]

Can confirm - my PR fixes this, we'll just need to figure out whether the change is something Preact can land without breaking stuff (since it affects how Suspense works). You can try it locally:

yarn add https://pkg.csb.dev/preactjs/preact/commit/90a1d849/preact

[wilsonpage]

@developit any tips on what I should do here long-term? Is a fix in the works?

[grefrit]

Hello. Any updates on this? This problem still remains with Next 12.1.6, Preact 10.7.2

[JLucasCAmorim]

Hello guys, any updates? I'm facing the same issue.