Building a Real-Time Monitoring Dashboard for My Frontend Applications

I recently embarked on a project to create a fully self-hosted real-time monitoring dashboard for my frontend applications. The goal was to have a centralized platform where I could track key metrics, errors, and performance issues in real-time. After some research and experimentation, I landed on a combination of tools that worked perfectly for my needs: Grafana, Postgres, and BullMQ.

The Problem I Was Trying to Solve

As a developer, I know how important it is to have visibility into how my applications are performing in the wild. I wanted to be able to track core web vitals, errors, and other key metrics in real-time, so I could quickly identify and fix issues before they became major problems. But I didn’t want to rely on third-party services or pay for expensive monitoring tools. That’s why I decided to build my own self-hosted monitoring dashboard.

The Tools I Chose

I started by building a frontend logging and batching library that could collect data from my applications and send it to a backend API. The library batches core web vitals and errors, which are then sent to the backend API for processing. On the backend, I used BullMQ to handle the batching and sending of data to a PostgreSQL database. Finally, I used Grafana to query the Postgres database and visualize the data in a beautiful and intuitive dashboard.

Why I Chose These Tools

I chose Grafana because it’s an incredibly powerful and flexible visualization tool that can connect to a wide range of data sources. It’s also highly customizable, which was important to me because I wanted to be able to create a dashboard that was tailored to my specific needs. Postgres was an obvious choice for the database, given its reliability, scalability, and ease of use. And BullMQ was the perfect choice for handling the batching and sending of data, thanks to its simplicity, reliability, and high performance.

How It Works

Here’s a high-level overview of how the system works. The frontend library collects data from my applications and sends it to the backend API, which uses BullMQ to batch and send the data to Postgres. Grafana then queries the Postgres database and visualizes the data in the dashboard. It’s a simple but powerful architecture that gives me real-time visibility into my applications’ performance and errors.

Benefits of This Approach

There are several benefits to this approach. First, it’s highly customizable, so I can tailor the dashboard to my specific needs. Second, it’s highly scalable, so I can handle large volumes of data without breaking a sweat. And third, it’s incredibly cost-effective, since I’m not paying for expensive third-party monitoring tools.

Code and Resources

If you’re interested in building a similar system, I’ve made my code available on GitHub. You can find the frontend code here, and the self-hosted Kubernetes code here. I hope this helps, and I’d love to hear from you if you have any questions or feedback.

Tworzenie Pulpitu Nadzorującego w Czasie Rzeczywistym Dla Moich Aplikacji Frontend

Ostatnio podjąłem się projektu tworzenia w pełni samodzielnie hostowanego pulpitu nadzorującego w czasie rzeczywistym dla moich aplikacji frontend. Celem było stworzenie scentralizowanej platformy, w której mógłbym śledzić kluczowe metryki, błędy i problemy z wydajnością w czasie rzeczywistym. Po pewnym badaniu i eksperymentowaniu, trafiłem na kombinację narzędzi, które idealnie spełniały moje potrzeby: Grafana, Postgres i BullMQ.

Problem, Który Starałem Się Rozwiązać

Jako deweloper, wiem, jak ważne jest posiadanie wglądu w to, jak moje aplikacje działają w środowisku produkcyjnym. Chciałem móc śledzić kluczowe metryki, błędy i inne ważne wskaźniki w czasie rzeczywistym, aby mogłem szybko identyfikować i naprawiać problemy, zanim staną się one dużymi problemami. Nie chciałem jednak polegać na usługach zewnętrznych ani płacić za drogie narzędzia monitorujące. Dlatego postanowiłem zbudować własny pulpit nadzorujący.

Narzędzia, Które Wybrałem

Zacząłem od budowy biblioteki logowania i grupowania dla frontendu, która mogłaby zbierać dane z moich aplikacji i wysyłać je do backendu. Biblioteka grupuje kluczowe metryki i błędy, które są następnie wysyłane do backendu do przetwarzania. Na backendzie, użyłem BullMQ do obsługi grupowania i wysyłania danych do bazy danych PostgreSQL. Na koniec, użyłem Grafana do zapytania bazy danych Postgres i wizualizacji danych w pięknym i intuicyjnym pulpicie.

Dlaczego Wybrałem Te Narzędzia

Wybrałem Grafana, ponieważ jest to niezwykle potężne i elastyczne narzędzie wizualizacyjne, które może łączyć się z szerokim zakresem źródeł danych. Jest to również wysoko dostosowywalne, co było dla mnie ważne, ponieważ chciałem móc stworzyć pulpit, który był dostosowany do moich specyficznych potrzeb. Postgres był oczywistym wyborem dla bazy danych, ze względu na jego niezawodność, skalowalność i łatwość użycia. A BullMQ był idealnym wyborem do obsługi grupowania i wysyłania danych, dzięki swojej prostocie, niezawodności i wysokiej wydajności.

Jak To Działa

Oto ogólny przegląd tego, jak system działa. Biblioteka frontendowa zbiera dane z moich aplikacji i wysyła je do backendu, który używa BullMQ do grupowania i wysyłania danych do Postgres. Grafana następnie zapytuje bazę danych Postgres i wizualizuje dane w pulpicie. Jest to prosta, ale potężna architektura, która daje mi wgląd w czasie rzeczywistym w wydajność i błędy moich aplikacji.

Korzyści Z Tego Podejścia

Istnieją beberapa korzyści z tego podejścia. Po pierwsze, jest to wysoko dostosowywalne, więc mogę dostosować pulpit do moich specyficznych potrzeb. Po drugie, jest to wysoko skalowalne, więc mogę obsłużyć duże ilości danych bez problemów. I po trzecie, jest to niezwykle opłacalne, ponieważ nie płacę za drogie narzędzia monitorujące zewnętrzne.

Kod I Zasoby

Jeśli jesteś zainteresowany zbudowaniem podobnego systemu, udostępniłem swój kod na GitHub. Możesz znaleźć kod frontendu tutaj, a kod Kubernetes tutaj. Mam nadzieję, że to pomoże, i chciałbym usłyszeć od ciebie, jeśli masz jakieś pytania lub uwagi.