How do I debug ngrx/store?

Question

I have run into a specific code state with Angular 2 and ngrx/store where my application breaks totally (routing not working, data not appearing, route singing back to previous one, and all other kinds of possible disasters), but I am running out of idea how to debug what's happening around the store. The redux dev-tools is a great tool, but it does not seem to be able to catch errors.

I have placed .catch statements throughout my selectors, effects, and just before .subscribe() statements, trying out two variants:

return state$.select(state => state.user)
  .map(user => user.collection)
  .catch((error, caught) => {
      console.log('error getCollection');
      return caught;
  });

and

return state$.select(state => state.user)
  .map(user => user.collection)
  .catch((error) => {
      console.log('error getCollection');
      return Observable.throw(error);
  });

The console remains silent though. I simply don't believe there would be any other "single source of error" but the store.

This code does not catch error for me. Should it?:

.do(() => {
    Observable.throw('fake error');
})
.catch(error => {
    console.error(error);
    return Observable.throw(error);
});

Can anyone point me at how to debug the observables used throughout the store?

Answer 1

use .do() for logging a stream - that will fix it

you will need to add the do operator via an RXJS import.

return state$
  .do(() => { // log here } )
  .select(state => state.user)
  .map(user => user.collection)
  .catch((error, caught) => {
      console.log('error getCollection');
      return caught;
  });