What is the error handling strategy in a React app?

Question

JavaScript

Guys, welcome) The service is under development. In addition to the main application, there is a section with statistics where you can send a request for statistics using the calendar. For example, if you send an incorrect request, you need to show an error text on the popup page. If there are several errors, there should be several popups accordingly. There was a question how correctly to process application and to show errors?
The entire application must wrap a component that handles the errors of the entire application (fuse like). when we receive an empty response or an error in the request, we generate throw new error ? I'm not sure if this option will work in axios requests where promises are used.
Or the second option - just have a component (popup) to which we pass the status if an error occurs in axios requests?

In general, how to properly deal with errors in a React application (error handling in axios requests and error handling in the UI)? Are there similar examples or articles that can be read on this topic? Thanks in advance )

Answer 1

Well, place the container component for your notes somewhere. Create a certain store where you will store notes. You display them in components, and add them by any other means. There is nowhere easier, these are the basic things of React.

Answer 2

If I understand correctly, then you need to display messages to the user in case of errors. Then react-toastify will help out, they have very clear documentation, you essentially wrap the entire application with them and display them when an error occurs somewhere. If there are several errors, there will be several notifications.
Here's something like this:

if (res.data.success) {
notifySuccess(res.data.messages)
}
if (!res.data.success) {
Object.values(res.data.errors).map((error) =>
notifyError({error })
)
}