fix: error page in workflow run

web/src/app/(app)/error.tsx

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

web/src/app/(app)/workflows/[workflow_id]/@deployment/error.tsx

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

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

@@ -1,51 +1,5 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import ErrorPage from "@/components/docs/ErrorPage";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-// Error components must be Client Components
-import { useEffect } from "react";
 
-export default function Error({
+export default 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 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>
-  );
-}

web/src/app/(app)/workflows/[workflow_id]/@workflow/error.tsx

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

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

@@ -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,15 +10,13 @@ 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="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">
-        <div className="w-full flex gap-4 flex-col min-w-0">
+        {workflow}
-          {workflow}
+        {deployment}
-          {deployment}
-        </div>
-        {runs}
-        {children}
       </div>
-    </ErrorBoundary>
+      {runs}
+      {children}
+    </div>
   );
 }

web/src/components/docs/ErrorPage.tsx

@@ -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>
+  );
+}