When we are working on a real project, it is vital to have a dashboard where we can find the availability of the backend services integrated with that project. This solution can be used for that purpose.
Demo App
- Easy to find unavailable backend services
- Real-time updating the services' status in every “x” seconds (“x” can be configured. By default, “x” is 30 seconds)
- Easy to integrate services
- Can maintain multiple environments
- No need to worry about the CORS issue
- Both Web and Mobile friendly UI
- Free and open-source
Architecture
| Criteria | API Health Checker Dashboard | Dynatrace Dashboard |
|---|---|---|
| Real-time monitoring | Yes | Minimum interval is 5 minutes |
| Historical view | Not yet implemented | Yes |
| Integrating backend services | Only need to update in a single file | Need to create HTTP monitors per service and add it to the dashboard |
| Managing environments | Can maintain multiple environments via multiple json files | Need to create multiple HTTP monitors per each environment and service |
| Cost | Free and open-source | Paid tool |
Pre-requisites:
Steps:
- Clone this project
- Open the project in VSCode
- Update the JSON files located in "api-health-checker-dashboard/config" with your Backend services' health routes
- Save the changes
- Open a terminal from VSCode
- Execute
npm installto install the node modules - Execute
npm run devto start the node application - Open the web application from http://localhost:5000
Note: You won't be facing CORS issue. Because this application has a proxy layer to solve that issue. You can deploy this application as a node application.
You can deploy this as a node application.
Sample API Health Checker Dashboard: https://osandadeshan-api-health-checker-dashboard.glitch.me/
Copyright 2022 MaxSoft.