Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Quick Note: Favor $exceptionHandler() Over $log.error() In AngularJS

By Ben Nadel on

This is just a really minor note. I was looking through some AngularJS code the other day and came across someone using a try-catch block that passed the error off to the $log.error() method. While this works - it logs the error to the console - it doesn't add as much value as the $exceptionHandler() service. There are times when logging to the console makes sense; but, as a general rule, I would try to favor the $exceptionHandler() service over the $log.error() method in the vast majority of cases.

<!doctype html>
<html ng-app="Demo">
<head>
	<meta charset="utf-8" />

	<title>
		Quick Note: Favor $exceptionHandler() Over $log.error() In AngularJS
	</title>
</head>
<body ng-controller="AppController">

	<h1>
		Quick Note: Favor $exceptionHandler() Over $log.error() In AngularJS
	</h1>

	<p>
		<em>View the console</em>.
	</p>

	<!-- Load scripts. -->
	<script type="text/javascript" src="../../vendor/angularjs/angular-1.4.2.min.js"></script>
	<script type="text/javascript">

		// I control the root of the application.
		angular.module( "Demo", [] ).controller(
			"AppController",
			function provideAppController( $scope, $log, $exceptionHandler ) {

				// ** Avoid. **
				// --
				// Using the $log.error() method will safely log the error to the console
				// if it is available. If the console is not available, the error will
				// just be swallowed quietly.
				try {

					throw( new Error( "Something went boom."))

				} catch ( error ) {

					$log.error( error );

				}


				// ** Recommended. **
				// --
				// By default, the $exceptionHandler() service does the same thing as
				// $log. The default implementation actually just turns around and calls
				// $log.error() internally. However, the entire framework defers to the
				// $exceptionHandler() for all try / catch blocks which makes it a
				// perfect place to track errors. By favoring $exceptionHandler() over
				// the $log.error() method, you keep in alignment with the rest of the
				// code and make your errors more readily available.
				try {

					throw( new Error( "Something went boom."))

				} catch ( error ) {

					$exceptionHandler( error );

				}

			}
		);

	</script>

</body>
</html>

Out of the box, the default implementation of the $exceptionHandler() service just turns around and calls the $log.error() method. So, you get console-logging for free. The real benefit of the $exceptionHandler() service, however, is two fold: For starters, the rest of the framework uses $exceptionHandler() to manage errors. So, by using the $exceptionHandler() service, you are keeping your code more consistent with the rest of the code (and consistency is always a win).

But, the real benefit of using $exceptionHandler() is that you are passing your error through to a service that has become the de-facto point of override for error logging in the AngularJS community. In my apps, I use the $exceptionHandler() service to gather stack-traces (using Stacktrace.js) and to pass those errors off to New Relic for more aggregated tracking. And, I'm not the only one - a similar approach is also outlined in John Papa's AngularJS Style Guide.

So, long-story-short, favor the $exceptionHandler() unless you truly want to log something without the potentiality of it being logged in a more meaningful way.



Reader Comments