var app = angular.module('plunker', []);
var StacktraceService = function() {}
StacktraceService.prototype.print = function($window, exception) {
return $window.printStackTrace({
e: exception
});
};
angular.module('plunker').service('stacktraceService', StacktraceService);
app.config(function($provide) {
// $provide provider is used to register the components in angular internally.
// use decorator to customise the behaviour of a service.
$provide.decorator('$exceptionHandler', ['$delegate', '$window', 'stacktraceService', function($delegate, $window, stacktraceService) {
// exception: exception associated with the error
// cause: optional information about the context in which the error was thrown.
return function(exception, cause) {
// $delegate: provides the original service to the method which is used to call the base implementation
// of $exceptionHandler service which internally delegates to $log.error.
$delegate(exception, cause);
var stacktrace = stacktraceService.print($window, exception);
var clientSideErrorInfo = {
cause: cause || '', // the cause of the issue
message: exception.message, // the message in the exception
url: $window.location.href, // the location in the browser's address bar when error occurred
stacktrace: stacktrace.join('\n') // join array items to populate a string
};
console.log(clientSideErrorInfo.stacktrace);
// the angular $http service cannot be used in the $log
// decorator because it will cause a circular dependecy.
// to overcome this a direct ajax call should be made.
$.ajax({
type: 'POST',
url: '/logger/log', // this is the server end-point where you can log this error
contentType: 'application/json; charset=UTF-8',
data: JSON.stringify(clientSideErrorInfo)
});
};
}]);
});
app.controller('MainCtrl', function($scope) {
$scope.cancelBtnText = 'click me & check console';
$scope.cancelForm = function() {
$logs.info('user requested to cancel the form!');
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="stacktrace.js@*" data-semver="0.5.0" src="//cdnjs.cloudflare.com/ajax/libs/stacktrace.js/0.5.0/stacktrace.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>
<a href="#">http://www.siddharthpandey.net</a>
</h3>
<h3>Learn how to log client-side errors in AngularJS application on the server.</h3>
<input type="text" disabled="disabled" />
<button data-ng-click="cancelForm()">{{cancelBtnText}}</button>
</body>
</html>
/* Put your css in here */