Elasticsearch Integration for Performance Data¶
Elasticsearch Integration in the context of front-end performance monitoring involves collecting data via the window.performance API and sending it to Elasticsearch for storage and analysis^[600-developer__tools__front-end-performance-monitoring.md].
Data Collection¶
The primary source of data for this integration is the browser's native window.performance interface^[600-developer__tools__front-end-performance-monitoring.md]. This API provides access to performance-related metrics, including:
- Memory usage (
window.performance.memory) - Navigation events (
window.performance.navigation) - Detailed timing (
window.performance.timing)
The window.performance.timing attribute specifically allows for the calculation of various network and rendering latencies, such as DNS query duration, TCP connection time, and DOM processing time^[600-developer__tools__front-end-performance-monitoring.md].
Data Ingestion Methods¶
Once the performance metrics are calculated, they can be transmitted to the Elasticsearch backend using one of two primary approaches^[600-developer__tools__front-end-performance-monitoring.md]:
- Direct JSON Transmission: Sending the data in JSON format directly to Elasticsearch^[600-developer__tools__front-end-performance-monitoring.md].
- Middleware Integration: Implementing a middleware component to handle the data transfer before it reaches the database^[600-developer__tools__front-end-performance-monitoring.md].
Visualization¶
Integrating with Elasticsearch enables the use of data visualization tools to interpret the performance metrics. A common tool used in conjunction with this setup is [[kibana|Kibana]], which facilitates the statistical analysis and monitoring of the ingested performance data^[600-developer__tools__front-end-performance-monitoring.md].
Related Concepts¶
- [[Web Performance Optimization]]
- [[kibana|Kibana]]
- [[Browser APIs]]