observable catchError after request failure (axios/redux) - reactjs

Question

INTRO :
I have an app in reactjs, using redux, redux-observable and axios-observable.
I face an issue with HTTP error handling.
Let's take the following Epic :
const loginRequest = (action$, state$) => action$.pipe(
ofType(UsersActions.loginRequest),
switchMap((action: {payload:{email: string, password: string}}) =>
HttpService.PostAsync<any>('token-auth', action.payload).pipe(
map(response => {
// blabla
}),
catchError((error: string) => {
// blabla
})
)
)
);
the HttpService looks like this
public static PostAsync<T>(targetApi: string, data: any, basePath?: string): AxiosObservable<T> {
return Axios.post(this.getBaseUrl(targetApi, basePath), data);
}
So this works correctly, if the post request fail, I get into the catchError, if it doesn't i go into the normal map.
PROBLEM :
I would like to intercept the response, in order to add a global app error handling, I setup the following function :
Axios.interceptors.response.use(response => {
console.log(`[response] --> ${response.status}`)
return response;
}, error => {
console.log(`[error] --> ${error}`)
return throwError(error);
})
I can now see the log, error, or response depending on the HTTP request result. BUT, I will ALWAYS go into the map, and never into the catchError of my Epic.
QUESTION :
How can I interpect the error, but still throw an error to the redux-observable epic ?

Answer 1

throwError only works within RX chain, try use native JS throw
Axios.interceptors.response.use(response => {
console.log(`[response] --> ${response.status}`)
return response;
}, error => {
console.log(`[error] --> ${error}`)
throw error
})