I am trying to handle the error in my angular application but global error handler is not working.
I am using ngrx for state management and have a global error handler in my angular application. I am using catchError operator to handle the error in ngrx/effects as suggested here. But now I am not able to use global error handler and I have to catchError in each effect.
//ErrorHandler
handleError(error: Error | HttpErrorResponse) {
const router = this.injector.get(Router);
console.error("Error intercepted.", error);
this.spinner.hide();
if (error instanceof HttpErrorResponse) {
if (!navigator.onLine) {
this.showError('No internet connection');
} else {
if (error.error.message) {
this.showError(`${error.error.message}`);
} else {
this.showError(`${error.status} - ${error.message}`);
}
}
} else {
this.showError("Unknow error.");
router.navigate(['/dashboard']);
}
}
//ngrx effects
export class EffectError implements Action {
readonly type = '[Error] Effect Error';
}
@Effect()
UserAuth: Observable < Action > = this.actions.pipe(
ofType(SigninActions.AUTHENTICATE_USER),
switchMap((action: SigninActions.AuthenticateUser) =>
this.signinService.signin(action.payload.emailAddress, action.payload.password).pipe(
map((loginContext: LoginContext) => {
console.log("LOGIN_CONTEXT", loginContext);
return new SigninActions.AuthenticateUserSuccess(loginContext)
}),
//CatchError
catchError(() => of(new EffectError()))
)
)
);
I am using catchError operator so that effect does not get break whenever an error occurs and global error handler to show different error messages.