-
-
Notifications
You must be signed in to change notification settings - Fork 49
Architecture and Design Backend Architecture Blueprint Organization Health Blueprint
- Introduction
- Project Structure
- Core Components
- Architecture Overview
- Detailed Component Analysis
- Dependency Analysis
- Performance Considerations
- Troubleshooting Guide
- Conclusion
This document describes the health monitoring blueprint for the ChordMini application. It covers health check endpoints, system status monitoring, service availability verification, and integration with load balancers, container orchestration, and monitoring infrastructure. It also documents response formats, status codes, and operational strategies for cold starts and rate limiting.
The health monitoring system spans both the frontend and backend:
- Frontend Next.js routes provide health and status-check proxies to avoid CORS issues and to coordinate monitoring.
- Backend Flask exposes health endpoints and integrates rate limiting and CORS.
- Monitoring utilities provide safe timeouts and environment-aware error handling.
- Docker Compose defines healthchecks for containerized deployments.
- Post-deployment verification scripts validate end-to-end connectivity and cold-start behavior.
graph TB
subgraph "Frontend (Next.js)"
FE_H["/api/health<br/>GET"]
FE_SC["/api/status-check<br/>POST"]
STATUS_PAGE["/status<br/>Status Page"]
end
subgraph "Backend (Flask)"
BE_ROOT["/ (health)<br/>GET"]
BE_HEALTH["/health<br/>GET"]
end
UTILS["Environment Utils<br/>createSafeTimeoutSignal"]
FE_H --> BE_ROOT
FE_SC --> BE_ROOT
FE_SC --> BE_HEALTH
STATUS_PAGE --> FE_H
STATUS_PAGE --> FE_SC
FE_H --> UTILS
FE_SC --> UTILS
Diagram sources
Section sources
- route.ts:1-58
- route.ts:1-103
- routes.py:1-31
- page.tsx:1-240
- environmentUtils.ts:1-147
- docker-compose.prod.yml:58-91
- Frontend health proxy: Validates backend health and returns a normalized response.
- Frontend status-check proxy: Probes arbitrary backend endpoints and interprets expected errors.
- Backend health endpoints: Lightweight endpoints for load balancer and orchestrator health checks.
- Status page: Orchestrates concurrent checks across key endpoints and renders system status.
- Environment utilities: Provides safe timeout signals to accommodate cold starts and platform constraints.
- Configuration and rate limiting: Centralizes rate-limit policies and CORS origins for health endpoints.
Section sources
- route.ts:11-57
- route.ts:11-102
- routes.py:18-31
- page.tsx:17-47
- useRateLimiting.ts:149-322
- environmentUtils.ts:63-84
- config.py:47-60
- extensions.py:41-59
The health monitoring architecture ensures:
- Load balancers and container orchestrators can probe backend health via simple endpoints.
- Frontend routes act as proxies to avoid CORS and to normalize responses for monitoring.
- Status page aggregates endpoint health and displays overall system status.
- Safe timeouts accommodate cold starts and platform-specific constraints.
sequenceDiagram
participant Client as "Browser"
participant StatusPage as "Status Page"
participant FE_Proxy as "Frontend Proxy<br/>/api/health"
participant StatusRoute as "Frontend Proxy<br/>/api/status-check"
participant Backend as "Flask Backend"
Client->>StatusPage : Navigate to /status
StatusPage->>FE_Proxy : GET /api/health
FE_Proxy->>Backend : GET /
Backend-->>FE_Proxy : 200 {"status" : "healthy"}
FE_Proxy-->>StatusPage : 200 {"success" : true,"data" : {"status" : "healthy"}}
StatusPage->>StatusRoute : POST /api/status-check {endpoint : "/api/model-info"}
StatusRoute->>Backend : GET /api/model-info
Backend-->>StatusRoute : 200 {"success" : true,...}
StatusRoute-->>StatusPage : 200 {"success" : true,"status" : 200,"data" : {...}}
Diagram sources
- Backend health endpoints:
- Root: Returns a simple health payload suitable for load balancers.
- Dedicated health: Minimal JSON response indicating service health.
- Frontend health proxy:
- Proxies to backend root endpoint.
- Applies a safe timeout to account for cold starts.
- Normalizes response with a success flag and status field.
Response format (frontend proxy):
- Success: { success: true, data: { status: "healthy", message?: "..."}, status: "healthy" }
- Failure: { success: false, error: string, status: "unhealthy" } with HTTP status matching backend
Status codes:
- 200 on success
- Non-200 maps to the underlying backend status
Section sources
- Purpose: Probe arbitrary backend endpoints and interpret expected errors.
- Behavior:
- For file-upload endpoints, sends POST without body to expect 400.
- For Genius lyrics, expects 500 or 400 depending on API key configuration.
- For other endpoints, performs GET.
- Parses response text and treats expected errors as healthy.
- Response format:
- { success: boolean, status: number, data: object|string, error?: string, expectedError: boolean }
- On timeout: { success: false, error: "...", timeout: true } with 408
Status codes:
- 200 on success
- 400 for expected file-upload errors
- 408 on timeout
- 500 on other errors (unless expected)
Section sources
- Orchestrated by the status page:
- Concurrently checks key endpoints: root health, model info, beat detection, chord recognition, Genius lyrics.
- Computes overall status (all online, partial outage, offline).
- Displays response times and last-checked timestamps.
- Detection logic:
- Treats long response times and specific error messages as cold start indicators.
- Distinguishes between offline and “warming up” states.
- Handles API key/service misconfiguration as “online but misconfigured.”
Section sources
- Safe timeout signal:
- Uses platform-aware AbortSignal.timeout when available; otherwise falls back to AbortController with setTimeout.
- Validates timeout values and logs fallback usage.
- Cold start detection:
- Interprets long response times and specific error messages as warming-up states.
- Adjusts status rendering to “checking” during cold starts.
Section sources
- Rate limits:
- Health endpoints use a higher rate limit allowance compared to heavy-processing endpoints.
- CORS:
- Configured origins include development, internal containers, and Vercel domains.
- Extensions:
- Flask-Limiter initialized with optional Redis storage; logging configured centrally.
Section sources
The health monitoring system exhibits clear separation of concerns:
- Frontend routes depend on backend endpoints and environment utilities.
- Backend health endpoints depend on configuration and rate-limiting extensions.
- Status page composes frontend proxies and orchestrates checks.
graph TB
FE_HEALTH["Frontend Health Proxy"]
FE_STATUS["Frontend Status Proxy"]
BE_HEALTH["Backend Health Routes"]
CFG["Backend Config"]
EXT["Backend Extensions"]
ENV["Environment Utils"]
STATUS_PAGE["Status Page"]
FE_HEALTH --> BE_HEALTH
FE_STATUS --> BE_HEALTH
FE_HEALTH --> ENV
FE_STATUS --> ENV
BE_HEALTH --> CFG
BE_HEALTH --> EXT
STATUS_PAGE --> FE_HEALTH
STATUS_PAGE --> FE_STATUS
Diagram sources
- route.ts:11-57
- route.ts:11-102
- routes.py:18-31
- config.py:47-60
- extensions.py:41-59
- environmentUtils.ts:63-84
- page.tsx:17-47
Section sources
- route.ts:1-58
- route.ts:1-103
- routes.py:1-31
- config.py:1-215
- extensions.py:1-93
- environmentUtils.ts:1-147
- page.tsx:1-240
- Cold starts:
- Expect delays for serverless backends; the status page and verification scripts tolerate initial timeouts.
- Frontend proxies use extended timeouts to account for cold starts.
- Concurrency:
- The status page checks multiple endpoints concurrently to minimize total latency.
- Timeouts:
- Platform-aware timeout creation prevents hard hangs in environments with strict limits.
[No sources needed since this section provides general guidance]
Common scenarios and diagnostics:
- Backend warming up:
- Symptoms: 500/502/503/504 responses or timeouts shortly after deployment.
- Resolution: Allow time for serverless cold start; subsequent requests succeed.
- API key/service misconfiguration:
- Symptoms: 500 responses from Genius lyrics; endpoint remains “online” but misconfigured.
- Resolution: Verify API keys and service availability.
- CORS issues:
- Symptoms: Frontend cannot call backend directly.
- Resolution: Use frontend proxies; ensure CORS origins include deployment domain.
- Rate limiting:
- Symptoms: 429 responses on health checks.
- Resolution: Health endpoints have relaxed limits; reduce frequency or adjust thresholds.
Verification scripts:
- Post-deployment verification tolerates backend cold starts and focuses on critical frontend failures.
- Pre-deployment checklist retries backend health checks with increasing timeouts.
Section sources
- post-deployment-verification.sh:97-114
- post-deployment-verification.sh:154-167
- pre-deployment-checklist.sh:212-237
- useRateLimiting.ts:211-217
The health monitoring blueprint provides a robust, cross-layer solution for verifying system health:
- Lightweight backend endpoints enable load balancer and orchestrator integration.
- Frontend proxies normalize responses and avoid CORS pitfalls.
- The status page offers real-time visibility with cold-start awareness.
- Safe timeouts and environment-aware logic improve reliability across platforms.
[No sources needed since this section summarizes without analyzing specific files]
-
Backend Architecture
- Blueprint Organization
- Machine Learning Integration
- Service Layer Architecture
- Backend Architecture
- Error Handling and Logging
- Flask Application Factory
- Frontend Architecture
- Architecture and Design
- Deployment Architecture
- Audio Pipeline
- Audio Playback System
- Audio Processing and Analysis
- Real-time Audio Analysis
- YouTube Integration
- Blueprint Services
- Machine Learning Services
- Backend Services
- External Integrations
- Flask Application Architecture
- Melody Transcription
- Song Segmentation
- Experimental Feature Management
- Experimental Features
- API Integration and Service Layer
-
Component Library and UI System
- Analysis Interface Components
- Chatbot Interface Component
- Chord Analysis Components
- Chord Playback Components
- Common Components
- Component Library and UI System
- Homepage and Landing Components
- Layout and Utility Components
- Lyrics Display Components
- Piano Visualizer Components
- Settings and Configuration Components
- State Management and Data Flow
- Frontend Application
- Next.js Application Architecture
- Beat Detection Models
- Chord Recognition Models
- Adding New Models
- Machine Learning Models
- Model Management
- Model Training and Evaluation