{"repo":"tmohammad78/frontend-observability","free":true,"listed":false,"github":"https://github.com/tmohammad78/frontend-observability","clone":"git clone https://github.com/tmohammad78/frontend-observability.git","description":"An application is like a living being, In this repo, I use Grafana Faro, Grafana Alloy, and Grafana Loki to launch a monitoring system for Frontend Application","language":"TypeScript","stars":11,"topics":["frontend","frontend-monitoring","grafana-alloy","grafana-faro","loki","monitoring"],"license":null,"category":"analytics","readme_excerpt":"Frontend Observability If you find this project useful, please consider giving it a ⭐ star on GitHub! Read the Article: Observing Frontend App with Grafana & Loki (Part 1) --- Option 1: Use Grafana Cloud For a fully managed observability stack, you can use Grafana Cloud instead of running Grafana, Loki, and Alloy locally. See the project setup and instructions in the feat/faro-grafana-cloud branch. A full-stack project featuring a React + TypeScript frontend (built with Vite), containerized with Docker, and integrated with Grafana, Loki, and Alloy for observability and monitoring. Features - Frontend: React + TypeScript + Vite - Monitoring: Grafana dashboards, Loki for logs, Alloy for telemetry collection - Containerized: All services run via Docker Compose - Nginx: Serves the frontend and proxies telemetry --- Architecture Overview This diagram shows how the frontend, Alloy, Loki, and Grafana interact. The React app sends telemetry and logs to Alloy, which forwards them to Loki. Grafana visualizes this data using pre-configured dashboards. --- Getting Started Prerequisites - Docker - Docker Compose - (Optional) Node.js and npm for local frontend development --- 1. Clone the Repository --- 2. Start All Services This will build and start the frontend, Grafana, Loki, and Alloy: - Frontend: http://localhost:5173 - Grafana: http://localhost:3000 (default login: admin / admin ) - Alloy UI: http://localhost:12345 You can use the Graph tab in Alloy UI to verify that Alloy is connect","default_branch":null,"files":null,"tree":[],"storefront":"/r/tmohammad78","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/tmohammad78/frontend-observability/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}