lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: guard agent workspace client errors
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-17 21:57:36 +08:00
parent 50a2d84d2c
commit 4533af1495
2 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/canvas/[id]/page.tsx
View File

@ -70,6 +70,7 @@ import { CanvasChatPanel } from "@/components/canvas/CanvasChatPanel";
import { CanvasFileListPanel } from "@/components/canvas/CanvasFileListPanel";
import { ObjectPickerOverlay } from "@/components/canvas/ObjectPickerOverlay";
import { SceneFusionDialog } from "@/components/scene-fusion-dialog";
import { ClientErrorBoundary } from "@/components/ui/client-error-boundary";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn, fetcher } from "@/lib/utils";
import {
@ -1041,12 +1042,39 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div>
</div>
<div className="min-h-0 flex-1 overflow-hidden rounded-tl-[24px] border-t border-l bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] dark:border-white/10 dark:bg-zinc-950">
<AgentGenerationWorkspace
chatId={`canvas-${id}`}
projectId={id}
selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
workflowContext={workflowContext}
/>
{selectedAgentPresetId ? (
<ClientErrorBoundary
fallback={
<div className="flex h-full items-center justify-center p-8">
<div className="w-full max-w-xl rounded-[28px] border border-dashed bg-[#f8fafc] p-8 text-center dark:bg-zinc-900/50">
<div className="text-xl font-semibold">工作台加载失败</div>
<div className="mt-3 text-sm leading-6 text-muted-foreground">
当前生图工作台发生了前端异常，我已经切换到安全兜底状态。你可以先返回上一步再重新进入，或者告诉我继续修复。
</div>
</div>
</div>
}
>
<AgentGenerationWorkspace
chatId={`canvas-${id}`}
projectId={id}
selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
workflowContext={workflowContext}
/>
</ClientErrorBoundary>
) : (
<div className="flex h-full items-center justify-center p-8">
<div className="w-full max-w-xl rounded-[28px] border border-dashed bg-[#f8fafc] p-8 text-center dark:bg-zinc-900/50">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-[#eef2ff] text-[#4f46e5]">
<Wand2 className="h-7 w-7" />
</div>
<div className="text-2xl font-semibold">请先选择左侧生图模式</div>
<div className="mt-3 text-sm leading-6 text-muted-foreground">
选择生图模式后，这里才会加载独立的生图工作台，并显示图片槽位、补充要求和生成结果。
</div>
</div>
</div>
)}
</div>
</div>
</div>

38
components/ui/client-error-boundary.tsx Normal file
View File

@ -0,0 +1,38 @@
"use client";
import React from "react";
interface ClientErrorBoundaryProps {
children: React.ReactNode;
fallback: React.ReactNode;
}
interface ClientErrorBoundaryState {
hasError: boolean;
}
export class ClientErrorBoundary extends React.Component<
ClientErrorBoundaryProps,
ClientErrorBoundaryState
> {
constructor(props: ClientErrorBoundaryProps) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
console.error("[ClientErrorBoundary] Caught client error:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}