fix: Error handling in UI (#1534)

Signed-off-by: 35C4n0r <[email protected]>
Co-authored-by: Tal <[email protected]>

keep-ui/app/error.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
   text-align: center;
 }
 

keep-ui/app/error.tsx

@@ -1,36 +1,59 @@
+// The error.js file convention allows you to gracefully handle unexpected runtime errors.
+// The way it does this is by automatically wrap a route segment and its nested children in a React Error Boundary.
+// https://nextjs.org/docs/app/api-reference/file-conventions/error
+// https://nextjs.org/docs/app/building-your-application/routing/error-handling#how-errorjs-works
+
 "use client";
 import Image from "next/image";
 import "./error.css";
-
-// Custom Error Component
+import {useEffect} from "react";
+import {Button, Text} from "@tremor/react";
 export default function ErrorComponent({
-  errorMessage,
-  url,
+  error,
+  reset,
 }: {
-  errorMessage: String;
-  url: String;
+  error: Error | KeepApiError
+  reset: () => void
 }) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
   return (
     <div className="error-container">
-      <div className="error-message">{errorMessage}</div>
-      {url && (
-        <div className="error-url">
-          Failed to query {url}, is Keep API up?
-        </div>
-      )}
+      <div className="error-message">{error.toString()}</div>
+      <div className={"error-url"}>ERROR_TYPE: {error.name}</div>
+      {error instanceof KeepApiError && error.proposedResolution && (<div className="error-url">
+        {error.proposedResolution}
+      </div>)
+      }
+
       <div className="error-image">
         <Image src="/keep.svg" alt="Keep" width={150} height={150} />
       </div>
+      <Button
+          onClick={() => {
+            console.log("Refreshing...")
+            window.location.reload();
+          }}
+          color="orange"
+          variant="secondary"
+          className="mt-4 border border-orange-500 text-orange-500">
+        <Text>Try Again!</Text>
+      </Button>
     </div>
-  );
+  )
 }
 
+// Custom Error Class
 export class KeepApiError extends Error {
   url: string;
+  proposedResolution: string;
 
-  constructor(message: string, url: string) {
+  constructor(message: string, url: string, proposedResolution: string) {
     super(message);
     this.name = "KeepApiError";
     this.url = url;
+    this.proposedResolution = proposedResolution;
   }
 }

keep-ui/app/layout.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { NextAuthProvider } from "./auth-provider";
-import ErrorBoundary from "./error-boundary";
 import { Mulish } from "next/font/google";
 
 import "./globals.css";
@@ -29,7 +28,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
           {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
           <main className="flex flex-col col-start-3 p-4 overflow-auto">
             <div className="flex-1">
-              <ErrorBoundary>{children}</ErrorBoundary>
+              {children}
             </div>
             <ToastContainer />
           </main>

keep-ui/app/providers/page.client.tsx

@@ -153,14 +153,14 @@ export default function ProvidersPage({
       });
     }
   }, [searchParams]);
-
+  if (error) {
+      throw new KeepApiError(error.message, `${getApiURL()}/providers`, `Failed to query ${getApiURL()}/providers, is Keep API up?`);
+    }
   if (status === "loading") return <Loading />;
   if (status === "unauthenticated") router.push("/signin");
   if (!providers || !installedProviders || providers.length <= 0)
     return <Loading slowLoading={isSlowLoading} />;
-  if (error) {
-    throw new KeepApiError(error.message, `${getApiURL()}/providers`);
-  }
+
 
   const addProvider = (provider: Provider) => {
     setInstalledProviders((prevProviders) => {

keep-ui/app/workflows/builder/builder-card.tsx

@@ -50,7 +50,8 @@ export function BuilderCard({
   if (error) {
     throw new KeepApiError(
       "The builder has failed to load providers",
-      `${apiUrl}/providers`
+      `${apiUrl}/providers`,
+        `Failed to query ${apiUrl}/providers, is Keep API up?`
     );
   }