Getting 400 Bad Request despite catching the err in angular2+

Question

I have designed a login page where login is successful when i put a correct login and password and Login doesn't happen when I put an incorrect username or password which is correct. However, I get this error:

POST http://localhost:3003/login/authenticate 400 (Bad Request)

ERROR HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request", url: "http://localhost:3003/login/authenticate", ok: false, …}

Everything works properly however, I get the error in the console. Like this:

I want the 400 bad request error to not appear in the console. How to do that?

login.component.ts

login(data) {

    console.log("Inside Login");

    this.authenticateObj = {
      username: data.username,
      password: data.password
    }


    this.http.post("http://localhost:3003/login/authenticate", 
      this.authenticateObj)
      .map(Response => Response)
        .catch((err) => {
          console.log("err =", err)
         alert('Login Failed. Username or Password 
       is incorrect');
          return Observable.throw(err);
      })
      .subscribe((res: Response) => {
        console.log("Inside login authenticate subscribe");

        this.info = res;
        if (this.info.message == 'Login Successful.') {


          console.log("test after login = ", this.info);


          if (localStorage.getItem('username') && 
          localStorage.getItem('token')) {
             alert('Login Successful');
            this.router.navigate(['/file-upload/wsdl']);
          } else {
            this.notification.Error('Unauthorized');
          }
        }
        if (this.info.message == 'error') {
          alert('Login Failed');
        }
        else if (this.info.status == 400) {
          alert('Login Failed');
        }
      })


  }

login.controller.js

function authenticateUser(req, res, next) {

console.log("Inside authenticateUser = ", req.body)

    LoginService.authenticate(req,req.body)
        .then(function (token) {

            if (token) {
                res.setHeader("authorization",token.token);
                res.send({
                  message: 'Login Successful.',   

                    response: token
                });
            } else if(res.message == 'Username or Password is 
            incorrect'){ 

                res.status(401).send({
                    message: 'Unauthorized. '
                });
            }
            else { 
                console.log("inside controller, else res.status-400");  
                res.status(400).send({
                    message: 'Username or password is incorrect'
                });
            }
        })
        .catch(function (err) {
            console.log("inside controller, catch res.status 400")
            // res.status(400).send(err);

            res.status(400).send({
                message: 'Username or password is incorrect'
            });

        });
}

Answer 1

In order to handle errors from server properly, you have to catch them in the subcribe() method of the Observable returned by http.post from Rxjs:

this.http.post("http://localhost:3003/login/authenticate", this.authenticateObj)
    .subscribe(
        (res: Response) => {
            // code when no error...
        }, 
        err => {
            // error handling...
        },
        () => {
            // finally...
        }
    );