When I write $http.get request, even if I provide an error handling function:
function Ctrl1($scope, $http){
$http.get('www.blahNonexistent.com/api').
success(
function(data){console.log("SUCCESS");}
).
error(
function(data){console.log("ERROR");}
)
}
AngularJs still outputs the error to the console:
Here is a minimal working example on JsFiddle.
Is there any way to prevent this behavior? (I don't want the use the think the site is broken, if one of the API endpoints is down)
That's a native error message and not an angularjs error, therefore I don't think you can "disable"/prevent it.
For example, if you add the following css to your fiddle, you will get the same GET error on the console:
div {
background-image: url("image.png");
}
Related
$http.post(url, data).then(function (response) {
// TypeError: Cannot read property '$destroy' of null
$state.go('some.page');
// No Error
$timeout(function () {
$state.go('some.page');
}, 500);
});
500ms delay prevent from error.
Why instant page change gives "Cannot read property '$destroy' of null" error?
My initial thought on this was wondering where the best place to use $state.go is. I have always used it in the controller and didn't even know you could do it in the service... But at the end of the day, it shouldn't matter. So I did some googling on it and found this issue on github! It seems to have the same problem that was solved with a timeout but just by moving the $state.go into the controller fixes it as well.
https://github.com/angular-ui/ui-router/issues/403
Hope it this helps!
Edit: Here is another stackoverflow question about something similar
AngularJS behaving strangely when there's a nested relationship of promises in services
I have started a new AngularJS project - and this time something strange is happening. Whenever I get an error in the browser's console, it references to the angular.js file. I don't know what's different with this app from all my others - maybe the AngularJS version (1.6.4). Or the fact that I'm using controllerAs syntax?
For example - if I try the following in my main controller:
vm.notdefined.somevalue = "this should give an error";
I don't get a console error with the line of code in my controller, but with a line in angular.js:
angular.js:14525 TypeError: Cannot set property 'somevalue' of undefined(…) ""
It would be ok for me if I could trace back the error from the stack trace - but also the stack trace does not contain any information on the position of the error in my project.
The error is thrown where it appears. vm.notdefined.somevalue is a part of ngControllerinstance. In the moment your controller get parsed the error is thrown. This happends inside AngularJS kernel logics. You could check the stack trace for debugging. It should lead you to your controller function. You could also use breakpoints on your code e.g. by using chrome debugger. All in all this will lead you to the origin of this error.
For more information about debugging please check this answer: How can I get more stacktrace in AngularJS
The error message is quite clear: vm.notdefined is undefined. Try:
vm = this;
vm.notdefined = {
somevalue: "this should give an error"
}
Shame on me - I missed to click on the three dots to expand the error message:
Not sure why I have to do this sometimes and other times I get the error stack in the immediate stack.
What is the difference when using $log.log() and console.log().
What is a scenario that typically use $log.log() than console.log()
$log is a simple service for logging. Default implementation safely writes the message to the browser's console (if present).
This means that unlike console.log(), it $log is a service that first checks if console.log() is supported. For instance in older versions of IE console.log() is unsupported and would cause an error that could cause your page not to work because of the javascript error.
Otherwise, you would have to write the following At the top of your script so if console is used in an unsupported browser instead of getting an undefined error it will just return an empty function:
if ( ! window.console ) console = { log: function(){} };
Reference:
docs.angularjs.org
I have some problems with jsonp and AngularJs
I one page, i have to make about 15 json calls, each one by jsonp
My calls look like this :
$http.jsonp("http://www.example.com/feed1.json?callback=JSON_CALLBACK1")
And in my json feed, the data is wrapped by JSON_CALLBACK1
But i always obtain this error :
Uncaught ReferenceError: JSON_CALLBACK1 is not defined
Now i noticed in the network tab in the Google Chrome inspector that the call was :
http://www.example.com/feed1.json?callback=angular.callbacks._0
So i changed my json file, to wrap data with angular.callbacks._0(); instead, and it worked for this one, but it did not work for all my json
I started wraping all my jsons with angular.callbacks._1, angular.callbacks._2, angular.callbacks._3 ... byt i noticed that the number isn't always the same ? and if the number is a two digits, it doesn't work. For example, i tryed angular.callbacks._15, and i always obtain this error
Uncaught ReferenceError: angular.callbacks._15 is not defined
So is there a way to fix all those jsonp problems once for all with AngularJs ?
Thanks
The callback=angular.callbacks._123 parameter is an information for the server that the client (browser) expects the response to be wrapped inside a function named angular.callbacks._123 like so:
angular.callbacks._123({
"key": "value"
});
You should change your server code to inspect the parameter value and if present use it as the wrapping function name.
You can find more details in wikipedia.
I want to intercept console log message from AngularJS and display them in a div on the page. I need this in order to debug ajax traffic in a PhoneGap app.
This is an example of the kind of errors I want to capture:
I tried this Showing console errors and alerts in a div inside the page but that does not intercept Angular error messages.
I also tried the solution gameover suggested in the answers. No luck with that either. Apparently $http is handling error logging differently.
I guess the answer you tried has the right idea but you're overriding the wrong methods. Reading here I can see angularJs uses $log instead of console.log, so to intercept you can try to override those.
Something like this:
$scope.$log = {
error: function(msg){document.getElementById("logger").innerHTML(msg)},
info: function(msg){document.getElementById("logger").innerHTML(msg)},
log: function(msg){document.getElementById("logger").innerHTML(msg)},
warn: function(msg){document.getElementById("logger").innerHTML(msg)}
}
Make sure to run that after importing angular.js.
EDIT
Second guess, override the consoleLog method on the LogProvider inner class on angular.js file:
function consoleLog(type) {
var output ="";
//arguments array, you'll need to change this accordingly if you want to
//log arrays, objects etc
forEach(arguments, function(arg) {
output+= arg +" ";
});
document.getElementById("logger").innerHTML(output);
}
I've used log4javascript for this purpose. I create the log object via
var log = log4javascript.getLogger('myApp')
log.addAppender(new log4javascript.InPageAppender());
I then use this in a value dependency, and hook into it where needed (e.g. http interceptor).
A more lightweight approach might be to use $rootScope.emit and then have a component on your main page which prepends these log messages to a visible div, but this will require you to change all your calls to console.log (or redefine the function in your js).
I think that this message is not even displayed from AngularJS. It looks like an exception which has not been caught in any JavaScript (angular.js just appears on top of your stack because that's the actual location where the HTTP request is being sent).
Take a look at ng.$exceptionHandler. That should be the code you seem to be interested in. If not, take a quick web search for „JavaScript onerror“ which should tell you how to watch for these kinds of errors.
I would rather user an $http interceptor.
Inside the responseError function, you can set a property on a service that will be exposed to the div's scope.