Question: Catching Errors

[ksloan]

I'm having trouble with errors being swallowed and never bubbling up. I can't seem to use the promise .catch(), or wrap in a try/catch.

Specifically, when I dispatch an action that results in a state change, React re-renders my components. If React throws an error during the render method I can't seem to get ahold of it.

I don't know much about RxJS/Observables... but I can see that my error is being caught by RxJS here https://github.com/ReactiveX/rxjs/blob/master/src/Subscriber.ts#L260-L265 and then I don't know where it goes. I'm assuming redux-logic should throw the error being passed back by RxJS, or use the failType or UNHANDLED_LOGIC_ERROR action types to someone notify me of this error.

As it stands now... it's just silent and everything stops. Any help, or an explanation would be helpful. What is the proper way to handle errors like this with redux-logic?

Example code:

export const someLogic = createLogic({
  type: ACTION_TYPES.LOGIC_EXAMPLE,
  process({ getState, action }, dispatch, done) {
    axios.get('/data')
      .then(res => {
        dispatch(setUser({ user: {name: 'crash render()'} }))
      }).catch(err => {
        // never gets called
        console.error(err)
      }).then(() => done())
  }
})

Thanks!

[jeffbski]

That is wierd. Yes, you normally get the error just like you are doing with the catch handler where you can log it and possibly dispatch something else.

Here is an jsfiddle where I do a similar thing in code:

https://jsfiddle.net/jeffbski/78vpf92k/

If you change the URL to the wrong address (like adding BAD to the beginning of the server name) then when you try to search it will correctly log the error and display the error message.

If you have a github repo where I can look at all of the code, maybe I can help you figure out what is going on.

[ksloan]

I wrote up a minimal fiddle to demonstrate what I'm talking about.

Just to show you that it all works, this is a working version that doesn't throw any errors https://jsfiddle.net/ksloan/x4khtjtj/2/ When you click the button the state changes, and the App component gets re-rendered.

Now if we set the attribute to an object instead of a string, render() will throw, but we won't see the error, everything just stops. The only difference is line 23. https://jsfiddle.net/ksloan/x4khtjtj/3/

Please let me know if you are seeing the same thing I am, or if I'm doing something wrong.

[jeffbski]

It looks like if the error occurs in the reducer then it is getting caught by RxJS and hidden.

If the errors occur outside of the dispatch then they are working properly.

I'll take a look at the code and see if I can fix this. Thanks for bringing my attention to this.

[jeffbski]

I was able to add a test to cover this. Basically now it will console.error any error that occurs in dispatching (or the reducer). Errors that occur during dispatching are especially bad since we don't know that we can safely do any additional dispatching since the reducer is questionable. If we try to do any additional dispatching in that unknown state we could easily get into an infinite loop. Thus the best thing I could think of doing at this point is to console.error the err. I have just published this in v0.11.9.

[ksloan]

Great, that will help a lot. Thanks!

[jeffbski]

Also if for testing purposes, the logicMiddleware.monitor$ now has a new op: 'dispatchError' that will be emitted with the error.

So we can verify exactly what happened. You can see this commit if interested.

e50e3bd