I would like to create error page which would show up on error. So far I have been able to use try two approaches
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).
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?
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.
Related
Does anyone know why I can't handle server error with try{}catch(){}?
There is a console error although I am trying to handle fetch errors within the fetch context and outside of it?
Please refer to the attached image to get a better understanding: Fetch request
I am using react with redux-saga but I think there is nothing related with redux.
I tried executing that same function in the component itself and it still happens.
I'm writing custom data provider. If I throw an error from data source method, e.g. delete('resource', options) I see error properly logged (react-admin uses showNotification for that internally) and immediately react death screen Unhandled Rejection (Error), and the question is how to stop react-admin throwing unhandled rejections ? Maybe there are some global error handler, because I must throw, because error goes to authentication provider's checkError method, and if I throw react-admin shows it's message properly, so seems like it's expected behavior for react admin.
What I need to do to fix this react death screen?
P.S. I'm returning promises from data sources and auth providers, react error boundaries doesn't handle async code
P.P.S. please do not suggest fix error which causes it, read article above, it should be thrown
I've been experimenting with components that do a react-cache style thing and do web service calls right in the render method, throwing a promise up to a React.Suspense component and re-rendering when the data is there. They call a web service, check the response, and either render or throw an error up to an error boundary depending on the response. I've noticed that whenever an error is thrown in a component, it renders twice. The first time the callstack looks normal, and the second time the callstack includes calls to invokeGuardedCallbackDev and invokeGuardedCallback, which seem to have something to do with React ensuring that errors appear in the console even when "caught" by an error boundary in a dev build.
I can reproduce this with react and react-dom 16.8.6 by just rendering a component like this: https://codesandbox.io/s/components-that-throw-render-twice-i26qc.
I'm wondering why this happens, because it's causing the components to re-fetch data from the web service, re-throw another promise, and results in an "Uncaught Promise" error appearing in the console.
This seems to be caused by a recent change in react/react-dom. If you revert both to version 16.0.0, you will see that it only renders the component once. See: https://codesandbox.io/s/components-that-throw-render-twice-03fdb
Looking at the version history, there seem to be a couple of bugs fixed relating to error handling in React, so it seems like this re-rendering is a result of a workaround for one of those bugs.
However, this should not be a problem for your app, as the render function should be pure (no side effects) in React apps. So basically, React can call your render function anytime it wants/needs to.
To work around this, you should avoid relying on the component not re-rendering and instead use an effect hook or similar to only fetch when certain props/state change.
Source: https://github.com/facebook/react/issues/16130#issuecomment-521637592
I think the error boundary is not actually catching the thrown error.
From https://reactjs.org/docs/error-boundaries.html:
Note
Error boundaries do not catch errors for:
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Asynchronous code includes Promises in this case.
See also https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers:
Error boundaries do not catch errors inside event handlers.
If you need to catch an error inside event handler, use the regular JavaScript try / catch statement.
I try to add a global error handler on my react app. That work perfecly but I have only one problem when I use saga and a fetch call. Below a simple example :
The error (in setModules) is swallowing (I think by the fetch promise) but I dont understand where and how to correct this behavior. Is this case, the error is never send to the error or unhandledrejection events and google devtool reports that error from the "getModules" function. I tried many changes (like using done instead of then and remove the catch) but no miracle.
You have a catch statement into another catch... Try putting the (error handling logic) try/catch statement in your getModules saga only et viola.
I highly recommend to manage error into the sagas only, not in your gateways functions, that way to avoid this issues.
I am currently building a React app which does a lot of server communication. If a server error occurs, I want to display the error to the user in a general way, e.g. an overlay with the error message.
Using container components
In my reducers, I return something like this:
{
type: "LIST_POSTS_ERROR",
loading: false,
error: {
msg: "An error occurred"
}
}
Obviously, my container components are redux aware. In the render() function, I could check, if the current state has a property error and if so, I would render the error message. Oddly, in every container component, I would have to check the current state and might have duplicated code in every container component.
A more general approach
What am I looking for is a more general approach. Something that knows about all the states and displays the error message automatically if the current state contains an error. Think of it like an interceptor for errors. Of course, this component would not belong to a route, so I am wondering if this is even possible?
How do you do error handling in your React app? I would love to know your approach!
In my app, I've a action called handleError which will trigger a toast component in my app.
You can dispatch this action at the time of error. Like, you can dispatch it in the .catch() of the Promise.
I am trying something similar for my App. So fire a dispatch on catch or >=400 response to set a string(your api response) in state and connect this value to your component.
Next, after maybe 4-5 seconds fire a dispatch to clear that value, so your message would go away. This you can implement in your login screens or your post API calls.
Hope it helps !!!