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({
-  params,
-}: {
-  params: { ccPairId: string };
-}) {
-  const ccPairId = parseInt(params.ccPairId);
+function Main({ ccPairId }: { ccPairId: number }) {
+  const {
+    data: ccPair,
+    isLoading,
+    error,
+  } = useSWR<CCPairFullInfo>(
+    `/api/manage/admin/cc-pair/${ccPairId}`,
+    errorHandlingFetcher
+  );
 
-  const ccPairResponse = await getCCPairSS(ccPairId);
-  if (!ccPairResponse.ok) {
-    const errorMsg = await getErrorMsg(ccPairResponse);
+  if (isLoading) {
+    return <ThreeDotsLoader />;
+  }
+
+  if (error || !ccPair) {
     return (
-      <div className="mx-auto container">
-        <BackButton />
-        <ErrorCallout errorTitle={errorMsg} />
-      </div>
+      <ErrorCallout
+        errorTitle={`Failed to fetch info on Connector with ID ${ccPairId}`}
+        errorMsg={error.toString()}
+      />
     );
   }
 
-  const ccPair = (await ccPairResponse.json()) as CCPairFullInfo;
   const lastIndexAttempt = ccPair.index_attempts[0];
   const isDeleting = isCurrentlyDeleting(ccPair.latest_deletion_attempt);
 
@@ -55,76 +61,83 @@ export default async function Page({
 
   return (
     <>
-      <SSRAutoRefresh />
-      <div className="mx-auto container">
-        <div className="mb-4">
-          <HealthCheckBanner />
+      <BackButton />
+      <div className="pb-1 flex mt-1">
+        <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
+
+        <div className="ml-auto">
+          <ModifyStatusButtonCluster ccPair={ccPair} />
         </div>
+      </div>
 
-        <BackButton />
-        <div className="pb-1 flex mt-1">
-          <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
+      <CCPairStatus
+        status={lastIndexAttempt?.status || "not_started"}
+        disabled={ccPair.connector.disabled}
+        isDeleting={isDeleting}
+      />
 
-          <div className="ml-auto">
-            <ModifyStatusButtonCluster ccPair={ccPair} />
-          </div>
-        </div>
+      <div className="text-sm mt-1">
+        Total Documents Indexed:{" "}
+        <b className="text-emphasis">{totalDocsIndexed}</b>
+      </div>
 
-        <CCPairStatus
-          status={lastIndexAttempt?.status || "not_started"}
-          disabled={ccPair.connector.disabled}
-          isDeleting={isDeleting}
-        />
+      <Divider />
 
-        <div className="text-sm mt-1">
-          Total Documents Indexed:{" "}
-          <b className="text-emphasis">{totalDocsIndexed}</b>
-        </div>
-
-        <Divider />
-
-        <ConfigDisplay
-          connectorSpecificConfig={ccPair.connector.connector_specific_config}
-          sourceType={ccPair.connector.source}
-        />
-        {/* NOTE: no divider / title here for `ConfigDisplay` since it is optional and we need
+      <ConfigDisplay
+        connectorSpecificConfig={ccPair.connector.connector_specific_config}
+        sourceType={ccPair.connector.source}
+      />
+      {/* NOTE: no divider / title here for `ConfigDisplay` since it is optional and we need
         to render these conditionally.*/}
 
-        <div className="mt-6">
-          <div className="flex">
-            <Title>Indexing Attempts</Title>
+      <div className="mt-6">
+        <div className="flex">
+          <Title>Indexing Attempts</Title>
 
-            {!CONNECTOR_TYPES_THAT_CANT_REINDEX.includes(
-              ccPair.connector.source
-            ) && (
-              <ReIndexButton
-                connectorId={ccPair.connector.id}
-                credentialId={ccPair.credential.id}
-                isDisabled={ccPair.connector.disabled}
-              />
-            )}
-          </div>
-
-          <IndexingAttemptsTable ccPair={ccPair} />
+          {!CONNECTOR_TYPES_THAT_CANT_REINDEX.includes(
+            ccPair.connector.source
+          ) && (
+            <ReIndexButton
+              connectorId={ccPair.connector.id}
+              credentialId={ccPair.credential.id}
+              isDisabled={ccPair.connector.disabled}
+            />
+          )}
         </div>
 
-        <Divider />
-
-        <div className="mt-4">
-          <Title>Delete Connector</Title>
-          <Text>
-            Deleting the connector will also delete all associated documents.
-          </Text>
-
-          <div className="flex mt-16">
-            <div className="mx-auto">
-              <DeletionButton ccPair={ccPair} />
-            </div>
-          </div>
-        </div>
-
-        {/* TODO: add document search*/}
+        <IndexingAttemptsTable ccPair={ccPair} />
       </div>
+
+      <Divider />
+
+      <div className="mt-4">
+        <Title>Delete Connector</Title>
+        <Text>
+          Deleting the connector will also delete all associated documents.
+        </Text>
+
+        <div className="flex mt-16">
+          <div className="mx-auto">
+            <DeletionButton ccPair={ccPair} />
+          </div>
+        </div>
+      </div>
+
+      {/* TODO: add document search*/}
     </>
   );
 }
+
+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 }) {
-  // Helper which automatically refreshes a SSR page X seconds
-  const router = useRouter();
+// NOTE: this is causing crashes due to `ECONNRESET` and `UND_ERR_SOCKET`
+// during the server-side fetch. Should not be used until this is resolved.
+// export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) {
+//   // Helper which automatically refreshes a SSR page X seconds
+//   const router = useRouter();
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      router.refresh();
-    }, refreshFreq * 1000);
+//   useEffect(() => {
+//     const interval = setInterval(() => {
+//       router.refresh();
+//     }, refreshFreq * 1000);
 
-    return () => clearInterval(interval);
-  }, []);
+//     return () => clearInterval(interval);
+//   }, []);
 
-  return <></>;
-}
+//   return <></>;
+// }
 
 export function InstantSSRAutoRefresh() {
   const router = useRouter();