Still render the page if the components code has error - React/Nextjs

user_19293229 0
Viewed 44

I haven't got much experience in React, would really appreciate any advice. My situation is that:

  • I have a dynamic page let say the url is mysite/[productid]
  • The page is the combination of component A, B and C
  • There is an error happened in component B and React render 404 page which I don't want to.

My question is: Is there any way in React/Nextjs to still render the page (the page still displays without the error component) if one the components scratch, and log the error using Sentry? As I know there is a way to do that with Emberjs.

I do not want to render another error page with error boundary as it does not make sense to take down whole page with only one error component.

Thank you in advance.

reactjs javascript
1 Answers

There are two solutions to handling errors in a React application:

If a component can recover from an error internally, then the expressions which may throw that error should be wrapped in a try/catch block. Otherwise, you can use React Error Boundaries to manage any errors in child components.

user_112141080
Related