Merge pull request #62 from zeroflare/dev-frontend

Enhance error handling in registration components to gracefully manag…

Author: HsuMsix

frontend/register/src/App.tsx

@@ -67,15 +67,26 @@ function App() {
         }
 
         if (response.ok) {
-          const data = await response.json()
+          let data: { email?: string } = {}
+          try {
+            data = await response.json()
+          } catch {
+            setError('伺服器回應格式錯誤')
+            return
+          }
           if (data.email) {
             setEmail(data.email)
             setTokenExpired(false)
           } else {
             setError('無法取得註冊資訊')
           }
         } else {
-          const errorData = await response.json()
+          let errorData: { error?: string } = {}
+          try {
+            errorData = await response.json()
+          } catch {
+            // 回應不是 JSON 格式，忽略解析錯誤
+          }
           // 檢查是否為 token 不存在或已過期的錯誤
           if (response.status === 404 && errorData.error === 'token 不存在或已過期') {
             setTokenExpired(true)
@@ -172,7 +183,13 @@ function App() {
           `${API_BASE_URL}/register/result?transactionId=${transactionId}`
         )
         if (response.ok) {
-          const data: RegistrationResult = await response.json()
+          let data: RegistrationResult
+          try {
+            data = await response.json()
+          } catch {
+            console.error('檢查註冊狀態失敗: 伺服器回應格式錯誤')
+            return
+          }
           // 如果是 "Waiting for registration" 訊息，繼續輪詢
           if (data.message === 'Waiting for registration') {
             console.log('等待註冊:', data.message)
@@ -187,10 +204,20 @@ function App() {
           }
         } else if (response.status === 400) {
           // 還在等待驗證，繼續輪詢
-          const data = await response.json()
+          let data: { message?: string } = {}
+          try {
+            data = await response.json()
+          } catch {
+            // 回應不是 JSON 格式，忽略
+          }
           console.log('等待註冊:', data.message)
         } else {
-          const errorData = await response.json()
+          let errorData: { error?: string } = {}
+          try {
+            errorData = await response.json()
+          } catch {
+            // 回應不是 JSON 格式，忽略
+          }
           console.error('檢查註冊狀態失敗:', errorData)
         }
       } catch (err) {

frontend/register/src/components/RegistrationForm.tsx

@@ -140,7 +140,12 @@ export function RegistrationForm({
       })
 
       if (!response.ok) {
-        const errorData = await response.json()
+        let errorData: { error?: string } = {}
+        try {
+          errorData = await response.json()
+        } catch {
+          // 回應不是 JSON 格式，忽略解析錯誤
+        }
         if (response.status === 429) {
           // 冷卻期錯誤
           setOtpCooldown(60)
@@ -151,7 +156,11 @@ export function RegistrationForm({
         throw new Error(errorData.error || '發送驗證碼失敗')
       }
 
-      await response.json()
+      try {
+        await response.json()
+      } catch {
+        // 成功回應但不是 JSON 格式，忽略
+      }
       setOtpSent(true)
       setOtpCooldown(60) // 設置 60 秒冷卻期
       setOtpExpiry(600) // 設置 10 分鐘有效期
@@ -278,15 +287,25 @@ export function RegistrationForm({
       })
 
       if (!response.ok) {
-        const errorData = await response.json()
+        let errorData: { error?: string } = {}
+        try {
+          errorData = await response.json()
+        } catch {
+          // 回應不是 JSON 格式，忽略解析錯誤
+        }
         // 檢查是否為 token 不存在或已過期的錯誤
         if (response.status === 404 && errorData.error === 'token 不存在或已過期') {
           throw new Error('token 不存在或已過期')
         }
         throw new Error(errorData.error || '註冊失敗')
       }
 
-      const data: QRCodeResponse = await response.json()
+      let data: QRCodeResponse
+      try {
+        data = await response.json()
+      } catch {
+        throw new Error('伺服器回應格式錯誤')
+      }
       setError('')
       onSubmit(data)
     } catch (err) {