Angular runs some of the most high-use, complex, and critical applications in production today. Some high-profile examples include GitHub, Google, and Adobe. By default, Angular provides some basic error handling, however, creating a robust system for handling Angular errors is up to the application developers.
Some of the most widely-used built-in classes and options for handling Angular errors include:
ErrorHandler - likely the most “labor-intensive” way to handle errors. This class must be deployed across the entire codebase, and is very hard to maintain.
HttpErrorResponse - designed to handle http requests and determine error behavior in particular. Is used when catching errors with a httpClient method.
Snack Bar - more geared towards the end-user. This is a built in system for displaying error messages to a user so they understand something went wrong. A good alternative to simply printing errors to console.
httpInterceptor - this option is best for implementing an application-wide error handling system. Everything can be logged from one central location.
You may notice that most of these options revolve around logging HTTP requests. While a huge portion of errors occur around http requests, there is another layer which can be missed without the right tooling. Normal user-facing errors which aren’t always caused by an issue with an HTTP request can commonly break an Angular app for an end user -- usually caused by issues with JavaScript code. Surfacing, aggregating, and fixing these issues is critical to maintaining a successful user experience.
Tools like LogRocket automatically capture all errors related to an Angular app - both HTTP-based (network requests) and JavaScript-based errors. LogRocket can greatly improve your Angular error handling systems by compiling issues with an Angular app then providing insight into why those issues occurred by leveraging session-replay and centralized error reporting. Get a free trial today.
