CODEWITHSUNDEEP
javascriptreactjscreate-react-app
cheryllium
cheryllium

Reputation: 574

ReactJS error overlay - how do I know if error is actually caught or not

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:

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?

Upvotes: 0

Views: 686

Answers (1)

Vitalii
Vitalii

Reputation: 2131

Errors in React are caught by Error Boundaries.

According to docs they can't catch errors in:

  • Event handlers
  • Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
  • Server side rendering
  • Errors thrown in the error boundary itself (rather than its children)

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).

Upvotes: 1

Related Questions