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
Related
I try to abort a ui-router transition without having an error log entry, i cannot use transition.abort() because i have to wait for a user input ("unsaved changes. continue?") so i return a promise.
$transitions.onExit({exiting: 'main.settings'}, function(transition) {
var deferred = $q.defer();
// promise testing
$timeout(function(){
// here i need to create a Rejection Object with type = RejectType.ABORTED
deferred.reject(false);
}, 500);
return deferred.promise;
});
If i reject the promise, i get the error log entry, because i don't know, how to create a Rejection with a RejectType.ABORTED in my controller. How can i get access to the Rejection Class?
Or is there any other way, how i can abort a transition asynchronously without creating a error log entry?
Using Angular 1.5.1 and ui-router 1.0.5.
Also asked at https://github.com/ui-router/core/issues/35.
Thanks
Returning rejected promise or false value in transition hook seems like the most natural way to abort the transition.
However if you don't want to clutter the log with the error messages you need to provide defaultErrorHandler() as described here - https://ui-router.github.io/ng1/docs/latest/classes/state.stateservice.html#defaulterrorhandler
If you would like to process some specific transitions errors you need to
provide onError hook for this as described here - https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html#onerror
I solved this issue by defining my own defaultErrorHandler(). Now i can prevent error messages to show up after aborting a transition.
Thanks # Pavel Bely
I seem to have problems combining an MFP hybrid (no cordova) application and angular 1.5. The same application with angular 1.4.9 works fine, but if I switch to angular1.5 then i get this error:
Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
at $$SanitizeUriProvider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:17272:35)
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
at Object.instantiate (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4621:14)
at provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4435:36)
at http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:367:32
at forEach (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:337:20)
at Object.provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4425:9)
at ngModule (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:2476:16)
at Object.invoke (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4606:19)
at runInvokeQueue (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4499:35)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ng&p1=TypeError%3A%…%2FHelloWorld%2Fandroid%2F1.0%2Fdefault%2Fvendor%2Fangular5.js%3A4499%3A35)
anyone a clue what it could be?
I had the exact same problem when I upgraded to angular 1.5.0.
The problem turned out to be with a custom implementation of Function.prototype.bind that we had in our code, it looks like this interfered with the one defined in angular.
Take at the second line on your error callstack
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
I think worklight.js may have an implementation of prototype.bind which is incompatible with the one in angular (see https://code.angularjs.org/1.5.0/docs/api/ng/function/angular.bind)
Also seeing this on the MFP 8.0 cordova plugin.
As others have mentioned, this can be caused by polyfills for Function.prototype.bind. In particular, it seems to be caused by ones that don't properly handle calling the function as a constructor with new. Simple implementations may always return the bound object regardless of invocation, whereas the expectation is that the new operator prevails over the binding and the newly created object gets returned instead.
eg.
// create an object to bind to
var alt = {
message: 'I am the alternate'
};
// our function
function myFunc() {
console.log( this.message );
};
// bind our alternate object to this for myFunc
myFunc.bind( alt );
Standard Invocation Runs as Expected
myFunc(); // output 'I am the alternate'
Invocation via new not as Expected (this is the one that breaks angular 1.5)
new myFunc(); // also outputs 'I am the alternate'</jscodeblock>
The expected behavior is that new invocation will return a new object and not the bound one.
If you need a polyfill for Function.prototype.bind be sure it properly handles this scenario such as the one found on MDN.
I have following $http call in controller:
see complete code in plunker
$http.jsonp("http://currencyconverter.kund.nu/api/availablecurrencies/?callback=JSON_CALLBACK")
.success(function(data){
console.log('data',data)
})
.error(function(err){
console.log('err',err)//it console err undefined
})
above code console err undefined. means it executing error callback.but when i open chrome network tool, in responses it is showing response data.Why it is like that ?
Your jsonp url should always have one parameter callback=JSON_CALLBACK which you are missing here
$http.jsonp("http://currencyconverter.kund.nu/api/availablecurrencies/?callbak=JSON_CALLBACK")
Update
Seems like server side you had not implemented the logic to wrap returned object inside value of callback, because hit this url in browser console should give array wrap inside JSON_CALLBACK variable
JSON_CALLBACK({..data here})
But it is returning an array
[...data...]
This behavior should be handled on server side.
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.
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");
}