React-redux: `useSelector` comparator swallows errors

[migueloller]

Do you want to request a _feature_ or report a _bug_?
Reporting a bug.

What is the current behavior?
Errors thrown in useSelector comparator are swallowed.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below:
https://codesandbox.io/s/redux-useselector-comparator-bug-ho0e4

What is the expected behavior?
Error should not be swallowed.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?
[email protected], [email protected], [email protected]

[markerikson]

Hmm. So what I'm seeing here is:

• action is dispatched
  
  
  
  • selector runs
  
  
  • comparator runs and throws error
  
  
  • error is caught
  
  
  • forced re-render
  
  
• function component re-renders
  
  
  
  • selector runs synchronously
  
  
  • comparator is _not_ called, because we read from the store synchronously and just keep rendering
  
  
  • function component renders okay
  
  

Conceptually, how would you expect us to handle an error in a comparator?

For that matter, what prompted you to even put together this POC in the first place? Are you using a seriously custom comparator of some kind that's throwing errors?

[timdorr]

The comparator should be a pure function. Throwing an error is considered a side-effect and is therefore impure. It's similar to throwing an error in a reducer (which is also swallowed).

[migueloller]

@markerikson, In my case, the comparator was looking at some object fields and an invalid read caused an error. The UI was inconsistent and It took a bit to realize that the comparator was swallowing it.

A simple use-case would be somebody's wrongfully implemented shallow comparator that relies on inputs being objects. If they're not careful the comparator will throw and it will be hard to find out what's going on.

Maybe logging something in development mode would help? I'm throwing an error in the example, but when I ran into this I assumed my function was pure—it just happened to throw an error.

@timdorr, are errors from reducers being swallowed a [email protected] thing?

[timdorr]

That's just a Redux thing.

[migueloller]

I just upgraded the CodeSandbox to throw in the reducer and it seems that the error isn't swallowed.

You can play with the two commented lines to see the difference in behavior.

[timdorr]

That dispatch in useEffect() without any deps is causing an infinite loop (with the useSelector). Because of how Codesandbox is built, you don't have access to the error itself, but it's basically being caused by a setState during render.

If you setTimeout the dispatch, you won't get any error: https://codesandbox.io/s/redux-useselector-comparator-bug-p9n27

So, the error is swallowed. There isn't any way to break this behavior without a store enhancer. It's the default for Redux.

[migueloller]

Nice call. I guess if y'all think it's fine to do what Redux does here it's ok. Is it worth documenting?

[timdorr]

Sure, we're always open to doc improvements.

[markerikson]

I'd be okay with logging caught errors in the subscription handler in dev.