diff --git a/web/src/app/admin/connectors/google-drive/page.tsx b/web/src/app/admin/connectors/google-drive/page.tsx
index 2dae6c572de0..20bb817fc4a6 100644
--- a/web/src/app/admin/connectors/google-drive/page.tsx
+++ b/web/src/app/admin/connectors/google-drive/page.tsx
@@ -3,7 +3,7 @@
 import * as Yup from "yup";
 import { GoogleDriveIcon } from "@/components/icons/icons";
 import useSWR, { useSWRConfig } from "swr";
-import { errorHandlingFetcher } from "@/lib/fetcher";
+import { FetchError, errorHandlingFetcher } from "@/lib/fetcher";
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { LoadingAnimation } from "@/components/Loading";
 import { PopupSpec, usePopup } from "@/components/admin/connectors/Popup";
@@ -264,7 +264,7 @@ const Main = () => {
     data: appCredentialData,
     isLoading: isAppCredentialLoading,
     error: isAppCredentialError,
-  } = useSWR<{ client_id: string }>(
+  } = useSWR<{ client_id: string }, FetchError>(
     "/api/manage/admin/connector/google-drive/app-credential",
     errorHandlingFetcher
   );
@@ -272,7 +272,7 @@ const Main = () => {
     data: serviceAccountKeyData,
     isLoading: isServiceAccountKeyLoading,
     error: isServiceAccountKeyError,
-  } = useSWR<{ service_account_email: string }>(
+  } = useSWR<{ service_account_email: string }, FetchError>(
     "/api/manage/admin/connector/google-drive/service-account-key",
     errorHandlingFetcher
   );
@@ -280,7 +280,7 @@ const Main = () => {
     data: connectorIndexingStatuses,
     isLoading: isConnectorIndexingStatusesLoading,
     error: connectorIndexingStatusesError,
-  } = useSWR<ConnectorIndexingStatus<any, any>[]>(
+  } = useSWR<ConnectorIndexingStatus<any, any>[], FetchError>(
     "/api/manage/admin/connector/indexing-status",
     errorHandlingFetcher
   );
@@ -307,28 +307,19 @@ const Main = () => {
   }
 
   if (credentialsError || !credentialsData) {
-    return (
-      <div className="mx-auto">
-        <div className="text-red-500">Failed to load credentials.</div>
-      </div>
-    );
+    return <ErrorCallout errorTitle="Failed to load credentials." />;
   }
 
   if (connectorIndexingStatusesError || !connectorIndexingStatuses) {
-    return (
-      <div className="mx-auto">
-        <div className="text-red-500">Failed to load connectors.</div>
-      </div>
-    );
+    return <ErrorCallout errorTitle="Failed to load connectors." />;
   }
 
-  if (isAppCredentialError || isServiceAccountKeyError) {
+  if (
+    (isAppCredentialError && isAppCredentialError.status !== 404) ||
+    (isServiceAccountKeyError && isServiceAccountKeyError.status !== 404)
+  ) {
     return (
-      <div className="mx-auto">
-        <div className="text-red-500">
-          Error loading Google Drive app credentials. Contact an administrator.
-        </div>
-      </div>
+      <ErrorCallout errorTitle="Error loading Google Drive app credentials. Contact an administrator." />
     );
   }
 
diff --git a/web/src/lib/fetcher.ts b/web/src/lib/fetcher.ts
index 0248f5214e41..6acfd1fb1089 100644
--- a/web/src/lib/fetcher.ts
+++ b/web/src/lib/fetcher.ts
@@ -1,4 +1,4 @@
-class FetchError extends Error {
+export class FetchError extends Error {
   status: number;
   info: any;