Monitoring and Logging
Relevant source files
The following files were used as context for generating this wiki page:
The Monitoring and Logging system in the analiza-este-lovable-tamv project provides a centralized mechanism for capturing application events, performance metrics, and error states. It is designed to ensure system observability and facilitate rapid debugging by tracking user interactions and system health in real-time.
This module serves as the primary diagnostic layer, integrating frontend telemetry with backend analytical endpoints. It allows developers to monitor application state changes and identify bottlenecks through structured data collection.
Sources: README.md:1-2, src/utils/logger.ts
System Architecture
The monitoring architecture follows a decoupled pattern where local logging utilities feed into a centralized monitoring hook. This hook manages the lifecycle of performance data and dispatches it to external API endpoints.
The diagram above illustrates the data flow from the user interface through the custom monitoring hooks and utilities to the final storage destinations.
Sources: src/hooks/useMonitoring.ts, src/utils/logger.ts
Logging Infrastructure
The core logging functionality is encapsulated in a utility that categorizes messages by severity levels. This ensures that critical system failures are prioritized over informational trace logs.
Log Levels and Methods
| Level | Description | Target Destination |
|---|---|---|
| INFO | General operational entries | Console & API |
| WARN | Non-critical issues or deprecations | Console & API |
| ERROR | Critical failures and exceptions | Console & API & Error Tracker |
| DEBUG | Verbose output for development | Console Only |
Sources: src/utils/logger.ts:5-25
Structured Log Objects
Logs are structured as JSON objects to facilitate easier parsing and searching in log aggregation tools. Each log entry typically contains a timestamp, the source module, and the message payload.
interface LogEntry {
timestamp: string;
level: 'info' | 'warn' | 'error' | 'debug';
module: string;
message: string;
data?: Record<string, any>;
}
Sources: src/utils/logger.ts:1-10
Performance Monitoring
Application performance is tracked using the useMonitoring hook, which captures render times, API latency, and resource utilization.
Data Collection Flow
The sequence diagram shows how metrics are batched before being sent to the monitoring API to reduce network overhead.
Sources: src/hooks/useMonitoring.ts:15-40, src/api/monitoringApi.ts:10-22
Monitoring Dashboard
The MonitoringDashboard component provides an internal interface for developers to view real-time metrics and historical log data directly within the application.
Key Features
- Real-time Log Stream: Displays incoming logs as they occur.
- Metric Visualization: Graphs showing CPU/Memory usage and API response times.
- Error Summary: A dedicated section highlighting the most frequent error occurrences.
Sources: src/components/MonitoringDashboard.tsx:5-50
API Configuration
The monitoring system communicates with a set of dedicated endpoints defined in the API layer.
| Endpoint | Method | Purpose |
|---|---|---|
/api/logs | POST | Submits a single or batch of log entries. |
/api/metrics | POST | Submits performance telemetry data. |
/api/health | GET | Returns the current health status of the monitoring service. |
Sources: src/api/monitoringApi.ts:5-30
Conclusion
The Monitoring and Logging module is a critical component of the analiza-este-lovable-tamv infrastructure. By providing structured logging, performance tracking, and a visual dashboard, it ensures the project remains maintainable and observable throughout its lifecycle. This setup enables proactive issue detection and data-driven performance optimization.