JSErrorCollector
JSErrorCollector copied to clipboard
mguillem
Not able to capture Angular JS errors
I was trying to capture error like https://docs.angularjs.org/error/$compile/multidir, via JSErrorCollector, but it is not able to capture this type of errors.
attached is the screen-shot of error I am trying to capture.
My html test code which generates angular error at console is as below:
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Multiple Isolate-Scopes Cannot Be Applied To The Same Element In AngularJS
</title>
</head>
<body>
<h1>
Multiple Isolate-Scopes Cannot Be Applied To The Same Element In AngularJS
</h1>
<!-- Both of these directives are isolate-scope directives. -->
<p bn-this bn-that>
Look at the console output.
</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module( "Demo", [] );
app.directive(
"bnThis",
function() {
return({
link: angular.noop,
restrict: "A",
scope: {}
});
}
);
app.directive(
"bnThat",
function() {
return({
link: angular.noop,
restrict: "A",
scope: {}
});
}
);
</script>
</body>
</html>
You can create html file out of it and try to run it, and give this path in below ruby file.
My ruby file which tries to capture js error is as below, it is able to capture normal java script error but not the angular one :
require 'watir-webdriver'
profile = Selenium::WebDriver::Firefox::Profile.new
profile.add_extension "JSErrorCollector.xpi"
browser = Watir::Browser.new :firefox, :profile => profile
browser.goto 'http://localhost:63342/AngularExample/test.html'
errors = browser.execute_script("return window.JSErrorCollector_errors.pump()")
if errors.any?
puts "-------------------------------------------------------------"
puts "Found #{errors.length} javascript error(s)"
puts "-------------------------------------------------------------"
errors.each do |error|
puts error["errorMessage"] + " (" + error["sourceName"] + ":" + error["lineNumber"] + ")"
end
@file.close
end
Let me know if you need more information.
This is great to reproduce the problem.
In fact it seems to me that what is available in the console is "only" an error that has been explicitly logged with console.error and not an error that has "really occurred". This mean that this is something that is not in the scope of JSErrorCollector... at least until now.
I think you are right ... I had gone in detail of exception handling of Angular https://docs.angularjs.org/api/ng/service/$exceptionHandler which says it logs into console, and may be not thrown as error.
If i override the exception handling in Angular by throwing the error as below, your JSErrorCollector is able to catch the errors.
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Multiple Isolate-Scopes Cannot Be Applied To The Same Element In AngularJS
</title>
</head>
<body>
<h1>
Multiple Isolate-Scopes Cannot Be Applied To The Same Element In AngularJS
</h1>
<!-- Both of these directives are isolate-scope directives. -->
<p bn-this bn-that>
Look at the console output.
</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module( "Demo", [] );
app.config(angular.module('exceptionOverride', []).factory('$exceptionHandler', function() {
console.error("test...");
return function(exception, cause) {
exception.message += ' (caused by "' + cause + '")';
throw exception;
};
}));
app.directive(
"bnThis",
function() {
return({
link: angular.noop,
restrict: "A",
scope: {}
});
}
);
app.directive(
"bnThat",
function() {
return({
link: angular.noop,
restrict: "A",
scope: {}
});
}
);
</script>
</body>
</html>