Fix ccPair pages crashing

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -1,6 +1,6 @@
-import { getCCPairSS } from "@/lib/ss/ccPair";
+"use client";
+
 import { CCPairFullInfo } from "./types";
-import { getErrorMsg } from "@/lib/fetchUtils";
 import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { CCPairStatus } from "@/components/Status";
 import { BackButton } from "@/components/BackButton";
@@ -10,36 +10,42 @@ import { Text } from "@tremor/react";
 import { ConfigDisplay } from "./ConfigDisplay";
 import { ModifyStatusButtonCluster } from "./ModifyStatusButtonCluster";
 import { DeletionButton } from "./DeletionButton";
-import { SSRAutoRefresh } from "@/components/SSRAutoRefresh";
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { ReIndexButton } from "./ReIndexButton";
 import { isCurrentlyDeleting } from "@/lib/documentDeletion";
 import { ValidSources } from "@/lib/types";
+import useSWR from "swr";
+import { errorHandlingFetcher } from "@/lib/fetcher";
+import { ThreeDotsLoader } from "@/components/Loading";
 
 // since the uploaded files are cleaned up after some period of time
 // re-indexing will not work for the file connector. Also, it would not
 // make sense to re-index, since the files will not have changed.
 const CONNECTOR_TYPES_THAT_CANT_REINDEX: ValidSources[] = ["file"];
 
-export default async function Page({
+function Main({ ccPairId }: { ccPairId: number }) {
-  params,
+  const {
-}: {
+    data: ccPair,
-  params: { ccPairId: string };
+    isLoading,
-}) {
+    error,
-  const ccPairId = parseInt(params.ccPairId);
+  } = useSWR<CCPairFullInfo>(
+    `/api/manage/admin/cc-pair/${ccPairId}`,
+    errorHandlingFetcher
+  );
 
-  const ccPairResponse = await getCCPairSS(ccPairId);
+  if (isLoading) {
-  if (!ccPairResponse.ok) {
+    return <ThreeDotsLoader />;
-    const errorMsg = await getErrorMsg(ccPairResponse);
+  }
+
+  if (error || !ccPair) {
     return (
-      <div className="mx-auto container">
+      <ErrorCallout
-        <BackButton />
+        errorTitle={`Failed to fetch info on Connector with ID ${ccPairId}`}
-        <ErrorCallout errorTitle={errorMsg} />
+        errorMsg={error.toString()}
-      </div>
+      />
     );
   }
 
-  const ccPair = (await ccPairResponse.json()) as CCPairFullInfo;
   const lastIndexAttempt = ccPair.index_attempts[0];
   const isDeleting = isCurrentlyDeleting(ccPair.latest_deletion_attempt);
 
@@ -55,12 +61,6 @@ export default async function Page({
 
   return (
     <>
-      <SSRAutoRefresh />
-      <div className="mx-auto container">
-        <div className="mb-4">
-          <HealthCheckBanner />
-        </div>
-
       <BackButton />
       <div className="pb-1 flex mt-1">
         <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
@@ -124,7 +124,20 @@ export default async function Page({
       </div>
 
       {/* TODO: add document search*/}
-      </div>
     </>
   );
 }
+
+export default function Page({ params }: { params: { ccPairId: string } }) {
+  const ccPairId = parseInt(params.ccPairId);
+
+  return (
+    <div className="mx-auto container">
+      <div className="mb-4">
+        <HealthCheckBanner />
+      </div>
+
+      <Main ccPairId={ccPairId} />
+    </div>
+  );
+}

web/src/components/ErrorCallout.tsx

@@ -8,7 +8,6 @@ export function ErrorCallout({
   errorTitle?: string;
   errorMsg?: string;
 }) {
-  console.log(errorMsg);
   return (
     <div>
       <Callout

web/src/components/SSRAutoRefresh.tsx

@@ -3,20 +3,22 @@
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) {
+// NOTE: this is causing crashes due to `ECONNRESET` and `UND_ERR_SOCKET`
-  // Helper which automatically refreshes a SSR page X seconds
+// during the server-side fetch. Should not be used until this is resolved.
-  const router = useRouter();
+// export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) {
+//   // Helper which automatically refreshes a SSR page X seconds
+//   const router = useRouter();
 
-  useEffect(() => {
+//   useEffect(() => {
-    const interval = setInterval(() => {
+//     const interval = setInterval(() => {
-      router.refresh();
+//       router.refresh();
-    }, refreshFreq * 1000);
+//     }, refreshFreq * 1000);
 
-    return () => clearInterval(interval);
+//     return () => clearInterval(interval);
-  }, []);
+//   }, []);
 
-  return <></>;
+//   return <></>;
-}
+// }
 
 export function InstantSSRAutoRefresh() {
   const router = useRouter();