Fixing problem with missing error message

frontend/src/routes/sponsor/register/stepRegistration.tsx

@@ -96,15 +96,29 @@ export default function StepRegistration() {
     fetch('/api/ui/v1/invite/', submitJsonOpts('POST', payload))
       .then((res) => {
         if (!res.ok) {
-          res.text().then((text) => {
-            setSubmitState(SubmitState.SubmitFailure)
-            setSubmitErrorReport({
-              errorHeading: t('error.invitationCreationFailedHeader'),
-              statusCode: res.status,
-              statusText: res.statusText,
-              errorBodyText: text,
+          // Try to extract data from body of error message
+          res
+            .text()
+            .then((text) => {
+              setSubmitState(SubmitState.SubmitFailure)
+              setSubmitErrorReport({
+                errorHeading: t('error.invitationCreationFailedHeader'),
+                statusCode: res.status,
+                statusText: res.statusText,
+                errorBodyText: text,
+              })
+            })
+            .catch((error) => {
+              // Extracting data from body failed, just show an error message with no body text
+              console.error('error', error)
+              setSubmitErrorReport({
+                errorHeading: t('error.invitationCreationFailedHeader'),
+                statusCode: res.status,
+                statusText: res.statusText,
+                errorBodyText: undefined,
+              })
+              setSubmitState(SubmitState.SubmitFailure)
             })
-          })
         } else {
           return res.text()
         }
@@ -118,7 +132,7 @@ export default function StepRegistration() {
         }
       })
       .catch((error) => {
-        console.log('error', error)
+        console.error('error', error)
         setSubmitState(SubmitState.SubmitFailure)
       })
   }