Superpower Angular Logging with Elasticsearch, Logstash and Kibana — Part 1
Logstash configuration and Angular $log decorator
Browser console is one of the most used tools web developers can use to find errors in a frontend application. Unfortunately, if a user browser console logs an error, developers will not be notified and will not be able to get the error stack trace. A possible solution to this problem is to send this error from the client application to the server through an HTTP POST request.
At DonkeyCode we use the ELK stack to get analytics about Angular error stack traces server-side. The ELK stack is composed of three open-source products:
- Elasticsearch: the search and analytics engine
- Logstash: the data collection, enrichment, and transportation pipeline
- Kibana: the data visualisation platform
In this series of articles, we will explain how to integrate Angular $log service with the ELK stack, as shown in the following diagram:
The $log service sends an HTTP POST request to Logstash, which sends the associated data to an Elasticsearch index. After that, we can query and visualise this data with the Kibana platform.
In this article we will see how to configure Logstash and how to create the Angular $log service decorator to send the HTTP request to Logstash.
Logstash configuration
With Logstash we can collect data from many sources (through more than 45 input plugins), transform it (using more than 40 filter plugins) and generate output streams (using more than 55 output plugins).
Logstash configuration resides in a .conf file. In this file we need to specify the plugins we want to use and their configurations.
We will use the http input plugin to retrieve logging data from Angular and the elasticsearch output plugin to send it to an Elasticsearch index.
In 2015, the Logstash team announced the availability of the http input plugin and from Logstash 1.5.2, it is included as one of the default plugins.
With this plugin, Logstash can launch a HTTP server to which we can send POST requests containing plain text, JSON, or any formatted data. The full documentation is available here.
To use this plugin, we have to write at least the following lines in the Logstash configuration file:
With this configuration, Logstash will launch a HTTP server who will listen on 0.0.0.0, port 8080. If we want to change the address, we have to write something like:
If you have to add some response headers, you have to write the response_headers property; for example, our Apache settings requires the following headers:
The elasticsearch output plugin is the recommended method to store logs in Elasticsearch and it is easily configurable.
To use this plugin, we have to write:
With this configuration, POST request data sent to the address http://10.10.10.10:8080 will be saved to the “logstash-%{+YYYY.MM.dd}” Elasticsearch index with host 127.0.0.1. If you have to change the default values, read the full documentation of the elasticsearch output plugin here.
Angular $log service decorator
In the Angular documentation, we can read that the $log service has five methods: log(), info(), warn(), error() and debug(). We can write a decorator to add some functionalities to the $log service:
With the above decorator, if we log something in Angular we will send an AJAX POST request to the URL http://10.10.10.10:8080 with a JSON content with the following properties:
- url: the URL of the current page
- content: the message passed to the $log service
- type: the sent message type (“log”, “info”, “warn”, “angularError”, “debug”)
- userAgent: the value of the user-agent header sent by the browser to the server; we can use this to get information about the browser and the OS used by the user, for example:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36- userLang: the user language
This set of information is only an example and we can send other parameters if we want.
$delegate allows us to use the original $log service.
The URL http://10.10.10.10:8080 is the URL of the HTTP server launched by Logstash through its http input plugin.
The $log.error function allows to send POST request also if Angular calls the $exceptionHandler service. Any Angular uncaught exception is delegated to the $exceptionHandler service, which simply calls $log.error; in the error function of our $log service decorator we have used the formatError function present in the original $log service (available here).
In the following articles, we will see how to create and save Kibana visualisations and dashboards configuration and how to use window.onerror global error handler to send request to Logstash. Stay tuned!
I hope you have learned something reading this article. If you have any questions, comments or if you find some errors, please use the Medium’s response stream below.
If you have liked this article, please click the little heart ♡ below to help me to reach more people as possible.
You can even share it on Twitter or Facebook!
Thank you!
