Angular HTTP Interceptor for Request Logging and Error Handling

This challenge focuses on building a reusable HTTP interceptor in Angular. Interceptors allow you to intercept and potentially modify HTTP requests and responses globally within your application, making them invaluable for tasks like logging, authentication, error handling, and request transformation. Your task is to create an interceptor that logs all outgoing requests and handles common HTTP error scenarios gracefully.

Problem Description

You need to create an Angular HTTP interceptor that performs the following actions:

1. Request Logging: Log each outgoing HTTP request to the console. The log should include the request URL, method, and any included headers.
2. Response Error Handling: Intercept HTTP responses and handle common error scenarios (status codes 400, 401, 403, 500). For these error codes, log the error to the console and optionally throw a custom error to be caught by the component. For other status codes, allow the response to proceed normally.
3. Reusability: The interceptor should be designed to be easily reusable across different parts of your Angular application.
4. No Modification of Requests/Responses: The interceptor should not modify the request or response data. It should only log and handle errors.

Key Requirements:

• The interceptor must be injectable into the HttpClientModule.
• The logging should be clear and informative.
• Error handling should be robust and prevent the application from crashing due to unexpected HTTP errors.
• The interceptor should not interfere with successful HTTP requests.

Expected Behavior:

• When a request is made, a log message containing the URL, method, and headers should be printed to the console.
• For HTTP responses with status codes 400, 401, 403, or 500, an error message should be logged to the console, and a custom error (e.g., HttpError) should be thrown.
• For all other HTTP responses, the response should proceed as normal.

Edge Cases to Consider:

• Requests with no headers.
• Requests to different types of endpoints (GET, POST, PUT, DELETE, etc.).
• Error responses with different body content.
• The interceptor should not block or modify successful responses.

Examples

Example 1:

Input: A GET request to 'https://api.example.com/data' with headers {'Authorization': 'Bearer token'}
Output: Console log: "Request: GET https://api.example.com/data Headers: {Authorization: Bearer token}"

Explanation: The interceptor logs the request details to the console.

Example 2:

Input: A POST request to 'https://api.example.com/submit' with status code 400 (Bad Request)
Output: Console log: "Error: HTTP Error 400 - Bad Request" and a custom `HttpError` is thrown.

Explanation: The interceptor intercepts the error response, logs it, and throws a custom error.

Example 3:

Input: A GET request to 'https://api.example.com/success' with status code 200 (OK)
Output: The response is returned to the component without any interception or modification.

Explanation: The interceptor does not interfere with successful responses.

Constraints

• The interceptor must be written in TypeScript.
• The interceptor should not introduce any significant performance overhead. Avoid complex or unnecessary operations.
• The custom error thrown for error responses should be a simple class or interface (e.g., HttpError).
• The interceptor should be compatible with Angular versions 12 and above.

Notes

• Consider using the HttpClient and HttpHandler interfaces from @angular/common/http.
• The handle method of the HttpInterceptor interface is where the core logic of your interceptor resides.
• Think about how to make the logging and error handling configurable (e.g., through dependency injection). While not strictly required, it's a good practice for reusability.
• Focus on the core functionality of logging and error handling. Do not attempt to modify the request or response data.