fix(console): improve swr error handling to avoid app crash

packages/console/src/hooks/use-api.ts

@@ -9,7 +9,7 @@ import { toast } from 'react-hot-toast';
 import { logtoApiResource } from '@/consts/api';
 
 export class RequestError extends Error {
-  body: RequestErrorBody;
+  body?: RequestErrorBody;
 
   constructor(body: RequestErrorBody) {
     super('Request error occurred.');

packages/console/src/pages/ApiResourceDetails/index.tsx

@@ -84,7 +84,7 @@ const ApiResourceDetails = () => {
         className={styles.backLink}
       />
       {isLoading && <DetailsSkeleton />}
-      {error && <div>{`error occurred: ${error.body.message}`}</div>}
+      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
       {data && (
         <>
           <Card className={styles.header}>

packages/console/src/pages/ApiResources/index.tsx

@@ -85,10 +85,10 @@ const ApiResources = () => {
             </tr>
           </thead>
           <tbody>
-            {error && (
+            {!data && error && (
               <TableError
                 columns={2}
-                content={error.body.message}
+                content={error.body?.message ?? error.message}
                 onRetry={async () => mutate(undefined, true)}
               />
             )}

packages/console/src/pages/Applications/index.tsx

@@ -82,10 +82,10 @@ const Applications = () => {
             </tr>
           </thead>
           <tbody>
-            {error && (
+            {!data && error && (
               <TableError
                 columns={2}
-                content={error.body.message}
+                content={error.body?.message ?? error.message}
                 onRetry={async () => mutate(undefined, true)}
               />
             )}

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -107,7 +107,7 @@ const ConnectorDetails = () => {
         className={styles.backLink}
       />
       {isLoading && <DetailsSkeleton />}
-      {error && <div>{`error occurred: ${error.body.message}`}</div>}
+      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
       {data && (
         <Card className={styles.header}>
           <div className={styles.imagePlaceholder}>

packages/console/src/pages/Connectors/index.tsx

@@ -85,10 +85,10 @@ const Connectors = () => {
               </tr>
             </thead>
             <tbody>
-              {error && (
+              {!data && error && (
                 <TableError
                   columns={3}
-                  content={error.body.message}
+                  content={error.body?.message ?? error.message}
                   onRetry={async () => mutate(undefined, true)}
                 />
               )}

packages/console/src/pages/Settings/index.tsx

@@ -60,7 +60,7 @@ const Settings = () => {
         <TabNavItem href="/settings">{t('settings.tabs.general')}</TabNavItem>
       </TabNav>
       {!data && !error && <div>loading</div>}
-      {error && <div>{`error occurred: ${error.body.message}`}</div>}
+      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
       {data && (
         <form className={detailsStyles.body} onSubmit={onSubmit}>
           <div className={styles.fields}>

packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx

@@ -26,8 +26,8 @@ const ConnectorsTransfer = ({ value, onChange }: Props) => {
     return <div>loading</div>;
   }
 
-  if (error) {
+  if (!data && error) {
-    <div>{`error occurred: ${error.body.message}`}</div>;
+    <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>;
   }
 
   const datasource = data

packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx

@@ -42,7 +42,7 @@ const SignInMethodsPreview = ({ data }: Props) => {
   return (
     <div>
       {!connectors && !error && <div>loading</div>}
-      {error && <div>{error.body.message}</div>}
+      {!connectors && error && <div>{error.body?.message ?? error.message}</div>}
       {connectors &&
         Object.values(SignInMethodKey)
           .filter((key) => signInMethods[key] !== SignInMethodState.Disabled)

packages/console/src/pages/SignInExperience/index.tsx

@@ -84,8 +84,8 @@ const SignInExperience = () => {
     return <div>loading</div>;
   }
 
-  if (configError) {
+  if (!configs && configError) {
-    return <div>{configError.body.message}</div>;
+    return <div>{configError.body?.message ?? configError.message}</div>;
   }
 
   if (configs?.customizeSignInExperience) {
@@ -109,7 +109,7 @@ const SignInExperience = () => {
             </TabNavItem>
           </TabNav>
           {!data && !error && <div>loading</div>}
-          {error && <div>{`error occurred: ${error.body.message}`}</div>}
+          {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
           {data && (
             <FormProvider {...methods}>
               <form onSubmit={onSubmit}>

packages/console/src/pages/UserDetails/components/UserConnectors.tsx

@@ -31,20 +31,20 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data, error, mutate } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
   const isLoading = !data && !error;
-  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async (connectorId: string) => {
-    if (isSubmiting) {
+    if (isSubmitting) {
       return;
     }
 
-    setIsSubmiting(true);
+    setIsSubmitting(true);
 
     try {
       await api.delete(`/api/users/${userId}/identities/${connectorId}`);
       onDelete?.(connectorId);
     } finally {
-      setIsSubmiting(false);
+      setIsSubmitting(false);
     }
   };
 
@@ -96,10 +96,10 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
             </tr>
           </thead>
           <tbody>
-            {error && (
+            {!data && error && (
               <TableError
                 columns={3}
-                content={error.body.message}
+                content={error.body?.message ?? error.message}
                 onRetry={async () => mutate(undefined, true)}
               />
             )}

packages/console/src/pages/UserDetails/index.tsx

@@ -113,7 +113,7 @@ const UserDetails = () => {
         className={styles.backLink}
       />
       {isLoading && <DetailsSkeleton />}
-      {error && <div>{`error occurred: ${error.body.message}`}</div>}
+      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
       {id && data && (
         <>
           <Card className={styles.header}>

packages/console/src/pages/Users/index.tsx

@@ -95,10 +95,10 @@ const Users = () => {
             </tr>
           </thead>
           <tbody>
-            {error && (
+            {!data && error && (
               <TableError
                 columns={3}
-                content={error.body.message}
+                content={error.body?.message ?? error.message}
                 onRetry={async () => mutate(undefined, true)}
               />
             )}