handle errors better in the ui with an alert component

crawler/frontend/src/components/ActiveQuery.tsx

@@ -1,6 +1,7 @@
 import { getUser } from '@/auth/authService';
 import type { User } from 'oidc-client-ts';
 import React, { useEffect, useState } from 'react';
+import AlertError from './AlertError';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
 import { Progress } from './ui/progress';
 
@@ -17,7 +18,6 @@ const fetchTaskStatus = async (user: User, taskID: string) => {
             'Content-Type': 'application/json',
         },
     });
-
     if (!response.ok) {
         throw new Error(`Failed to fetch task status: ${response.status}`);
     }
@@ -73,6 +73,8 @@ const ActiveQuery: React.FC<ModalProps> = ({
     const [progressPercentage, setProgressPercentage] = useState<number>(0);
     const [taskStatus, setTaskStatus] = useState<TaskStatus | null>(TaskStatus.QUEUED);
     const [lastUpdateTime, setLastUpdateTime] = useState<Date>(new Date());
+    const [fetchStatusError, setFetchStatusError] = useState<string | null>(null);
+    const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false);
 
     // fetch status periodically
     // maybe move to ws one day
@@ -88,7 +90,12 @@ const ActiveQuery: React.FC<ModalProps> = ({
                 } catch (error: any) {
                     clearInterval(interval);
                     setTaskStatus(TaskStatus.FAILED)
-                    alert(error)
+                    setAlertDialogIsOpen(true)
+                    if (error instanceof Error) {
+                        setFetchStatusError(error.message)
+                    } else {
+                        setFetchStatusError('Failed to update task status: ' + error.toString())
+                    }
                 }
                 if (!data) {
                     clearInterval(interval);
@@ -120,7 +127,7 @@ const ActiveQuery: React.FC<ModalProps> = ({
             <div>
                 <HoverCard>
                     <HoverCardTrigger>
-                        {taskStatus && <p>Task status: {taskStatus} </p>}
+                        {taskStatus && <>Task status: {taskStatus} </>}
                         <Progress value={progressPercentage} />
                     </HoverCardTrigger>
                     <HoverCardContent>
@@ -130,7 +137,7 @@ const ActiveQuery: React.FC<ModalProps> = ({
                     </HoverCardContent>
                 </HoverCard>
             </div>
-
+            <AlertError message={fetchStatusError} open={alertDialogIsOpen} setIsOpen={setAlertDialogIsOpen} />
         </>
     )
 };