Get best of the week

Visualize Node JS application data with Prometheus + Grafana

In this article I will show how to develop surprisingly informative and convenient dashboards for any Node JS application, I will describe a bunch of Prometheus with Grafana and give code templates so that you can use the acquired knowledge to solve your problems.


Most of the article is not focused specifically on Node JS developers and can be useful regardless of the programming language.


Link to the Github repository with the code for the article - https://github.com/pavlovdog/grafana-prometheus-node-js-example



I think that we all face the challenge of data analysis. Perhaps you will agree - having a visual picture in front of your eyes is much more convenient than putting your hands into the database each time or producing one-time scripts.


This approach becomes especially useful at the moment when the system "gets on the rails." The number of users imperceptibly jumps over dozens, and then hundreds. And now you just do not have time to carefully monitor the application in manual mode. And it’s just nice to feel like Tom Cruise from the Special Opinion.


I will demonstrate how easy it is to add convenient dashboards for any type of data and give an example of a simple Node JS application that implements this functionality.


Architecture


Prometheus + Grafana. Prometheus, . , :


Prometheus


https://prometheus.io/


— . X timestamp -> data. Prometheus — Node JS . HTTP , Prometheus , .


Grafana


https://grafana.com/


Open-source . (data source) — (MySQL, PostgreSQL), (Prometheus).



, , . Grafana — line chart, histogram, heatmap . :


Example dashboards from the official demo stand Grafana


Going deeper


, online , . — — , . , .


Prometheus + Grafana + Node JS . — https://github.com/pavlovdog/grafana-prometheus-node-js-example.



:


$ git clone https://github.com/pavlovdog/grafana-prometheus-node-js-example
$ cd grafana-prometheus-node-js-example/
$ docker-compose up -d

docker docker-compose:


$ docker --version
Docker version 19.03.5, build 633a0ea838
$ docker-compose --version
docker-compose version 1.23.1, build b02f1306


, localhost:3000 ( — admin, — illchangeitanyway) :


The first graph shows the total number of users in all categories. On the second - the number of users for each category, as well as their average, minimum, maximum and current values.



. :


  • Prometheus
  • App
  • Grafana

docker-compose . — .


Prometheus


prometheus/prometheus.yml:


scrape_configs:
  - job_name: 'prometheus'
    scrape_interval: 5s

    static_configs:
      - targets: [
        'app:9200',
      ]
        labels:
          service: 'app-exporter'
          group: 'testing'
          name: 'app-exporter'

, Prometheus (scraping) (targets). target — Node JS , 9200. — 5 .


Prometheus, localhost:9090/targets.



Prometheus . 4.9 .


App


, , e-commerce — . , Prometheus. localhost:9200/metrics:


# HELP active_users Amount of active users right now per category
# TYPE active_users gauge
active_users{category="oil"} 100
active_users{category="wine"} 194
active_users{category="bread"} 289
active_users{category="butter"} 397

— Prometheus :


- targets: [
    'app:9200',
]

, Prometheus app:9200/. — /metrics (app:9200/metrics).


Grafana


Grafana . ./grafana:


$ tree grafana/
grafana/
├── config.ini
├── dashboards
│   └── simple.json
└── provisioning
    ├── dashboards
    │   └── all.yml
    └── datasources
        └── all.yml

grafana/provisioning/datasources/all.yml:


$ cat grafana/provisioning/datasources/all.yml 
datasources:
- name: 'prometheus-monitoring-1'
  type: 'prometheus'
  access: 'proxy'
  org_id: 1
  url: 'http://prometheus:9090'
  is_default: true
  version: 1
  editable: true

— Prometheus, 9090.



, Grafana Prometheus. (panel) , . , MySQL SQL :


select category, active_users from my_table;

Prometheus, — PromQL. , . :



Grafana handlebars ({{ ... }}) — . active_users:


active_users

PromQL Total users ( ):



sum — active_users .


sum(active_users)


In this article I tried to describe, it seems to me, one of the most interesting steps in the development of an IT service - the visualization of key application metrics. If you still have questions - do not hesitate to ask them in the comments to the article. If you are interested in developing monitoring systems for your business, please write to me at sergey.p.moscow@gmail.com.


Subscribe to my Telegram channel to receive notifications of new articles. Thank you for the attention :)

More articles:


All Articles