fix: error page in workflow run

2024-01-19 17:24:04 +08:00
parent 85618c8470
commit 544de57628
6 changed files with 76 additions and 60 deletions
@@ -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>
+  );
+}