Angular error handling and monitoring
Applications made with dynamic websites development and Javascript frameworks and libraries like Angular or React has many problems to solve. The whole application runs on the client side and we usually have to consume RESTful API calls or call web sockets to interact with a server. Error handling is now complex and we must be able to know what's happening both on the client and the server side. Here are the topics we want to speak: We can be able to catch errors or exceptions but we also want to be able to log all errors and monitor the situation in a production environment. Our code can contain errors. That's because humans cannot test many features and pages manually or make every single regression test. Here are the reasons why humans make mistakes. And this is about the whole software development lifecycle:
- Complexity of application
- Communication between stakeholders
- Developer mistakes
- Time pressure
- Lack of testing
Client-side errors
Writing a try \ catch statement is easy but take a look at the Angular Error handler class. They suggest using it in a module, overwriting the handleError method, and do whatever you want with the Javascript error object. With the error object, we can have a human-readable description of the error and the stack trace of the error.
We also need to log all of this information and be able to read some statistics when something wrong happens. And here we have some other problems: we cannot call a simple service on a server to write some logs because making an additional request to the server it's not a good idea for the performance and the developers that must implement the mechanism to call the service every time they need it. It is also bad for security: if an application call services too often, the backend server can be overloaded and a malicious user can even take advantage of this problem to launch a DDoS attack! At this point, most of the information written on our storage system will become useless!
With an Angular service, we can handle the code for (almost) all our exceptions. Here we have some libraries and services:
- StacktraceJs , generate, parse, and enhance JavaScript stack traces in all web browser
- TrackJs - JavaScript Error Logging and Alerting
- Bugsnag is an open-source error-reporting library for over 50 platforms. Automated error monitoring, reporting, alerting, and diagnostic capture for mobile, web, and backend apps.
- Sentry, an open-source application monitoring platform that helps you identify issues in real time.
- Rollbar, automates error monitoring and triaging, so developers can fix errors that matter within minutes, and build software quickly and painlessly
Server-side errors
A Javascript app made with any framework or library must predict each case and show the right message to the user. When a REST call fails, we want to know when and why this error occurred. In a production environment, this can be very important, especially when we are not at work and of course because we cannot check a software or web application all day long!
ELK stack: Elasticsearch, Logstash, and Kibana are becoming popular for many purposes. Here I stole the definition from the official website: "ELK is the acronym for three open-source projects: Elasticsearch, Logstash, and Kibana. Elasticsearch is a search and analytics engine. Logstash is a server‑side data processing pipeline that ingests data from multiple sources simultaneously, transforms it, and then sends it to a "stash" like Elasticsearch. Kibana lets users visualize data with charts and graphs in Elasticsearch."
You can build a logging system for your backend or choose if there is a good library that can help with many issues and save a lot of time. Different solutions for different technologies can be ready to use. I can go more deeply and see the best solution for each programming language but I guess it can be even boring for this post. Feel free to search and adapt your own solutions!
User notification
Let's say this is another frontend issue. When an error occurs, you can send real-time notifications and messages to the user and the developer must solve the problem as quickly as they can. That's not simple but we are speaking about the same problems. The errors can be stored and then the owner of the project can be able to solve any issue only if they have a complete vision of what's happening in their production environment.
Testing
Prevention is better than cure. Testing is very important for any software and it allows us to avoid many boring errors. Debugging is boring, we want to focus on our code, features and new applications and not on wasting a LOT of time to discover and solve mysterious bugs!
Conclusion
The aim is to log all client errors, monitor them, and see when there's a problem coming from the backend without implementing boring and repetitive code in our software. To do this we must know and use the right tools. I hope this post will be useful. Happy coding and beware of errors!