chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: error page in workflow run

Browse Source
This commit is contained in:
BennyKok 2024-01-19 17:24:04 +08:00
parent 85618c8470
commit 544de57628
6 changed files with 76 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/app/(app)/error.tsx Normal file
View File

@ -0,0 +1,5 @@
"use client";
import { ErrorFullPage } from "@/components/docs/ErrorPage";
export default ErrorFullPage;

5
web/src/app/(app)/workflows/[workflow_id]/@deployment/error.tsx Normal file
View File

@ -0,0 +1,5 @@
"use client";
import ErrorPage from "@/components/docs/ErrorPage";
export default ErrorPage;

50
web/src/app/(app)/workflows/[workflow_id]/@runs/error.tsx
View File

@ -1,51 +1,5 @@
"use client";
import { Button } from "@/components/ui/button";
import {
Card,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
// Error components must be Client Components
import { useEffect } from "react";
import ErrorPage from "@/components/docs/ErrorPage";
export default function Error({
error,
reset,
}: {
error?: Error & { digest?: string };
reset?: () => void;
}) {
useEffect(() => {
// Log the error to an error reporting service
console.log(error?.message);
}, [error]);
return (
<div className="border rounded-2xl flex flex-col w-full gap-20 justify-center items-center">
<Card className="max-w-2xl">
<CardHeader>
<CardTitle>
<div className="text-2xl">Something went wrong!</div>
</CardTitle>
<CardDescription
suppressHydrationWarning={true}
className="flex flex-col gap-4"
>
<div className="text-lg">{error?.message}</div>
<Button
className="w-full"
onClick={
// Attempt to recover by trying to re-render the segment
() => reset?.()
}
>
Try again
</Button>
</CardDescription>
</CardHeader>
</Card>
</div>
);
}
export default ErrorPage;

5
web/src/app/(app)/workflows/[workflow_id]/@workflow/error.tsx Normal file
View File

@ -0,0 +1,5 @@
"use client";
import ErrorPage from "@/components/docs/ErrorPage";
export default ErrorPage;

5
web/src/app/(app)/workflows/[workflow_id]/layout.tsx
View File

@ -1,6 +1,3 @@
import Error from "@/app/(app)/workflows/[workflow_id]/@runs/error";
import { ErrorBoundary } from "@/components/ErrorBoundary";
export default async function Layout({
children,
deployment,
@ -13,7 +10,6 @@ export default async function Layout({
workflow: React.ReactNode;
}) {
return (
<ErrorBoundary fallback={<Error />}>
<div className="mt-4 w-full grid grid-rows-[1fr,1fr] lg:grid-cols-[minmax(auto,500px),1fr] gap-4 max-h-[calc(100dvh-100px)]">
<div className="w-full flex gap-4 flex-col min-w-0">
{workflow}
@ -22,6 +18,5 @@ export default async function Layout({
{runs}
{children}
</div>
</ErrorBoundary>
);
}

52
web/src/components/docs/ErrorPage.tsx Normal file
View File

@ -0,0 +1,52 @@
"use client";
import { Button } from "@/components/ui/button";
import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
// Error components must be Client Components
import { useEffect } from "react";
export default function ErrorPage({
error,
reset,
}: {
error?: Error & { digest?: string };
reset?: () => void;
}) {
useEffect(() => {
// Log the error to an error reporting service
console.log(error?.message);
}, [error]);
return (
<div className="border rounded-2xl flex flex-col w-full h-full gap-20 justify-center items-center text-xs">
<div className="max-w-xl w-full">
<CardHeader>
<CardTitle>
<div className="text-xl">Unexpected error.</div>
</CardTitle>
<CardDescription className="flex flex-col gap-4">
<div className="text-sm">Error: {error?.message}</div>
<div className="flex w-full justify-end">
<Button className="w-fit" onClick={() => reset?.()}>
Refresh Page
</Button>
</div>
</CardDescription>
</CardHeader>
</div>
</div>
);
}
export function ErrorFullPage() {
return (
<div
className={cn(
"w-full py-4 flex justify-center items-center gap-2 text-sm h-full"
)}
>
<ErrorPage />
</div>
);
}