Angular Application Performance Monitoring

Implementing monitoring in Angular applications is crucial for identifying performance bottlenecks, tracking errors, and understanding user behavior. This challenge asks you to build a basic monitoring service that logs performance metrics and errors to the console, simulating a real-world monitoring system. This will help you understand how to integrate monitoring into your Angular applications and how to track key performance indicators.

Problem Description

You need to create an AngularMonitoringService that provides the following functionalities:

1. Log Performance Metrics: The service should log the time taken for specific Angular lifecycle events (e.g., component initialization, route navigation). You'll be provided with functions to call before and after these events to measure the duration.
2. Error Tracking: The service should catch and log any unhandled exceptions that occur within the Angular application. This includes errors thrown in components, services, or pipes.
3. Custom Logging: The service should provide a method to log custom messages with a specified severity level (e.g., "info", "warn", "error").
4. Configuration: The service should accept a configuration object during initialization, allowing you to control the logging level (e.g., disable logging entirely).

Key Requirements:

• The service should be injectable into other Angular components and services.
• The logging should be non-blocking to avoid impacting application performance.
• The service should handle errors gracefully and avoid throwing exceptions itself.
• The configuration object should have at least a loggingEnabled property (boolean) and a defaultSeverity property (string - "info", "warn", or "error").

Expected Behavior:

• When a lifecycle event is logged, the service should output a message to the console including the event name and the duration.
• When an unhandled exception occurs, the service should output an error message to the console including the error message, stack trace, and timestamp.
• Custom log messages should be output to the console with the specified severity level.
• If loggingEnabled is false in the configuration, no logging should occur.

Edge Cases to Consider:

• What happens if the defaultSeverity is an invalid value? (Handle gracefully, perhaps defaulting to "info").
• How to handle asynchronous operations within the lifecycle event timing? (For simplicity, assume synchronous operations for this challenge).
• What happens if the application throws an error during initialization of the monitoring service itself? (Ensure the application doesn't crash).

Examples

Example 1:

Input: Component Initialization - start time: 1678886400000
Input: Component Initialization - end time: 1678886400100
Output:  [Console Log] "Component Initialization: 100ms"
Explanation: The service logs the duration of the component initialization event.

Example 2:

Input: Route Navigation - start time: 1678886400200
Input: Route Navigation - end time: 1678886400350
Output: [Console Log] "Route Navigation: 150ms"
Explanation: The service logs the duration of the route navigation event.

Example 3:

Input: Unhandled Exception: TypeError: Cannot read properties of undefined (reading 'name')
Output: [Console Log] "ERROR: TypeError: Cannot read properties of undefined (reading 'name')\nStack Trace: ...\nTimestamp: ... "
Explanation: The service catches and logs an unhandled exception with its message and stack trace.

Constraints

• The service must be written in TypeScript.
• The service should not use any external libraries (e.g., no third-party logging libraries). Use the browser's console object for logging.
• The service should be designed to have minimal impact on application performance.
• The service should be compatible with Angular versions 12 and above.
• The maximum time allowed for the service to initialize should be less than 50ms.

Notes

• Consider using RxJS Observables to handle asynchronous operations if you want to extend the service later.
• Think about how to structure the service to make it extensible and configurable.
• Focus on the core functionalities described in the problem description. Advanced features like sending logs to a remote server are beyond the scope of this challenge.
• You will need to create a simple Angular project to test your service. You can use the Angular CLI to generate a new project.
• The start and end time parameters for lifecycle events are provided as numbers representing milliseconds since the epoch. You should calculate the difference to determine the duration.