bennadel/angularjs-errors.htm

## 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>