Robust Error Handling in a Vue.js Application with TypeScript

This challenge focuses on implementing robust error handling within a Vue.js application using TypeScript. Effective error handling is crucial for providing a good user experience and debugging applications. You'll be building a component that fetches data and gracefully handles potential errors during the fetch process, displaying informative messages to the user.

Problem Description

You are tasked with creating a Vue.js component called DataFetcher that fetches data from a provided URL. The component should:

Fetch Data: Use the fetch API to retrieve data from the URL passed as a prop.
Handle Success: If the fetch is successful (status code 200-299), display the fetched data in a designated area.
Handle Errors: If the fetch encounters an error (network error, server error, etc.), display an appropriate error message to the user. The error message should be informative, indicating the type of error encountered (e.g., "Network Error", "Server Error", "Invalid Data").
Loading State: While the data is being fetched, display a loading indicator (e.g., "Loading...").
TypeScript: The entire component must be written in TypeScript, ensuring type safety and code clarity.
Prop Validation: The URL should be a required prop, and the component should validate that it is a string.

Expected Behavior:

Upon component mount, the fetch request should be initiated.
While fetching, the loading indicator should be visible.
On successful fetch, the data should be displayed.
On error, an appropriate error message should be displayed, replacing the loading indicator.
The component should re-render correctly when the URL prop changes.

Edge Cases to Consider:

Invalid URL format (though validation will prevent this, consider how the component behaves if an invalid URL is somehow passed).
Network connectivity issues.
Server returning non-JSON data.
Server returning JSON with an unexpected structure (e.g., missing fields). While you don't need to fully validate the JSON structure, consider how the component should behave if the expected data isn't present.
CORS issues (though this is outside the scope of the core error handling, consider how it might manifest).

Examples

Example 1:

Input: URL = "https://jsonplaceholder.typicode.com/todos/1"
Output: Displays the JSON data from the URL:  { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }
Explanation: A successful fetch and display of the data.

Example 2:

Input: URL = "https://jsonplaceholder.typicode.com/nonexistent-endpoint"
Output: Displays the error message: "Server Error: 404 Not Found"
Explanation: The fetch request fails with a 404 error, and the error message is displayed.

Example 3:

Input: URL = "invalid-url"
Output: Displays the error message: "Network Error: Failed to fetch"
Explanation: The fetch request fails due to an invalid URL, resulting in a network error.

Constraints

The component should be self-contained and reusable.
The component should not rely on external libraries beyond Vue.js and TypeScript.
The error messages should be user-friendly and informative.
The component should handle errors gracefully without crashing the application.
The URL prop must be a string.
The component should be able to handle URLs that return a status code outside the 200-299 range.

Notes

Consider using async/await for cleaner asynchronous code.
Think about how to structure your error handling logic to keep the component readable and maintainable.
You can use a simple loading indicator like a spinner or text.
Focus on the error handling aspects; you don't need to implement complex data validation beyond checking for the existence of the data.
The fetch API's catch block is your primary tool for handling errors. Inspect the error object to determine the type of error.