Angular Performance Monitoring Dashboard

In modern web applications, performance is paramount to user experience and engagement. Slow-loading pages or unresponsive interfaces can lead to user frustration and abandonment. This challenge requires you to build a foundational performance monitoring system within an Angular application to track key metrics and visualize them in a simple dashboard.

Problem Description

Your task is to implement a system that monitors and reports on several key performance indicators (KPIs) within an Angular application. You will need to create services and components to capture these metrics and display them in a clear, digestible dashboard. The goal is to provide developers with insights into the application's performance characteristics.

Key Requirements:

1. Component Load Time Monitoring: Track how long it takes for individual Angular components to initialize and render.
2. HTTP Request Performance: Monitor the duration of HTTP requests made by the application.
3. Rendering Performance: Measure the time taken for the initial rendering of the application's main view.
4. Data Visualization: Display the collected performance data in a simple dashboard component using a basic chart or list format.
5. Service-Based Architecture: Encapsulate performance monitoring logic within dedicated Angular services.
6. Configuration: Allow for basic configuration of monitoring (e.g., enabling/disabling specific metrics).

Expected Behavior:

• When the application loads, component initialization times should be logged.
• When an HTTP request is made (e.g., using HttpClient), its start and end times, along with the duration, should be recorded.
• The initial rendering of the application's main content should have its duration measured.
• A dedicated "Performance Dashboard" component should display the average component load time, average HTTP request duration, and total application render time.

Edge Cases to Consider:

• Applications with many components loading concurrently.
• HTTP requests that are very short or very long.
• Situations where HTTP requests might fail or time out (for simplicity, focus on successful requests for this challenge).
• Disabling monitoring to avoid overhead in production if not needed.

Examples

Example 1: Component Load Time

Let's say you have a UserProfileComponent that takes 50ms to initialize and render.

• Input: UserProfileComponent initializes.
• Output: A logged entry like: { component: 'UserProfileComponent', duration: 50 }. The average component load time displayed on the dashboard will be updated accordingly.

Example 2: HTTP Request Performance

An HTTP GET request to /api/users takes 250ms to complete.

• Input: An HttpClient GET request to /api/users is initiated and completed.
• Output: A logged entry like: { url: '/api/users', method: 'GET', duration: 250 }. The average HTTP request duration on the dashboard will be updated.

Example 3: Initial App Render Time

The application's main view, including its initial components, takes 500ms to render for the first time.

• Input: Application boots up and completes its initial rendering.
• Output: A single logged value for the total render time: { metric: 'appRenderTime', value: 500 }. This value will be directly displayed on the dashboard.

Constraints

• Angular Version: Angular 15 or later.
• Language: TypeScript.
• Metric Granularity: Report durations in milliseconds.
• Data Aggregation: For component load times and HTTP requests, calculate and display the average duration over a session. For initial app render, display the single measured value.
• No External Libraries (for core monitoring): You should implement the core monitoring logic using Angular's built-in features and standard TypeScript. You may use a charting library for visualization if you wish, but the core data collection should be custom.
• Performance Impact: The monitoring solution itself should have minimal performance overhead.

Notes

• Consider using Angular's lifecycle hooks (ngOnInit, ngAfterViewInit) to capture component load times.
• Angular's HttpClient can be intercepted using HTTP Interceptors to track request durations.
• The performance API in the browser can be useful for measuring overall rendering times.
• For displaying data, a simple list or a basic bar chart would suffice.
• Think about how you'll store and aggregate the metrics over time within the application's session.