Lukas
1af67eb0ce
- Backend: Implement Prometheus metrics collection
- Add prometheus-client dependency
- Create metrics utility module with HTTP request tracking counters, histograms, gauges
- Implement MetricsMiddleware to track request latency, count, and active requests
- Add /metrics endpoint to expose metrics in Prometheus text format
- Normalize paths to prevent cardinality explosion (e.g., /api/{id} for UUIDs)
- Exclude /metrics and /health from detailed tracking
- Frontend: Add web vitals and API metrics collection
- Install web-vitals library (v4.0.0) for Core Web Vitals tracking
- Create metrics utility module for FCP, LCP, CLS, INP, TTFB collection
- Implement useTrackedFetch hook for automatic API call metrics (method, endpoint, status, duration)
- Initialize web vitals tracking in App component on mount
- Provide exportMetrics() for sending metrics to backend
- Testing:
- Add comprehensive backend metrics tests (9 tests, 100% coverage)
- Add comprehensive frontend metrics tests (10 tests)
- All tests passing
- Documentation:
- Expand Docs/Observability.md with complete APM section
- Include metrics reference, integration examples (Prometheus, Datadog, NewRelic)
- Add troubleshooting guide and best practices for cardinality management
- Update Tasks.md to mark APM task as complete
Metrics exposed:
- bangui_http_requests_total: HTTP request count by method, endpoint, status
- bangui_http_request_duration_seconds: Request latency histogram
- bangui_http_active_requests: Active request gauge
- Web Vitals: CLS, FCP, INP, LCP, TTFB with ratings
- API metrics: endpoint, method, status, duration, timestamp
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
59 lines
2.0 KiB
JSON
59 lines
2.0 KiB
JSON
{
|
|
"name": "bangui-frontend",
|
|
"private": true,
|
|
"version": "0.9.19",
|
|
"description": "BanGUI frontend — fail2ban web management interface",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"generate:types": "openapi-typescript http://localhost:8000/api/openapi.json -o src/types/generated.ts",
|
|
"validate:types": "bash scripts/validate-types.sh",
|
|
"build": "npm run generate:types && tsc --noEmit && vite build",
|
|
"preview": "vite preview",
|
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
"typecheck": "tsc --noEmit",
|
|
"format": "prettier --write 'src/**/*.{ts,tsx,css}'",
|
|
"test": "vitest run --config vitest.config.ts",
|
|
"coverage": "vitest run --config vitest.config.ts --coverage"
|
|
},
|
|
"dependencies": {
|
|
"@fluentui/react-components": "^9.55.0",
|
|
"@fluentui/react-icons": "^2.0.257",
|
|
"d3-geo": "^3.1.1",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"react-router-dom": "^6.27.0",
|
|
"recharts": "^3.8.0",
|
|
"topojson-client": "^3.1.0",
|
|
"web-vitals": "^4.0.0",
|
|
"world-atlas": "^2.0.2"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.13.0",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/d3-geo": "^3.1.0",
|
|
"@types/node": "^25.3.2",
|
|
"@types/react": "^18.3.12",
|
|
"@types/react-dom": "^18.3.1",
|
|
"@types/topojson-client": "^3.0.0",
|
|
"@typescript-eslint/eslint-plugin": "^8.13.0",
|
|
"@typescript-eslint/parser": "^8.13.0",
|
|
"@vitejs/plugin-react": "^4.3.3",
|
|
"@vitest/coverage-v8": "^4.0.18",
|
|
"eslint": "^9.13.0",
|
|
"eslint-config-prettier": "^9.1.0",
|
|
"eslint-plugin-react": "^7.37.5",
|
|
"eslint-plugin-react-hooks": "^5.0.0",
|
|
"jiti": "^2.6.1",
|
|
"jsdom": "^28.1.0",
|
|
"openapi-typescript": "^7.13.0",
|
|
"prettier": "^3.3.3",
|
|
"typescript": "^5.6.3",
|
|
"typescript-eslint": "^8.56.1",
|
|
"vite": "^5.4.11",
|
|
"vitest": "^4.0.18"
|
|
}
|
|
}
|