Example QA Report: API Timeout Handling

Bug Title: Trip generation fails silently on slow networks (infinite loading state)

Severity: High

Environment: Chrome 120, Windows 11, Network Throttling (Slow 3G)

Description:

When a user attempts to generate a trip plan on an unstable or slow network connection, the application fails to handle the API timeout. The UI remains stuck in the loading state indefinitely without displaying any error.

Steps to reproduce:

1. Open the application dashboard and launch Chrome DevTools (F12).

2. Navigate to the Network tab and select "Slow 3G" throttling.

3. Enter valid inputs (e.g., Destination: "Paris", Days: "3") and click "Generate Plan".

4. Observe the UI behaviour for 30 seconds.

Expected behaviour: The application should implement a client-side timeout (e.g., 15s). If the server does not respond, the app should display a toast notification ("Connection timed out, please try again") and reset the "Generate" button to its active state.

Actual behaviour:

The loading spinner keeps spinning indefinitely. In the console, an uncaught (in promise) Error" Network Error is logged, but the UI does not catch this exception.

Suggested Fix:

Wrap the async API call in a try/catch block and implement a .timeout() limit on the fetch request to trigger the error state UI.

First I try to reproduce the bug and find the exact cause. Then I check for edge cases. Finally I clearly document everything including a summary, steps to reproduce the bug, expected vs actual behaviour, and any evidence like screenshots or logs if relevant.