You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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" :)
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.
The text was updated successfully, but these errors were encountered: