prevent client-side error from taking over page using react-error-boundary

[Songkeys]

We can use https://github.com/bvaughn/react-error-boundary to prevent the dreaded Next.js client error from taking over the entire page, as seen in the image below.

This way, we can keep errors contained to the component, instead of letting them spread to the whole tree.

[Innei]

To change each component, it is almost impossible to wrap ErrorBoundary for it and it is difficult to maintain, which also reduces DX.

Two ways:

• HACK react.createElement: The ability to inject ErrorBoundary. Whether there is a performance problem.
• Change the page layout. If use a DSL to describe the page, we can wrap ErrorBoundary in the component of the DSL render.

[Innei]

React is not like Vue, Vue has a ErrorBoundary for every component default, but React should manually wrap ErrorBoundary, and components look up for the nearest one ErrorBoundary if throw an error. If only mount ErrorBoundary in root, no different than now.

[Songkeys]

It is not necessary to wrap each component or hack the API; instead, it is sufficient to wrap sections of the UI to segment them into individual parts on the webpage.

Additionally, there should likely be a separate issue to discuss: imo the error stack should be printed on the webpage, as this allows us to identify the error without having to ask the user to open the console, and so on. Next.js custom error page may be sufficient.

Overall, it is to deliver a better UX when error occurs. I should've been more clear - the purpose is not to "use X", but to "use X to solve a problem". If there is a Y better than X, we can surely go for it. This issue's title should go like "Better UX for Error Situation" :)

[Innei]

Got it, I will try to working on.