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 {
-  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;

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