Add API error handling in App.js for graceful UI fallback

[chigwell]

User Story
As a user,
I want errors during API calls to be handled gracefully
so that the UI remains functional and informative during backend downtime.

Background
The current fetch call in frontend/src/App.js lacks error handling, leading to uncaught promise rejections if the backend is unavailable. This results in a broken UI (e.g., blank message display) and no feedback for users. The useEffect hook in App.js directly chains .then() without a .catch(), leaving no fallback for failed API requests.

Acceptance Criteria

• Modify frontend/src/App.js to wrap the fetch call in a try/catch block or use .catch() on the promise chain.
• Implement error state management (e.g., const [error, setError] = useState(null)) to display user-friendly messages like "Service unavailable" when API calls fail.
• Ensure errors are logged to the console for debugging (e.g., console.error("API fetch failed:", error)).
• Validate by:
  • Temporarily stopping the backend container and verifying the UI shows an error message instead of crashing.
  • Checking the browser console for logged error details during failures.
  • Ensuring the existing "Hello World" UI component remains visible during errors.