feature(app): error handling

2026-09-24 15:45:35 +08:00 · 2025-02-16 02:12:26 -08:00
parent 94c4103539
commit 639f86bcae
5 changed files with 133 additions and 2 deletions
@@ -18,6 +18,7 @@ import { useWorkflowRegistry } from '@/stores/workflow/registry/store'
 import { useWorkflowStore } from '@/stores/workflow/store'
 import { NotificationList } from '@/app/w/components/notifications/notifications'
 import { getBlock } from '../../../blocks'
+import { ErrorBoundary } from '../components/error-boundary/error-boundary'
 import { CustomEdge } from './components/custom-edge/custom-edge'
 import { WorkflowBlock } from './components/workflow-block/workflow-block'
 import { LoopInput } from './components/workflow-loop/components/loop-input/loop-input'
@@ -338,7 +339,9 @@ function WorkflowContent() {
 export default function Workflow() {
  return (
    <ReactFlowProvider>
-      <WorkflowContent />
+      <ErrorBoundary>
+        <WorkflowContent />
+      </ErrorBoundary>
    </ReactFlowProvider>
  )
 }
@@ -0,0 +1,48 @@
+'use client'
+
+import { Component, ReactNode } from 'react'
+import { BotIcon } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  }
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback || (
+          <div className="flex items-center justify-center w-full h-full bg-muted/40">
+            <Card className="p-6 max-w-md text-center space-y-4">
+              <div className="flex justify-center">
+                <BotIcon className="w-16 h-16 text-muted-foreground" />
+              </div>
+              <h3 className="text-lg font-semibold">Workflow Error</h3>
+              <p className="text-muted-foreground">
+                This workflow encountered an error and is currently unavailable. Please try again
+                later or create a new workflow.
+              </p>
+            </Card>
+          </div>
+        )
+      )
+    }
+
+    return this.props.children
+  }
+}
@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect } from 'react'
+import { BotIcon } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Optionally log the error to an error reporting service
+    console.error('Workflow error:', error)
+  }, [error])
+
+  return (
+    <div className="flex items-center justify-center w-full h-full bg-muted/40">
+      <Card className="p-6 max-w-md text-center space-y-4">
+        <div className="flex justify-center">
+          <BotIcon className="w-16 h-16 text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-semibold">Workflow Error</h3>
+        <p className="text-muted-foreground">
+          This workflow encountered an error and is currently unavailable. Please try again later or
+          create a new workflow.
+        </p>
+        <button
+          onClick={reset}
+          className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
+        >
+          Try again
+        </button>
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect } from 'react'
+import { BotIcon } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('Global workspace error:', error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        <div className="flex items-center justify-center w-full h-screen bg-muted/40">
+          <Card className="p-6 max-w-md text-center space-y-4">
+            <div className="flex justify-center">
+              <BotIcon className="w-16 h-16 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-semibold">Application Error</h3>
+            <p className="text-muted-foreground">
+              Something went wrong with the application. Please try again later.
+            </p>
+            <button
+              onClick={reset}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
+            >
+              Try again
+            </button>
+          </Card>
+        </div>
+      </body>
+    </html>
+  )
+}
@@ -1,6 +1,7 @@
 import { Chat } from './components/chat/chat'
 import { Console } from './components/console/console'
 import { ControlBar } from './components/control-bar/control-bar'
+import { ErrorBoundary } from './components/error-boundary/error-boundary'
 import { Sidebar } from './components/sidebar/sidebar'
 import { Toolbar } from './components/toolbar/toolbar'
 import Providers from './providers'
@@ -19,7 +20,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
            <Chat />
            <Console />
            <main className="grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
-              {children}
+              <ErrorBoundary>{children}</ErrorBoundary>
            </main>
          </div>
        </div>