From da77a1d1b5c49f2e806bf0d5f27e326e081f1735 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 16 May 2022 19:57:31 +0800
Subject: [PATCH] fix(console): improve swr error handling to avoid app crash

---
 packages/console/src/hooks/use-api.ts                |  2 +-
 .../console/src/pages/ApiResourceDetails/index.tsx   |  2 +-
 packages/console/src/pages/ApiResources/index.tsx    |  4 ++--
 packages/console/src/pages/Applications/index.tsx    |  4 ++--
 .../console/src/pages/ConnectorDetails/index.tsx     |  2 +-
 packages/console/src/pages/Connectors/index.tsx      |  4 ++--
 packages/console/src/pages/Settings/index.tsx        |  2 +-
 .../components/ConnectorsTransfer.tsx                |  4 ++--
 .../components/SignInMethodsPreview.tsx              |  2 +-
 .../console/src/pages/SignInExperience/index.tsx     |  6 +++---
 .../pages/UserDetails/components/UserConnectors.tsx  | 12 ++++++------
 packages/console/src/pages/UserDetails/index.tsx     |  2 +-
 packages/console/src/pages/Users/index.tsx           |  4 ++--
 13 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/console/src/hooks/use-api.ts b/packages/console/src/hooks/use-api.ts
index 887505f04..ca7bd861e 100644
--- a/packages/console/src/hooks/use-api.ts
+++ b/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.');
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 095ca9b47..e51237378 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/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}>
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index ea6742420..adca2d38e 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/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)}
               />
             )}
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index af313fd15..4b1561304 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/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)}
               />
             )}
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 8586ce588..aa30ac3c1 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/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}>
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index 54db0ebfd..d07203332 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/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)}
                 />
               )}
diff --git a/packages/console/src/pages/Settings/index.tsx b/packages/console/src/pages/Settings/index.tsx
index 117f7b368..0311698c1 100644
--- a/packages/console/src/pages/Settings/index.tsx
+++ b/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}>
diff --git a/packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx b/packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx
index 15751186d..9104faa84 100644
--- a/packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx
@@ -26,8 +26,8 @@ const ConnectorsTransfer = ({ value, onChange }: Props) => {
     return <div>loading</div>;
   }
 
-  if (error) {
-    <div>{`error occurred: ${error.body.message}`}</div>;
+  if (!data && error) {
+    <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>;
   }
 
   const datasource = data
diff --git a/packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx b/packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx
index 1ad790db7..5423ffbd1 100644
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx
+++ b/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)
diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx
index 0d3ed8ac8..75ad402fb 100644
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@@ -84,8 +84,8 @@ const SignInExperience = () => {
     return <div>loading</div>;
   }
 
-  if (configError) {
-    return <div>{configError.body.message}</div>;
+  if (!configs && configError) {
+    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}>
diff --git a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx b/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
index 312be12a8..02b02ec58 100644
--- a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
+++ b/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)}
               />
             )}
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index ac6ab7af9..64bd5df76 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/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}>
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index f15c3a6cc..8ad215414 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/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)}
               />
             )}