I have some baffling behavior in my development environment for a ReactJS application which makes some API calls with fetch() and is bootstrapped with create-react-app
When handling the API call, I throw an error which is caught in a middleware elsewhere that wraps around every API call.
I have put console.log() in the catch() block in this middleware and confirmed it is catching all of these errors. Plus, it displays the error message correctly to the end user, and does not crash the application.
But the weird thing:
throw, the ReactJS error overlay pops up and shows it to me.json() call (that is, the API call didn't return valid JSON), this is again caught by the same middleware and the error message is displayed the same way in the UI, but the ReactJS error overlay does NOT show up.I even tried throwing SyntaxError explicitly to see what would happen, but in that case the error overlay does show up.
My question is, basically: is this anything to worry about? The error overlay is only functional on the development environment after all, and I'm not sure if it actually indicates that these errors will cause crashes/problems in production. I am not sure what the rules are for when it shows up or not. Is it expected that the overlay won't show up for an uncaught Json.parse() error, but will show up for everything else? When the error overlay shows up, is it anything to worry about if I can just close it and the app itself is still working correctly?
Errors in React are caught by Error Boundaries.
According to docs they can't catch errors in:
fetch() is an asynchronous code and React can't catch those errors. You should have try/catch block for async code or .catch() handler for promises to handle errors yourself (for example update React state to indicate that an error has happened and show the error message).