From 3640ef8187faa922a7eeedc22870dc1ea1b644db Mon Sep 17 00:00:00 2001
From: Noaman-Akhtar <akhtarnoaman@gmail.com>
Date: Thu, 23 Apr 2026 13:15:35 +0530
Subject: [PATCH] fix(frontend): display detailed backend API errors in global
 UI

Signed-off-by: Noaman-Akhtar <akhtarnoaman@gmail.com>
---
 frontend/app/page.tsx              | 2 +-
 frontend/components/mainScreen.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 441f00e..a7685a0 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -33,7 +33,7 @@ export default function Home() {
       ) : error ? (
         <Error error={error} setError={setError} setResults={setResults} />
       ) : (
-        <MainScreen setResults={setResults} />
+        <MainScreen setResults={setResults} setError={setError} />
       )}
     </div>
   );
diff --git a/frontend/components/mainScreen.tsx b/frontend/components/mainScreen.tsx
index 6f51781..bb8e356 100644
--- a/frontend/components/mainScreen.tsx
+++ b/frontend/components/mainScreen.tsx
@@ -16,7 +16,8 @@ MainScreen Component
 
 const MainScreen: React.FC<{
   setResults: React.Dispatch<React.SetStateAction<ResultsData | null>>;
-}> = ({ setResults }) => {
+  setError: React.Dispatch<React.SetStateAction<string | null>>;
+}> = ({ setResults, setError }) => {
   const [isUploading, setIsUploading] = useState(false);
   const [uploadMsg, setUploadMsg] = useState<string | null>(null);
 
@@ -89,9 +90,10 @@ const MainScreen: React.FC<{
 
       // console.log("API Response:", response.data);
       setResults(response as ResultsData);
-    } catch (error) {
+    } catch (error: any) {
       console.error("Error:", error);
-      setUploadMsg("Text Analyzing Failed. Please try again.");
+      const errorMessage = error.response?.data?.error || error.message || "Text Analyzing Failed. Please try again.";
+      setError(errorMessage);
     } finally {
       setIsUploading(false);
     }