Skip to content

fix(frontend): display detailed backend API errors in global UI#16

Open
Noaman-Akhtar wants to merge 1 commit into
chaoss:mainfrom
Noaman-Akhtar:main
Open

fix(frontend): display detailed backend API errors in global UI#16
Noaman-Akhtar wants to merge 1 commit into
chaoss:mainfrom
Noaman-Akhtar:main

Conversation

@Noaman-Akhtar
Copy link
Copy Markdown

What this PR does

Previously, when the Flask backend threw an API error (such as a timeout or an invalid URL), the MainScreen component would catch it but only display a hardcoded local toast message ("Text Analyzing Failed. Please try again."). The actual backend error was only visible in the browser console.

This PR passes the global setError prop from page.tsx down to MainScreen.tsx. Now, when an Axios request fails, it extracts the exact error.response.data.error and triggers the beautiful global <Error /> UI component.

Testing Instructions

  1. Run the Next.js frontend (npm run dev).
  2. Keep the Flask backend offline.
  3. Submit the form.
  4. Observe the screen correctly transition to the full-page Error UI with the specific network failure message.

Before :

image

After :

image

Signed-off-by: Noaman-Akhtar <akhtarnoaman@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant