Fix page crash when backend is down

web/src/app/auth/login/page.tsx

@@ -1,17 +1,34 @@
+import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { DISABLE_AUTH } from "@/lib/constants";
+import { User } from "@/lib/types";
 import { getGoogleOAuthUrlSS, getCurrentUserSS } from "@/lib/userSS";
 import { redirect } from "next/navigation";
 
+const BUTTON_STYLE =
+  "group relative w-64 flex justify-center " +
+  "py-2 px-4 border border-transparent text-sm " +
+  "font-medium rounded-md text-white bg-red-600 " +
+  " mx-auto";
+
 const Page = async () => {
   // no need for any of the below if auth is disabled
   if (DISABLE_AUTH) {
     return redirect("/");
   }
 
-  const [currentUser, authorizationUrl] = await Promise.all([
-    getCurrentUserSS(),
-    getGoogleOAuthUrlSS(),
-  ]);
+  // catch cases where the backend is completely unreachable here
+  // without try / catch, will just raise an exception and the page
+  // will not render
+  let currentUser: User | null = null;
+  let authorizationUrl: string | null = null;
+  try {
+    [currentUser, authorizationUrl] = await Promise.all([
+      getCurrentUserSS(),
+      getGoogleOAuthUrlSS(),
+    ]);
+  } catch (e) {
+    console.log(`Some fetch failed for the login page - ${e}`);
+  }
 
   // if user is already logged in, take them to the main app page
   if (currentUser && currentUser.is_active && currentUser.is_verified) {
@@ -20,6 +37,9 @@ const Page = async () => {
 
   return (
     <main>
+      <div className="absolute top-10x w-full">
+        <HealthCheckBanner />
+      </div>
       <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-md w-full space-y-8">
           <div>
@@ -28,18 +48,21 @@ const Page = async () => {
             </h2>
           </div>
           <div className="flex">
-            <a
-              href={authorizationUrl}
-              className={
-                "group relative w-64 flex justify-center " +
-                "py-2 px-4 border border-transparent text-sm " +
-                "font-medium rounded-md text-white bg-red-600 " +
-                "hover:bg-red-700 focus:outline-none focus:ring-2 " +
-                "focus:ring-offset-2 focus:ring-red-500 mx-auto"
-              }
-            >
-              Sign in with Google
-            </a>
+            {authorizationUrl ? (
+              <a
+                href={authorizationUrl || ""}
+                className={
+                  BUTTON_STYLE +
+                  " focus:outline-none focus:ring-2 hover:bg-red-700 focus:ring-offset-2 focus:ring-red-500"
+                }
+              >
+                Sign in with Google
+              </a>
+            ) : (
+              <button className={BUTTON_STYLE + " cursor-default"}>
+                Sign in with Google
+              </button>
+            )}
           </div>
         </div>
       </div>

web/src/app/page.tsx

@@ -18,19 +18,27 @@ export default async function Home() {
     }),
   ];
 
-  const results = await Promise.all(tasks);
+  // catch cases where the backend is completely unreachable here
+  // without try / catch, will just raise an exception and the page
+  // will not render
+  let results: (User | Response | null)[] = [null, null];
+  try {
+    results = await Promise.all(tasks);
+  } catch (e) {
+    console.log(`Some fetch failed for the main search page - ${e}`);
+  }
   const user = results[0] as User | null;
-  const connectorsResponse = results[1] as Response;
+  const connectorsResponse = results[1] as Response | null;
 
   if (!DISABLE_AUTH && !user) {
     return redirect("/auth/login");
   }
 
   let connectors: Connector<any>[] = [];
-  if (connectorsResponse.ok) {
+  if (connectorsResponse?.ok) {
     connectors = await connectorsResponse.json();
   } else {
-    console.log(`Failed to fetch connectors - ${connectorsResponse.status}`);
+    console.log(`Failed to fetch connectors - ${connectorsResponse?.status}`);
   }
 
   // needs to be done in a non-client side component due to nextjs

web/src/components/Button.tsx

@@ -1,14 +1,14 @@
 interface Props {
-  onClick: () => void;
   children: JSX.Element | string;
+  onClick?: () => void;
   disabled?: boolean;
   fullWidth?: boolean;
   className?: string;
 }
 
 export const Button = ({
-  onClick,
   children,
+  onClick,
   disabled = false,
   fullWidth = false,
   className = "",

web/src/lib/userSS.ts

@@ -14,19 +14,24 @@ export const getGoogleOAuthUrlSS = async (): Promise<string> => {
 
 // should be used server-side only
 export const getCurrentUserSS = async (): Promise<User | null> => {
-  const response = await fetch(buildUrl("/users/me"), {
-    credentials: "include",
-    next: { revalidate: 0 },
-    headers: {
-      cookie: cookies()
-        .getAll()
-        .map((cookie) => `${cookie.name}=${cookie.value}`)
-        .join("; "),
-    },
-  });
-  if (!response.ok) {
+  try {
+    const response = await fetch(buildUrl("/users/me"), {
+      credentials: "include",
+      next: { revalidate: 0 },
+      headers: {
+        cookie: cookies()
+          .getAll()
+          .map((cookie) => `${cookie.name}=${cookie.value}`)
+          .join("; "),
+      },
+    });
+    if (!response.ok) {
+      return null;
+    }
+    const user = await response.json();
+    return user;
+  } catch (e) {
+    console.log(`Error fetching user: ${e}`);
     return null;
   }
-  const user = await response.json();
-  return user;
 };