I am using NgRX effects using catchError to return a failure action that disables my loading spinner as following:
update$ = createEffect(() => this.actions$.pipe(
ofType(update),
concatMap(({id, data}) =>
this.dataService.update(id, data).pipe(
map((voucherOwner: VoucherOwner) => {
return updateSuccess({voucherOwner});
}),
catchError((e: HttpErrorResponse) => {
return of(updateFailure());
})
)
)
));
But I am also using an error HttpInterceptor to globally catch errors with status 500, 503, etc. to show a dialog to inform the user something went wrong and advise for contacting the support.
As I catch my errors in the effect with catchError, the error HttpInterceptor does not receive the errors anymore.
I need to catch the error in the effect to be able to dispatch the failure action to disable the loading spinner, but also want to have the HttpInterceptor to catch my status 500 errors. My workaround solution is to return throwError in the effect and store.dispatch the failure action. As follows:
update$ = createEffect(() => this.actions$.pipe(
ofType(update),
concatMap(({id, data}) =>
this.dataService.update(id, data).pipe(
map((voucherOwner: VoucherOwner) => updateSuccess({voucherOwner})),
catchError((e: HttpErrorResponse) => {
if (e.status === 503 || e.status === 500) {
this.store.dispatch(updateFailure({}));
return throwError(e);
}
return of(updateFailure());
})
)
)
));
As I think this is kind of dirty, my question is if there is a better solution to this problem? E.g. something like returning two values at the same time:
return of(updateFailure(), throwError(e))
(I know, throwError is an Observable and can't be used this way.)