Improve Api handling

Author: Matthbo

src/main/frontend/app/components/directory-picker/directory-picker.tsx

@@ -36,11 +36,11 @@ export default function DirectoryPicker({
       setEntries(result.entries)
       setCurrentPath(result.resolvedPath)
       setParentPath(result.parentPath)
-    } catch (error_) {
-      if (error_ instanceof ApiError && error_.status === 403) {
+    } catch (error) {
+      if (error instanceof ApiError && error.httpCode === 403) {
         setError('Access denied')
       } else {
-        setError(error_ instanceof Error ? error_.message : 'Failed to load directories')
+        setError(error instanceof Error ? error.message : 'Failed to load directories')
       }
     } finally {
       setLoading(false)

src/main/frontend/app/components/toast.tsx

@@ -18,13 +18,13 @@ const toastStyles = {
     container: defaultStyle,
     card: `${toastBaseCard} bg-error`,
     icon: '',
-    defaultDuration: 2000,
+    defaultDuration: 5000,
   },
   WARNING: {
     container: defaultStyle,
     card: `${toastBaseCard} bg-warning`,
     icon: '⚠️',
-    defaultDuration: 3000,
+    defaultDuration: 5000,
   },
   INFO: {
     container: defaultStyle,
@@ -36,7 +36,7 @@ const toastStyles = {
     container: defaultStyle,
     card: `${toastBaseCard} bg-success`,
     icon: '✅',
-    defaultDuration: 3000,
+    defaultDuration: 2000,
   },
 } as const
 

src/main/frontend/app/routes/projectlanding/project-landing.tsx

@@ -4,6 +4,7 @@ import FfIcon from '/icons/custom/ff!-icon.svg?react'
 import ArchiveIcon from '/icons/solar/Archive.svg?react'
 import { fetchInstanceConfigurations, type FFConfiguration } from '~/services/frank-framework-service'
 import { useProjectStore } from '~/stores/project-store'
+import { ApiError } from '~/utils/api'
 
 import ConfigurationRow from './configuration-row'
 import Search from '~/components/search/search'
@@ -81,6 +82,10 @@ export default function ProjectLanding() {
           setFFInstanceName(ffInstance.name)
           setFFConfiguration(ffInstance.configurations)
         })
+        .catch((error) => {
+          if (error instanceof ApiError && error.httpCode === 404) return
+          showErrorToast(error.message)
+        })
         .finally(() => setIsDiscovering(false))
     }
 

src/main/frontend/app/utils/api.ts

@@ -19,33 +19,29 @@ const getAuthToken = () => {
 }
 
 interface BackendErrorResponse {
-  httpStatus: number
-  messages: string[]
-  errorCode: string
+  status: string
+  error: string
 }
 
 export class ApiError extends Error {
   constructor(
-    public status: number,
-    public messages?: string[],
-    public errorCode?: string,
+    public status: string,
+    public error: string,
+    public httpCode: number,
   ) {
-    super(messages ? messages.join(', ') : status.toString())
+    super(error)
     this.name = 'ApiError'
   }
 }
 
 export async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> {
   const isFormData = options?.body instanceof FormData
 
-  const defaultHeaders: Record<string, string> =
-    options?.body && !isFormData ? { 'Content-Type': 'application/json' } : {}
-
   const headers: Record<string, string> = {
-    ...defaultHeaders,
-    'X-Session-ID': getAnonymousSessionId(),
     ...(options?.headers as Record<string, string>),
+    'X-Session-ID': getAnonymousSessionId(),
   }
+  if (options?.body && !isFormData) headers['Content-Type'] = 'application/json'
 
   const token = getAuthToken()
   if (token) {
@@ -61,15 +57,11 @@ export async function apiFetch<T>(path: string, options?: RequestInit): Promise<
     const contentType = response.headers.get('content-type')
     if (contentType?.includes('application/json')) {
       const error: BackendErrorResponse = await response.json()
-      throw new ApiError(error.httpStatus, error.messages, error.errorCode)
+      throw new ApiError(error.status, error.error, response.status)
     }
-    throw new ApiError(response.status, [response.statusText])
-  }
-
-  const contentType = response.headers.get('content-type')
-  if (contentType?.includes('application/json')) {
-    return response.json()
+    throw new ApiError('Server Error', `HTTP ${response.status} - ${response.statusText}`, response.status)
   }
 
-  return undefined as T
+  // assume the response is in json as our API should always do, errors can be caught with <promise>.catch()
+  return response.json()
 }