-
-
Save jswhisperer/6f032b8f4db3e63c79bb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="Demo" ng-controller="AppController"> | |
<head> | |
<meta charset="utf-8" /> | |
<title> | |
Logging Client-Side Errors With AngularJS And Stacktrace.js | |
</title> | |
<style type="text/css"> | |
a[ ng-click ] { | |
cursor: pointer ; | |
text-decoration: underline ; | |
} | |
</style> | |
</head> | |
<body> | |
<h1> | |
Logging Client-Side Errors With AngularJS And Stacktrace.js | |
</h1> | |
<p> | |
<a ng-click="causeError()">Cause Error</a>... | |
</p> | |
<p> | |
<em> | |
<strong>Note:</strong> Look at the JavaScript console to | |
see the errors being reported. | |
</em> | |
</p> | |
<!-- Load jQuery and AngularJS from the CDN. --> | |
<script | |
type="text/javascript" | |
src="../../vendor/jquery/jquery-2.0.3.min.js"> | |
</script> | |
<script | |
type="text/javascript" | |
src="../../vendor/angularjs/angular-1.0.7.min.js"> | |
</script> | |
<script | |
type="text/javascript" | |
src="../../vendor/stacktrace/stacktrace-min-0.4.js"> | |
</script> | |
<script type="text/javascript"> | |
// Create an application module for our demo. | |
var app = angular.module( "Demo", [] ); | |
// -------------------------------------------------- // | |
// -------------------------------------------------- // | |
// The "stacktrace" library that we included in the Scripts | |
// is now in the Global scope; but, we don't want to reference | |
// global objects inside the AngularJS components - that's | |
// not how AngularJS rolls; as such, we want to wrap the | |
// stacktrace feature in a proper AngularJS service that | |
// formally exposes the print method. | |
app.factory( | |
"stacktraceService", | |
function() { | |
// "printStackTrace" is a global object. | |
return({ | |
print: printStackTrace | |
}); | |
} | |
); | |
// -------------------------------------------------- // | |
// -------------------------------------------------- // | |
// By default, AngularJS will catch errors and log them to | |
// the Console. We want to keep that behavior; however, we | |
// want to intercept it so that we can also log the errors | |
// to the server for later analysis. | |
app.provider( | |
"$exceptionHandler", | |
{ | |
$get: function( errorLogService ) { | |
return( errorLogService ); | |
} | |
} | |
); | |
// -------------------------------------------------- // | |
// -------------------------------------------------- // | |
// The error log service is our wrapper around the core error | |
// handling ability of AngularJS. Notice that we pass off to | |
// the native "$log" method and then handle our additional | |
// server-side logging. | |
app.factory( | |
"errorLogService", | |
function( $log, $window, stacktraceService ) { | |
// I log the given error to the remote server. | |
function log( exception, cause ) { | |
// Pass off the error to the default error handler | |
// on the AngualrJS logger. This will output the | |
// error to the console (and let the application | |
// keep running normally for the user). | |
$log.error.apply( $log, arguments ); | |
// Now, we need to try and log the error the server. | |
// -- | |
// NOTE: In production, I have some debouncing | |
// logic here to prevent the same client from | |
// logging the same error over and over again! All | |
// that would do is add noise to the log. | |
try { | |
var errorMessage = exception.toString(); | |
var stackTrace = stacktraceService.print({ e: exception }); | |
// Log the JavaScript error to the server. | |
// -- | |
// NOTE: In this demo, the POST URL doesn't | |
// exists and will simply return a 404. | |
$.ajax({ | |
type: "POST", | |
url: "./javascript-errors", | |
contentType: "application/json", | |
data: angular.toJson({ | |
errorUrl: $window.location.href, | |
errorMessage: errorMessage, | |
stackTrace: stackTrace, | |
cause: ( cause || "" ) | |
}) | |
}); | |
} catch ( loggingError ) { | |
// For Developers - log the log-failure. | |
$log.warn( "Error logging failed" ); | |
$log.log( loggingError ); | |
} | |
} | |
// Return the logging function. | |
return( log ); | |
} | |
); | |
// -------------------------------------------------- // | |
// -------------------------------------------------- // | |
// I control the root of the application. | |
app.controller( | |
"AppController", | |
function( $scope ) { | |
// --- | |
// PUBLIC METHODS. | |
// --- | |
// I cause an error to be thrown in nested functions. | |
$scope.causeError = function() { | |
foo(); | |
}; | |
// --- | |
// PRIVATE METHODS. | |
// --- | |
function bar() { | |
// NOTE: "y" is undefined. | |
var x = y; | |
} | |
function foo() { | |
bar(); | |
} | |
} | |
); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment