fix(ui): handle request error in admin panel

ee/tabby-ui/app/(dashboard)/system/components/cluster.tsx

@@ -19,6 +19,7 @@ import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'
 import { Skeleton } from '@/components/ui/skeleton'
 import { CopyButton } from '@/components/copy-button'
+import { ErrorView } from '@/components/error-view'
 import LoadingWrapper from '@/components/loading-wrapper'
 
 import WorkerCard from './worker-card'
@@ -48,8 +49,8 @@ function toBadgeString(str: string) {
 }
 
 export default function Workers() {
-  const { data: healthInfo } = useHealth()
-  const { data: workers, fetching } = useWorkers()
+  const { data: healthInfo, error: healthError } = useHealth()
+  const { data: workers, isLoading, error: workersError } = useWorkers()
   const [{ data: registrationTokenRes }, reexecuteQuery] = useQuery({
     query: getRegistrationTokenDocument
   })
@@ -60,6 +61,12 @@ export default function Workers() {
     }
   })
 
+  const error = healthError || workersError
+
+  if (error) {
+    return <ErrorView title={error?.message} />
+  }
+
   if (!healthInfo) return
 
   return (
@@ -84,7 +91,7 @@ export default function Workers() {
       <Usage />
       <Separator />
       <LoadingWrapper
-        loading={fetching}
+        loading={isLoading}
         fallback={<Skeleton className="mt-3 h-32 w-full lg:w-2/3" />}
       >
         <>

ee/tabby-ui/components/error-view.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { ReactNode } from 'react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+export function ErrorView({
+  title,
+  description,
+  className,
+  children,
+  statusText,
+  hideChildren
+}: {
+  title?: string
+  description?: string
+  className?: string
+  hideChildren?: boolean
+  children?: ReactNode
+  statusText?: string
+}) {
+  let defaultTitle = 'Something went wrong'
+  let defaultDescription = 'Oops! Please try again later.'
+  let displayTitle = ''
+  let displayDescription = description || defaultDescription
+
+  switch (statusText) {
+    case 'Too Many Requests':
+      displayTitle = 'Too Many Requests'
+      break
+    case 'Bad Request':
+      displayTitle = 'Bad Request'
+      break
+    default:
+      displayTitle = title || defaultTitle
+  }
+
+  return (
+    <div className={cn('mx-auto mt-8 max-w-md text-center', className)}>
+      <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
+        {displayTitle}
+      </h1>
+      {!!displayDescription && (
+        <p className="mt-4 text-muted-foreground">{displayDescription}</p>
+      )}
+      {!hideChildren && (
+        <div>
+          {children ? (
+            children
+          ) : (
+            <Button
+              className={cn('mt-6')}
+              onClick={e => window.location.reload()}
+            >
+              Refresh
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

ee/tabby-ui/lib/hooks/use-health.tsx

@@ -23,8 +23,8 @@ export function useHealth(): SWRResponse<HealthInfo> {
     '/v1/health',
     (url: string) => {
       return fetcher(url, {
-        errorHandler: () => {
-          throw new Error('Unhealth')
+        errorHandler: response => {
+          throw new Error(response?.statusText.toString() || 'Unhealth')
         }
       })
     },

ee/tabby-ui/lib/hooks/use-workers.ts

@@ -31,7 +31,7 @@ function transformHealthInfoToChatWorker(healthInfo: HealthInfo) {
 }
 
 function useWorkers() {
-  const { data: healthInfo, isLoading: fetching } = useHealth()
+  const { data: healthInfo, isLoading, error } = useHealth()
 
   const groupedWorkers = React.useMemo(() => {
     const workers = []
@@ -45,7 +45,7 @@ function useWorkers() {
     return groupBy(workers, 'kind')
   }, [healthInfo])
 
-  return { data: groupedWorkers, fetching }
+  return { data: groupedWorkers, isLoading, error }
 }
 
 export { useWorkers }