Update api error handling (#1626)

* implement error handling changes * whoops missed one * lingui extract * lingui extract * resolve linting * fix TS error * lingui extract * lingui extract * fix package version * fix package versions * update create folder modal error * lingui extract * lingui extract * revert change from preview branch * lingui extract * make error handling safer * update comment for consistency * more safety added * fix linting Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Oct 18, 2021 · d23d305 · d23d305
1 parent a3ad4c8
commit d23d305
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 90 deletions.
diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.11",
+    "@chainsafe/files-api-client": "1.18.15",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
@@ -99,12 +99,12 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
         setCreatingFolder(false)
         helpers.resetForm()
         onCancel()
-      } catch (errors: any) {
+      } catch (error: any) {
         setCreatingFolder(false)
-        if (errors[0].message.includes("Entry with such name can")) {
+        if (error?.error?.code === 409) {
           helpers.setFieldError("name", t`Folder name is already in use`)
         } else {
-          helpers.setFieldError("name", errors[0].message)
+          helpers.setFieldError("name", t`There was an error creating the folder ${error?.message}`)
         }
         helpers.setSubmitting(false)
       }

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx
@@ -102,12 +102,8 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
       })
       refreshContents && refreshContents()
       helpers.resetForm()
-    } catch (errors: any) {
-      if (errors[0].message.includes("conflict with existing")) {
-        helpers.setFieldError("files", "File/Folder exists")
-      } else {
-        helpers.setFieldError("files", errors[0].message)
-      }
+    } catch (error: any) {
+      console.error(error)
     }
     helpers.setSubmitting(false)
   }, [close, currentPath, uploadFiles, refreshContents, bucket])

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -205,27 +205,23 @@ const InitialScreen = ({ className }: IInitialScreen) => {
     setLoginMode(loginType)
     try {
       await login(loginType)
-    } catch (error) {
+    } catch (error: any) {
       let errorMessage = t`There was an error authenticating`
-      console.log(error)
 
-      if (Array.isArray(error) && error[0]) {
-        if (
-          error[0].type === "signature" &&
-          error[0].message === "Invalid signature"
-        ) {
-          errorMessage = t`Failed to validate signature.
+      // Invalid signature, or contract wallet not deployed
+      if (error?.error?.code === 403 && error?.error?.message?.includes("Invalid signature")) {
+        errorMessage = t`Failed to validate signature.
             If you are using a contract wallet, please make 
             sure you have activated your wallet.`
-        }
       }
 
-      // WalletConnect be sassy
-      if ((error instanceof Error && error.message === "Just nope") || ((error as any).code === 4001)) {
+      // User rejected the signature request (WalletConnect be sassy)
+      if (error?.message === "Just nope" || error?.code === 4001) {
         errorMessage = t`Failed to get signature`
       }
 
-      if (error instanceof Error && error?.message === "user closed popup") {
+      // DirectAuth popup was closed
+      if (error?.message === "user closed popup") {
         errorMessage = t`The authentication popup was closed`
       }
 

diff --git a/packages/files-ui/src/Contexts/FilesContext.tsx b/packages/files-ui/src/Contexts/FilesContext.tsx
@@ -418,13 +418,12 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       setUploadsInProgress(false)
       // setting error
       let errorMessage = t`Something went wrong. We couldn't upload your file`
-
       // uploads cancelled through button
       if (axios.isCancel(error)) {
         errorMessage = t`Uploads cancelled`
       }
       // we will need a method to parse server errors
-      if (Array.isArray(error) && error[0].message.includes("conflict")) {
+      if (error?.error?.code === 409) {
         errorMessage = t`A file with the same name already exists`
       }
       updateToast(toastId, {
@@ -663,7 +662,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       return Promise.resolve()
     } catch (error: any) {
       console.error(error)
-      let errorMessage = `${t`An error occurred: `} ${typeof(error) === "string" ? error : error.length ? error[0].message : ""}`
+      let errorMessage = `${t`An error occurred: `} ${typeof(error) === "string" ? error : error.error.message ? error.error.message : ""}`
       if (axios.isCancel(error)) {
         errorMessage = t`Downloads cancelled`
       }
@@ -868,6 +867,8 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       }
     }).catch((error) => {
       console.error(error)
+    }).finally(() => {
+      refreshBuckets()
     })
   }, [getFileContent, encryptAndUploadFiles, filesApiClient, refreshBuckets, addToast, updateToast, getFileList])
 

diff --git a/packages/files-ui/src/Contexts/UserContext.tsx b/packages/files-ui/src/Contexts/UserContext.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect } from "react"
 import { useFilesApi } from "./FilesApiContext"
 import { useState } from "react"
 import { t } from "@lingui/macro"
+import { Details } from "@chainsafe/files-api-client"
 
 type UserContextProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -133,10 +134,11 @@ const UserProvider = ({ children }: UserContextProps) => {
       })
       return Promise.resolve()
     } catch (error: any) {
+      console.error(error)
       return Promise.reject(
-        Array.isArray(error) && error[0]
-          ? error[0].message
-          : "There was an error updating profile."
+        Array.isArray(error.error.details)
+          ? error.error.details.map((e: Details) => e.message).join(",")
+          : t`There was an error when setting username.`
       )
     }
   }
@@ -160,9 +162,10 @@ const UserProvider = ({ children }: UserContextProps) => {
       })
       return Promise.resolve()
     } catch (error: any) {
+      console.error(error)
       return Promise.reject(
-        Array.isArray(error) && error[0]
-          ? error[0].message
+        Array.isArray(error.error.details)
+          ? error.error.details.map((e: Details) => e.message).join(",")
           : t`There was an error when setting username.`
       )
     }

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -146,7 +146,7 @@ msgid "Create"
 msgstr "Erstellen"
 
 msgid "Create Folder"
-msgstr "Ordner erstellen"
+msgstr ""
 
 msgid "Create Shared Folder"
 msgstr ""
@@ -446,7 +446,7 @@ msgid "Number of copies (Replication Factor)"
 msgstr "Anzahl der Kopien (Replikationsfaktor)"
 
 msgid "OK"
-msgstr "OK"
+msgstr ""
 
 msgid "One sec, getting files ready…"
 msgstr "Eine Sekunde, die Dateien werden vorbereitet …"
@@ -715,6 +715,9 @@ msgstr "Es gab einen Fehler bei der Authentifizierung"
 msgid "There was an error connecting your wallet"
 msgstr ""
 
+msgid "There was an error creating the folder {0}"
+msgstr ""
+
 msgid "There was an error deleting your data"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -718,6 +718,9 @@ msgstr "There was an error authenticating"
 msgid "There was an error connecting your wallet"
 msgstr "There was an error connecting your wallet"
 
+msgid "There was an error creating the folder {0}"
+msgstr "There was an error creating the folder {0}"
+
 msgid "There was an error deleting your data"
 msgstr "There was an error deleting your data"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -147,7 +147,7 @@ msgid "Create"
 msgstr "Crear"
 
 msgid "Create Folder"
-msgstr "Crear Carpeta"
+msgstr ""
 
 msgid "Create Shared Folder"
 msgstr ""
@@ -450,7 +450,7 @@ msgid "Number of copies (Replication Factor)"
 msgstr "Número de copias (factor de replicación)"
 
 msgid "OK"
-msgstr "OK"
+msgstr ""
 
 msgid "One sec, getting files ready…"
 msgstr ""
@@ -719,6 +719,9 @@ msgstr "Hubo un error de autenticación."
 msgid "There was an error connecting your wallet"
 msgstr "Hubo un error al conectar su billetera"
 
+msgid "There was an error creating the folder {0}"
+msgstr ""
+
 msgid "There was an error deleting your data"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -147,7 +147,7 @@ msgid "Create"
 msgstr "Créer"
 
 msgid "Create Folder"
-msgstr "Créer un dossier"
+msgstr ""
 
 msgid "Create Shared Folder"
 msgstr "Créer un dossier partagé"
@@ -285,7 +285,7 @@ msgid "First name"
 msgstr "Prénom"
 
 msgid "Folder name is already in use"
-msgstr "Le nom du dossier est déjà utilisé"
+msgstr ""
 
 msgid "Folder uploads are not supported currently"
 msgstr "Le téléversement de dossiers n'est pas actuellement pris en charge"
@@ -450,7 +450,7 @@ msgid "Number of copies (Replication Factor)"
 msgstr "Nombre de copies (facteur de réplication)"
 
 msgid "OK"
-msgstr "OK"
+msgstr ""
 
 msgid "One sec, getting files ready…"
 msgstr "Un instant, nous préparons les fichiers…"
@@ -719,6 +719,9 @@ msgstr "Une erreur s’est produite lors de l’authentification"
 msgid "There was an error connecting your wallet"
 msgstr "Une erreur s’est produite lors de la connexion de votre wallet"
 
+msgid "There was an error creating the folder {0}"
+msgstr ""
+
 msgid "There was an error deleting your data"
 msgstr "Une erreur s'est produite lors de la suppression de vos données"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -146,7 +146,7 @@ msgid "Create"
 msgstr "Opprett"
 
 msgid "Create Folder"
-msgstr "Opprett mappe"
+msgstr ""
 
 msgid "Create Shared Folder"
 msgstr ""
@@ -446,7 +446,7 @@ msgid "Number of copies (Replication Factor)"
 msgstr ""
 
 msgid "OK"
-msgstr "OK"
+msgstr ""
 
 msgid "One sec, getting files ready…"
 msgstr ""
@@ -715,6 +715,9 @@ msgstr ""
 msgid "There was an error connecting your wallet"
 msgstr ""
 
+msgid "There was an error creating the folder {0}"
+msgstr ""
+
 msgid "There was an error deleting your data"
 msgstr ""
 

diff --git a/packages/gaming-ui/package.json b/packages/gaming-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.10",
+    "@chainsafe/files-api-client": "1.18.15",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/packages/gaming-ui/src/Components/Modules/LoginModule.tsx b/packages/gaming-ui/src/Components/Modules/LoginModule.tsx
@@ -176,21 +176,20 @@ const LoginModule = ({ className }: IInitialScreen) => {
       await login(loginType)
     } catch (error: any) {
       let errorMessage = t`There was an error authenticating`
-      console.log(error)
-      if (Array.isArray(error) && error[0]) {
-        if (
-          error[0].type === "signature" &&
-          error[0].message === "Invalid signature"
-        ) {
-          errorMessage = t`Failed to validate signature.
+
+      // Invalid signature, or contract wallet not deployed
+      if (error?.error?.code === 403 && error?.error?.message?.includes("Invalid signature")) {
+        errorMessage = t`Failed to validate signature.
             If you are using a contract wallet, please make 
             sure you have activated your wallet.`
-        }
       }
-      // WalletConnect be sassy
+
+      // User rejected the signature request (WalletConnect be sassy)
       if (error?.message === "Just nope" || error?.code === 4001) {
         errorMessage = t`Failed to get signature`
       }
+
+      // DirectAuth popup was closed
       if (error?.message === "user closed popup") {
         errorMessage = t`The authentication popup was closed`
       }

diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.10",
+    "@chainsafe/files-api-client": "1.18.15",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/packages/storage-ui/src/Components/Modules/CreateFolderModal/CreateFolderModal.tsx b/packages/storage-ui/src/Components/Modules/CreateFolderModal/CreateFolderModal.tsx
@@ -110,13 +110,14 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
             setCreatingFolder(false)
             helpers.resetForm()
             close()
-          } catch (errors: any) {
+          } catch (error: any) {
             setCreatingFolder(false)
-            if (errors[0].message.includes("Entry with such name can")) {
+            if (error?.error?.code === 409) {
               helpers.setFieldError("name", t`Folder name is already in use`)
             } else {
-              helpers.setFieldError("name", errors[0].message)
+              helpers.setFieldError("name", t`There was an error creating the folder ${error?.message}`)
             }
+            helpers.setSubmitting(false)
           }
           helpers.setSubmitting(false)
         }}

diff --git a/packages/storage-ui/src/Components/Modules/LoginModule.tsx b/packages/storage-ui/src/Components/Modules/LoginModule.tsx
@@ -203,26 +203,26 @@ const LoginModule = ({ className }: IInitialScreen) => {
     setLoginMode(loginType)
     try {
       await login(loginType)
-    } catch (error) {
+    } catch (error: any) {
       let errorMessage = t`There was an error authenticating`
-      console.log(error)
-      if (Array.isArray(error) && error[0]) {
-        if (
-          error[0].type === "signature" &&
-          error[0].message === "Invalid signature"
-        ) {
-          errorMessage = t`Failed to validate signature.
+
+      // Invalid signature, or contract wallet not deployed
+      if (error?.error?.code === 403 && error?.error?.message?.includes("Invalid signature")) {
+        errorMessage = t`Failed to validate signature.
             If you are using a contract wallet, please make 
             sure you have activated your wallet.`
-        }
       }
-      // WalletConnect be sassy
-      if ((error instanceof Error && error.message === "Just nope") || ((error as any).code === 4001)) {
+
+      // User rejected the signature request (WalletConnect be sassy)
+      if (error?.message === "Just nope" || error?.code === 4001) {
         errorMessage = t`Failed to get signature`
       }
-      if (error instanceof Error && error.message === "user closed popup") {
+
+      // DirectAuth popup was closed
+      if (error?.message === "user closed popup") {
         errorMessage = t`The authentication popup was closed`
       }
+
       setError(errorMessage)
     }
     setIsConnecting(false)

diff --git a/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx b/packages/storage-ui/src/Components/Modules/UploadFileModal/UploadFileModal.tsx
@@ -94,12 +94,8 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => {
       await uploadFiles(bucket.id, values.files, currentPath)
       refreshContents && refreshContents()
       helpers.resetForm()
-    } catch (errors: any) {
-      if (errors[0].message.includes("conflict with existing")) {
-        helpers.setFieldError("files", t`File/Folder already exists`)
-      } else {
-        helpers.setFieldError("files", errors[0].message)
-      }
+    } catch (error: any) {
+      console.error(error)
     }
     helpers.setSubmitting(false)
   }, [close, currentPath, uploadFiles, refreshContents, bucket])