refactor(account-center): global error handler (#8003)

Author: wangsijie

packages/account-center/src/components/CodeVerification/index.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext';
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import useApi from '@ac/hooks/use-api';
+import useErrorHandler from '@ac/hooks/use-error-handler';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
 
 import styles from './index.module.scss';
@@ -64,8 +65,8 @@ const CodeVerification = ({
   const { loading } = useContext(LoadingContext);
   const sendCodeRequest = useApi(sendCode);
   const verifyCodeRequest = useApi(verifyCode);
+  const handleError = useErrorHandler();
   const [codeInput, setCodeInput] = useState<string[]>([]);
-  const [errorMessage, setErrorMessage] = useState<string>();
   const [countdown, setCountdown] = useState(0);
   const [pendingVerificationRecord, setPendingVerificationRecord] = useState<{
     recordId: string;
@@ -111,7 +112,12 @@ const CodeVerification = ({
 
     const [error, result] = await sendCodeRequest(accessToken, identifier);
 
-    if (error || !result) {
+    if (error) {
+      await handleError(error);
+      return;
+    }
+
+    if (!result) {
       setToast(t('account_center.email_verification.error_send_failed'));
       return;
     }
@@ -121,10 +127,18 @@ const CodeVerification = ({
       expiresAt: result.expiresAt,
     });
     setCodeInput([]);
-    setErrorMessage(undefined);
     setHasSentCode(true);
     startCountdown();
-  }, [getAccessToken, identifier, loading, sendCodeRequest, setToast, startCountdown, t]);
+  }, [
+    getAccessToken,
+    handleError,
+    identifier,
+    loading,
+    sendCodeRequest,
+    setToast,
+    startCountdown,
+    t,
+  ]);
 
   const handleVerify = useCallback(
     async (code: string[]) => {
@@ -154,7 +168,7 @@ const CodeVerification = ({
 
       if (error) {
         setCodeInput([]);
-        setErrorMessage(t('account_center.email_verification.error_verify_failed'));
+        await handleError(error);
         return;
       }
 
@@ -163,11 +177,11 @@ const CodeVerification = ({
     },
     [
       getAccessToken,
+      handleError,
       identifier,
       loading,
       pendingVerificationRecord,
       setVerificationId,
-      t,
       verifyCodeRequest,
     ]
   );
@@ -206,10 +220,8 @@ const CodeVerification = ({
             name={codeInputName}
             className={styles.codeInput}
             value={codeInput}
-            error={errorMessage}
             onChange={(code) => {
               setCodeInput(code);
-              setErrorMessage(undefined);
             }}
           />
           <div className={styles.message}>
@@ -238,7 +250,7 @@ const CodeVerification = ({
             isLoading={loading}
             onClick={() => {
               if (!isCodeReady(codeInput)) {
-                setErrorMessage(t('error.invalid_passcode'));
+                setToast(t('error.invalid_passcode'));
                 return;
               }
 

packages/account-center/src/components/PasswordVerification/index.tsx

@@ -8,6 +8,7 @@ import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext'
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import { verifyPassword } from '@ac/apis/verification';
 import useApi from '@ac/hooks/use-api';
+import useErrorHandler from '@ac/hooks/use-error-handler';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
 
 import styles from './index.module.scss';
@@ -23,6 +24,7 @@ const PasswordVerification = ({ onBack }: Props) => {
   const { loading } = useContext(LoadingContext);
   const [password, setPassword] = useState('');
   const asyncVerifyPassword = useApi(verifyPassword);
+  const handleError = useErrorHandler();
 
   const handleVerify = async (event?: FormEvent<HTMLFormElement>) => {
     event?.preventDefault();
@@ -40,7 +42,12 @@ const PasswordVerification = ({ onBack }: Props) => {
 
     const [error, result] = await asyncVerifyPassword(accessToken, password);
 
-    if (error || !result) {
+    if (error) {
+      await handleError(error);
+      return;
+    }
+
+    if (!result) {
       setToast(t('account_center.password_verification.error_failed'));
       return;
     }

packages/account-center/src/hooks/use-error-handler.ts

@@ -0,0 +1,59 @@
+import type { RequestErrorBody } from '@logto/schemas';
+import { HTTPError, TimeoutError } from 'ky';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+
+export type ErrorHandlers = {
+  [key in RequestErrorBody['code']]?: (error: RequestErrorBody) => void | Promise<void>;
+} & {
+  // Overwrite default global error handle logic
+  global?: (error: RequestErrorBody) => void | Promise<void>;
+};
+
+const useErrorHandler = () => {
+  const { t } = useTranslation();
+  const { setToast } = useContext(PageContext);
+
+  const handleError = useCallback(
+    async (error: unknown, errorHandlers?: ErrorHandlers) => {
+      if (error instanceof HTTPError) {
+        try {
+          const logtoError = await error.response.json<RequestErrorBody>();
+
+          const { code, message } = logtoError;
+
+          const handler = errorHandlers?.[code] ?? errorHandlers?.global;
+
+          if (handler) {
+            await handler(logtoError);
+          } else {
+            setToast(message);
+          }
+
+          return;
+        } catch (error) {
+          setToast(t('error.unknown'));
+          console.error(error);
+
+          return;
+        }
+      }
+
+      if (error instanceof TimeoutError) {
+        setToast(t('error.timeout'));
+
+        return;
+      }
+
+      setToast(t('error.unknown'));
+      console.error(error);
+    },
+    [setToast, t]
+  );
+
+  return handleError;
+};
+
+export default useErrorHandler;