How to catch http error response in Angular

Question

Background

My Angular application communicates with a database through a set of API endpoints.
"user/authenticate" endpoints accepts username and password and returns a success (200) or a bad request (400) http response.

Controller

authService.login(email, password)
    .success(function (response) {
        /* go to application */
    })
    .error(function (response) {
        /* display proper error message */
    });

auth Service

factory.login = function(email, password) {
    return $http({
        method: 'POST',
        url: "http://myserver/user/authenticate",
        data: $.param({email: email, password: password}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
}

Problem

When username and password fails and API returns 400 response, even though I'm catching the error and I'm displaying a proper message to user, the error appears in browser console.

POST http://myserver/user/authenticate 400 (Bad Request)

Can I handle errors in a better way?

You say "even though I'm catching the error and I'm displaying a proper message to user, the error appears in browser console".. so what is the problem? What error is in the console? If you report the error to the user then what is the issue? — jakeforaker
– jakeforaker, Commented Jul 18, 2015 at 4:37
I don't want user to see an error message in console. Is there a way to prevent that? — user2364656
– user2364656, Commented Jul 18, 2015 at 4:52
If the server returns an error response, there is no way around it. If the user is savvy they will see it. An average user will not have their console open. Its up to the front end developer to translate server errors into readable/useful messages to the user. A 400 error is a 400 error, you cannot hide it. — jakeforaker
– jakeforaker, Commented Jul 18, 2015 at 4:56

user1608841 · Accepted Answer · 2015-07-21 06:07:08Z

Try this

factory.login = function(email, password) {
    return $http({
        method: 'POST',
        url: "http://myserver/user/authenticate",
        data: $.param({email: email, password: password}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function (response) {
       /**Check here your status code 400 if you found that status code is 400 the reject the promise**/
            if (statuscode !==400) {
                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

        }, function (response) {
            // something went wrong
            return $q.reject(response);
        });
}

and then use following code

 authService.login(email, password)
        .then(function (response) {
            /* go to application */
        },function(error) {
                console.log(error); /* catch 400  Error here */
    });

Actually you handle the error as the questioner do, you will still get the same error message, i'm using same ur way but not help .
You can handle the error, like if bad request to show message to user with statusText, but still you get an error in console, POST http://localhost:8100/api/users 400 (Bad Request) this for me that if I try to post user with same email, in UI i handle it an dshow that user already exist but in console i'll still get this message, the questioner need to get ride of this in console, (which actually impossible).

Collectives™ on Stack Overflow

How to catch http error response in Angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related