Global Angular Error Handling
I am currently working on an angular boilerplate template to quickly get a new application up and running. It also makes for a decent test bed to try things out. But onto error handling.
By Implementing a global error handler, it allows you the option of including several bits of functionality. You can send logs to some logging service, provide useful errors to the user or attempt to recover the app when something bad happens.
In the past, before I worked with Angular, I would use things like window.onerror = (...)=>{...} or add an event handler for the error event. But it seems in Angular, these techniques don’t work. I tried putting it in the app component and index.html (I know in index.html it wouldn’t have gotten me what I wanted, it was just for troubleshooting purposes). Upon researching my options I came across ErrorHandler in the API Docs. Reading the docs, I was able to figure out how to implement global error handling in my little starter kit app.
The implementation is pretty straight forward. First you create an error service. This service must implement a method called handleError that accepts one argument with a type of any. Now, due to my experimentation I think the reason the type is any is so it can handle custom errors and possibly error events, but it’s actually an Error object. It did behave weirdly though. If I passed the error to console.log, it just output the stack trace and not the actual error object. However, all the error properties and methods are available on it. So in my handleError method, I defined it as a type of Error.
Here is my error service class.
Not a whole lot going on here. Right now I’m just logging the error to the console. If DEBUG_DIALOGS is true, we show a modal with the error and stack trace. Since this is boilerplate, I am kind-of hesitant to include any functionality here. The reason is, when this is used, the included functionality might not be wanted and will be something else that has to be touched by whomever is using the template. So I decided against spending time on any custom functionality.
The next bit for implementing this is to add it to a module.
Here, we’ve added a provider for the ErrorHandler and we use the ErrorService class.
Once the implementation is done, any JavaScript error that is thrown will pass through our ErrorService.handleError method. However, there are is a caveat: If you wrap code that produces an error within a try/catch block, the produced error will not go through this error handler unless you actually throw the error in the catch block. I assume this is the desired behavior as if you’re wrapping something in a try/catch you’re actually handling the error.
I realize that the implementation that I’ve displayed above isn’t of much use. However, the implementation itself provides the ability for you to add your own functionality when an error occurs. I hope you found this useful and if you’re interested in the boilerplate project I’m working on you can use it here: https://github.com/keithstric/angular-boilerplate/generate or just take a look at it here https://github.com/keithstric/angular-boilerplate.
Until next time…. Happy Coding!