Prevent http errors from being logged in browser console

Question

I'm trying to figure out how to suppress http request and response errors in my app, for example when a bad request is made to my server, I don't want the error to be logged into the browser console. I've tried overriding the $exceptionHandler, but that logic works for all exceptions except HTTP errors, those are still logged to the browser. I've also created HTTP interceptors but the global 400 Bad Request error appears before the logic that I've put in my responseError:

'responseError': function (rejection) {
 console.log(rejection);
 return $q.reject();
}

That doesn't suppress the error either, any ideas?

EDIT

The error I'm getting is this: POST http://localhost:38349/token 400 (Bad Request)

Answer 1

Actually Angular doesn't log this.

It's the XMLHttpRequest object that doing that (same issue here with JQuery). I extracted the logic from Angular and made a working standalone example:

var method = 'POST';
var url404 = '/tnseiartneiasrt/arsntiearsntiasrntiarnstsie';

var xhr = new window.XMLHttpRequest();
xhr.open(method, url404, true);
xhr.onreadystatechange = function() {
  if (xhr && xhr.readyState == 4) {
    console.log('should have logged an error already :(');
  }
};
xhr.send(null);

As you can see, it's the xhr object that logs it. There might be a way to disable all console.log before triggering the xhr request but I think it's better to either

• Redesign your error flow to return a status code of 200 embeded with an internal error code in the body
• Live with the console logging (the average user doesn't even know about the console anyways)

I chose the second option because I think it's easier to understand as it doesn't require extra logic when someone reads your code.

Hope this helps :)