fix: http server not ready when app start (#1040)

* refactor: move generic error into separate file for reusing it

* fix: handle http server not ready into a dedicate page

* test: update

* leftover

* refactor: repalce class error with built-in es2023 cause

* chore: align tsconfig libr and targeet to es2023

Author: peppescg

renderer/src/common/components/__tests__/starting-toolhive.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen, cleanup, act } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { StartingToolHive } from '../starting-toolhive'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../mocks/node'
+
+const mockNavigate = vi.fn()
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('../layout/top-nav/quit-confirmation-listener', () => ({
+  QuitConfirmationListener: () => null,
+}))
+
+vi.mock('../layout/top-nav/window-controls', () => ({
+  WindowControls: () => null,
+}))
+
+vi.mock('electron-log/renderer', () => ({
+  default: {
+    info: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+describe('StartingToolHive', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    vi.useFakeTimers()
+    mockNavigate.mockClear()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('should display loading state with loader', () => {
+    // MSW handler is already configured in customHandlers to return 204
+    render(
+      <QueryClientProvider client={queryClient}>
+        <StartingToolHive />
+      </QueryClientProvider>
+    )
+
+    expect(
+      screen.getByText('Starting ToolHive configuration')
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(/checking your ToolHive configuration/i)
+    ).toBeInTheDocument()
+  })
+
+  it('should throw error when health check fails', async () => {
+    server.use(
+      http.get('*/health', () => {
+        return HttpResponse.error()
+      })
+    )
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <StartingToolHive />
+      </QueryClientProvider>
+    )
+
+    expect(
+      screen.getByText('Starting ToolHive configuration')
+    ).toBeInTheDocument()
+
+    // Advance timers for all retries (10 retries × 300ms = 3000ms)
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(3100)
+    })
+
+    // After all retries fail, error screen should be displayed
+    expect(
+      screen.queryByText('Starting ToolHive configuration')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.getByText(/we're sorry, but something unexpected happened/i)
+    ).toBeInTheDocument()
+
+    expect(screen.getByText(/try reloading the app/i)).toBeInTheDocument()
+    expect(screen.getByText('Try Again')).toBeInTheDocument()
+
+    expect(mockNavigate).not.toHaveBeenCalled()
+  })
+
+  it('should navigate when health check succeeds', async () => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <StartingToolHive />
+      </QueryClientProvider>
+    )
+
+    // Advance timers to complete the query
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(100)
+    })
+
+    // After advancing timers, navigation should have been called
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/group/$groupName',
+      params: { groupName: 'default' },
+    })
+  })
+})

renderer/src/common/components/error/__tests__/index.test.tsx

@@ -1,6 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { Error as ErrorComponent } from '../index'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../../mocks/node'
 
 vi.mock('../../layout/top-nav/minimal', () => ({
   TopNavMinimal: () => {
@@ -21,8 +24,24 @@ Object.defineProperty(window, 'electronAPI', {
 })
 
 describe('Error', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
     vi.clearAllMocks()
+
+    // Mock container-engines endpoint to avoid triggering ConnectionRefusedError
+    server.use(
+      http.get('*/container-engines', () => {
+        return HttpResponse.json({ available: true })
+      })
+    )
   })
 
   it('renders <KeyringError /> when error contains "OS keyring is not available" and platform is Linux', () => {
@@ -31,7 +50,11 @@ describe('Error', () => {
     mockElectronAPI.isLinux = true
     mockElectronAPI.platform = 'linux'
 
-    render(<ErrorComponent error={keyringError} />)
+    render(
+      <QueryClientProvider client={queryClient}>
+        <ErrorComponent error={keyringError} />
+      </QueryClientProvider>
+    )
 
     expect(screen.getByText('System Keyring Cannot be Reached')).toBeVisible()
     expect(
@@ -41,11 +64,17 @@ describe('Error', () => {
 
   it('renders generic error when keyring error occurs on non-Linux platform', () => {
     const keyringError = new Error('OS keyring is not available')
+    // Set containerEngineAvailable to avoid triggering ConnectionRefusedError
+    Object.assign(keyringError, { containerEngineAvailable: true })
 
     mockElectronAPI.isLinux = false
     mockElectronAPI.platform = 'win32'
 
-    render(<ErrorComponent error={keyringError} />)
+    render(
+      <QueryClientProvider client={queryClient}>
+        <ErrorComponent error={keyringError} />
+      </QueryClientProvider>
+    )
 
     expect(screen.getByText('Oops, something went wrong')).toBeVisible()
     expect(screen.getByText('OS keyring is not available')).toBeVisible()
@@ -60,11 +89,17 @@ describe('Error', () => {
   })
 
   it('renders generic error properly', () => {
-    const genericError = new Error('Network connection failed')
+    const genericError = new Error('Something unexpected happened')
+    // Set containerEngineAvailable to avoid triggering ConnectionRefusedError
+    Object.assign(genericError, { containerEngineAvailable: true })
 
-    render(<ErrorComponent error={genericError} />)
+    render(
+      <QueryClientProvider client={queryClient}>
+        <ErrorComponent error={genericError} />
+      </QueryClientProvider>
+    )
 
     expect(screen.getByText('Oops, something went wrong')).toBeVisible()
-    expect(screen.getByText('Network connection failed')).toBeVisible()
+    expect(screen.getByText('Something unexpected happened')).toBeVisible()
   })
 })

renderer/src/common/components/error/generic-error.tsx

@@ -0,0 +1,25 @@
+import { AlertCircle } from 'lucide-react'
+import { LinkErrorDiscord } from '../workloads/link-error-discord'
+import { BaseErrorScreen } from './base-error-screen'
+
+export function GenericError({ error }: { error?: Error }) {
+  return (
+    <BaseErrorScreen
+      title="Oops, something went wrong"
+      icon={<AlertCircle className="text-destructive size-12" />}
+    >
+      <p>
+        We're sorry, but something unexpected happened. Please try reloading the
+        app.
+      </p>
+      {error?.message && (
+        <div className="bg-muted rounded-md p-3 text-sm">
+          <code>{error.message}</code>
+        </div>
+      )}
+      <p>
+        If issues persist, contact the ToolHive team via <LinkErrorDiscord />
+      </p>
+    </BaseErrorScreen>
+  )
+}

renderer/src/common/components/error/index.tsx

@@ -1,10 +1,9 @@
-import { AlertCircle } from 'lucide-react'
-import { BaseErrorScreen } from './base-error-screen'
 import { KeyringError } from './keyring-error'
 import { ConnectionRefusedError } from './connection-refused-error'
+import { GenericError } from './generic-error'
 
 interface ErrorProps {
-  error?: Error
+  error?: Error & { containerEngineAvailable?: boolean }
 }
 
 export function Error({ error }: ErrorProps = {}) {
@@ -24,26 +23,11 @@ export function Error({ error }: ErrorProps = {}) {
     error?.toString().includes('connect ECONNREFUSED') ||
     error?.toString().includes('ENOTFOUND') ||
     error?.toString().includes('Network Error') ||
-    error?.message?.includes('fetch') ||
-    error?.message?.includes('failed to ping Docker server')
+    error?.message?.includes('failed to ping Docker server') ||
+    !error?.containerEngineAvailable
   ) {
     return <ConnectionRefusedError />
   }
 
-  return (
-    <BaseErrorScreen
-      title="Oops, something went wrong"
-      icon={<AlertCircle className="text-destructive size-12" />}
-    >
-      <p>
-        We're sorry, but something unexpected happened. Please try reloading the
-        app.
-      </p>
-      {error?.message && (
-        <div className="bg-muted rounded-md p-3 text-sm">
-          <code>{error.message}</code>
-        </div>
-      )}
-    </BaseErrorScreen>
-  )
+  return <GenericError error={error} />
 }

renderer/src/common/components/starting-toolhive.tsx

@@ -0,0 +1,76 @@
+import { Loader } from 'lucide-react'
+import { IllustrationPackage } from './illustrations/illustration-package'
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+import { getHealth } from '@api/sdk.gen'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import log from 'electron-log/renderer'
+import { useNavigate } from '@tanstack/react-router'
+import { GenericError } from './error/generic-error'
+
+export function StartingToolHive() {
+  const navigate = useNavigate()
+
+  const { isLoading: isChecking, error } = useQuery({
+    queryKey: ['health'],
+    queryFn: () => getHealth(),
+    staleTime: 0,
+    gcTime: 0,
+    retry: 10,
+    retryDelay: 300,
+    refetchOnWindowFocus: true,
+  })
+  const hasError = error && !isChecking
+
+  useEffect(() => {
+    if (!error && !isChecking) {
+      log.info(
+        '[StartingToolHive] Health check successful, navigating to default group'
+      )
+      navigate({ to: '/group/$groupName', params: { groupName: 'default' } })
+    }
+
+    if (hasError) {
+      log.error(
+        '[StartingToolHive] Error checking health:',
+        JSON.stringify(error)
+      )
+    }
+  }, [isChecking, error, navigate, hasError])
+
+  if (hasError) {
+    return <GenericError error={error as Error} />
+  }
+
+  return (
+    <div
+      className="mt-[64px] flex h-[calc(100vh-5rem-64px)] items-center
+        justify-center px-8"
+    >
+      <Card
+        className="mt-10 flex max-h-[min(600px,_100%)] w-full max-w-md flex-col"
+      >
+        <CardHeader className="text-center">
+          <div className="mb-4 flex justify-center">
+            <IllustrationPackage className="size-20" />
+          </div>
+
+          <CardTitle className="text-xl font-semibold">
+            Starting ToolHive configuration
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent
+          className="text-muted-foreground flex min-h-0 flex-1 flex-col
+            items-center justify-center space-y-4 overflow-y-auto px-8"
+        >
+          <div className="text-muted-foreground text-center">
+            We're checking your ToolHive configuration to ensure it's set up
+            correctly.
+          </div>
+          <Loader className="size-10 animate-spin [animation-duration:1.5s]" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}