Handling errors in reducer and async thunk

user_2758359 0
Viewed 110

I would like to create error page which would show up on error. So far I have been able to use try two approaches

  1. react-error-boundary but right now I have a problem, I have an async thunk which is using axios to download some data. The problem I have is that I would like to catch and exception from axios and show my general error page with some info. The problem I have is that react-error-boundary does not catch any exception inside my thunk (or slice).

  2. I was also thinking to error is some general reducer, the problem is that I cannot set one reducer state from another.

What is the proper way to handle this?

redux-thunk react-redux reactjs error-handling
1 Answers

Error boundaries are intended to keep an uncaught exception from crashing the page. You can think of them as a safety net for any unexpected errors that you forgot to handle. They're not really intended to be the default way you would choose to display an error to the user. If something goes wrong with your Axios network request you should catch it with a .catch() block. In your catch block you can execute logic to render an error message. If you have a specific error page you could redirect to it in the catch. You could also dispatch a Redux action to conditionally render an error message.

user_15002410
Related