Add backend health check before attempting to read other server endpoints

This way, if the server isn't running, we can show an accurate error message

Author: josh-padnick

api/server.go

@@ -23,6 +23,11 @@ func setupCommonRoutes(r *gin.Engine, runbookPath string, outputPath string, reg
 		panic(fmt.Sprintf("failed to get embedded assets filesystem: %v", err))
 	}
 
+	// Health check endpoint - used by frontend to detect if backend is running
+	r.GET("/api/health", func(c *gin.Context) {
+		c.JSON(http.StatusOK, gin.H{"status": "ok"})
+	})
+
 	// API endpoint to serve the runbook file contents
 	r.POST("/api/file", HandleFileRequest(runbookPath))
 

web/src/contexts/ExecutableRegistryContext.tsx

@@ -15,11 +15,33 @@ export function ExecutableRegistryProvider({ children }: ExecutableRegistryProvi
   const [error, setError] = useState<AppError | null>(null)
   const [useExecutableRegistry, setUseExecutableRegistry] = useState(true)
 
-  const fetchRegistry = async () => {
+  // Check if the backend server is reachable
+  const checkBackendHealth = async (): Promise<boolean> => {
     try {
-      setLoading(true)
-      setError(null)
+      const response = await fetch('/api/health')
+      return response.ok
+    } catch {
+      return false
+    }
+  }
 
+  const fetchRegistry = async () => {
+    setLoading(true)
+    setError(null)
+
+    // First, check if the backend is reachable
+    const isBackendHealthy = await checkBackendHealth()
+    if (!isBackendHealthy) {
+      setError(createAppError(
+        'Cannot connect to backend server',
+        'The Runbooks backend server is not responding. It may not be running or may have crashed.'
+      ))
+      setLoading(false)
+      return
+    }
+
+    // Backend is healthy, now fetch the registry
+    try {
       const response = await fetch('/api/runbook/executables')
 
       if (!response.ok) {
@@ -82,11 +104,27 @@ export function ExecutableRegistryProvider({ children }: ExecutableRegistryProvi
 
   // Show error state if registry fails to load
   if (error) {
+    const isConnectionError = error.message === 'Cannot connect to backend server'
+    
     return (
       <div className="p-8 text-center bg-red-50 border-2 border-red-600 m-8 rounded-lg w-2xl mx-auto">
         <h2 className="text-red-600 text-2xl font-semibold mb-3">{error.message}</h2>
         <p className="text-lg mb-2">{error.details}</p>
-        {error.details && (
+        {isConnectionError ? (
+          <div className="text-gray-600 text-sm mt-4 w-xl text-center mx-auto space-y-2">
+            <p>The Runbooks backend server needs to be running for this page to work.</p>
+            <p>Start it with one of these commands:</p>
+            <code className="block bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
+              runbooks open /path/to/your-runbook
+            </code>
+            <code className="block bg-gray-100 p-2 rounded font-mono text-sm">
+              runbooks watch /path/to/your-runbook
+            </code>
+            <code className="block bg-gray-100 p-2 rounded font-mono text-sm">
+              runbooks serve /path/to/your-runbook
+            </code>
+          </div>
+        ) : (
           <p className="text-gray-600 text-sm mt-2 w-xl text-center mx-auto">
             The executable registry is a list of all the "executables" like files, scripts, or commands in the runbook. We use the executable registry so that only Runbook-authored execuables are actually executed, not arbitrary scripts. The Executable Registry loads at runtime, but it looks like we hit an error trying to do that.
           </p>