jswhisperer · August 29, 2015 14:09
diff --git a/angularjs-errors.htm b/angularjs-errors.htm
 <!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>
	<!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>