In the world of web applications, monitoring and visualising metrics is crucial for maintaining performance and ensuring a seamless user experience. This is especially true for load balancers, which play a vital role in distributing traffic across multiple servers.
The goal of this project was to create an intuitive dashboard that provides real-time insights into the performance metrics of my Node.js Load Balancer which I've built in my previous web-dev project. I wanted to visualise server health, active connections, DDoS protection metrics, and even the geographical distribution of requests. To achieve this, I leveraged the power of React for building the user interface, TypeScript for type safety, and Vite for a fast development experience.
To allow the dashboard to communicate with the load balancer, I needed to configure CORS (Cross-Origin Resource Sharing). This is because the dashboard and the Load Balancer API were running on different origins during development, and I needed to allow the dashboard to make requests to the load balancer for seamless communication for fetching metrics and displaying real-time data on the dashboard.
To visualise the geographical distribution of requests, I integrated the GeoLite2 database for IP geolocation. This allowed me to map the IP addresses of requests to their corresponding geographical locations by country, and even city or by ISP.
This allows analysts to see where the requests are coming from, and to identify any anomalies or spikes in traffic from certain regions.
In my load balancer API, I added a new endpoint for my dashboard to fetch from for the geographical location of an IP address. This information was then processed in my React components to display the geographical distribution of requests in real-time:
To ensure the dashboard displays real-time metrics, I implemented a refresh mechanism that updates the metrics every 5 seconds. This automatic refresh allows the dashboard to present important metrics such as:
Currently, this is implemented by my dashboard periodically fetching the metrics from the load balancer API, and then updating the state of the dashboard. However, another method I've recently learned about and something I would like to explore, is to use the SSE (Server-Sent Events) protocol for these real-time updates. It works by using the fetch API to open a persistent connection to the load balancer API, and then using the EventSource object to listen for updates. This approach is more efficient as it reduces the number of HTTP requests, and allows for more immediate updates.
My approach for building this dashboard was to use the principles of component-oriented programming. I've created resuable components for certain sections of the dashboard for modularity and easier maintenance and scalability.
To manage state/data across components, I "Lifted State Up" to the parent component, allowing me to pass data down to both the dashboard and security pages. This approach ensured that my components remained in sync and that any updates to the metrics were reflected across the entire application.
Creating a dashboard for my load balancer has been a great learning experience. I was able to get a deeper understanding of how technologies such as Load Balancers, are maintained and monitored in production; away from the terminal.
I also got the opportunity to apply my knowledge of React and Typescript to build a responsive, real-time application, along with integrating external libraries and databases, such as GeoLite2, into technologies.