React Native / Expo redbox problem

[kelleyvanevert]

Hey!

So now I'm working on a managed Expo React Native project, and it turns out that every console.error causes a "redbox" to appear. I guess this is good, if console.error call needs proper attention. But React-Query uses console.erroralso for regular failures inide the mutation fn. (And probably query fn too.) This causes my expected mutation errors to show redboxes, which should not happen.

It actually took me quite long to figure out what was going on. I wondered whether I was writing my promise correctly, whether I wasn't accidentally missing unhandled rejection, etc. I also found this lovely solution:

console.reportErrorsAsExceptions = true;

...before finally arriving at the conclusion that it was intented quirck of the React-Query library, with a weird development feeling as a result, and then solved it with a (in my mind suboptimal / unnecessary) use of setConsole.

setConsole({
  log: console.log,
  warn: console.log,
  error: console.log
});

As a result of this little debugging experience, I wonder if it's smart to console.error errors that are intended and caught and dealt with properly? I can only imagine that this is going to cause a lot of confusion out there for people developing (Expo) RN apps, especially if they're beginners.

[tannerlinsley]

One of the main reasons that the errors are caught and displayed by React Query is because most of the time, these errors are ocurring outside of an async flow or near the render function. If they are not caught and displayed, then there is a good chance that they will be swallowed up or displayed as uncaughtPromiseRejection notices. While I agree that it's a suboptimal experience out of the box, it's the best we can do until we can reliably ship the library with ReactNative specific defaults, something I am not familiar with doing right now. In a perfect world, React Query would detect that it is running in a RN environment and default the logger appropriately so as to not set off the overly-aggressive redbox notice. If you have any ideas on how to do that, or even on how to improve the documentation for React Native users, I would love to hear your ideas and/or see a Pull Request for said enhancements.

[kelleyvanevert]

Awesome, I like the ideal world scenario. Maybe for the meantime just a sentence in the readme that mentions the case, e.g. where setConsole is documented. I'm new to RN too, but if I'll keep in touch if I have a good idea.