fix(console): improve error handling in connector details and sender tester

packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx

@@ -21,7 +21,6 @@ type Props = {
 const ConnectorContent = ({ connectorData, onConnectorUpdated }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [config, setConfig] = useState<string>();
-  const [saveError, setSaveError] = useState<string>();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const api = useApi();
 
@@ -54,10 +53,8 @@ const ConnectorContent = ({ connectorData, onConnectorUpdated }: Props) => {
   }, [config, defaultConfig]);
 
   const handleSave = async () => {
-    setSaveError(undefined);
-
     if (!config) {
-      setSaveError(t('connector_details.save_error_empty_config'));
+      toast(t('connector_details.save_error_empty_config'));
 
       return;
     }
@@ -78,7 +75,9 @@ const ConnectorContent = ({ connectorData, onConnectorUpdated }: Props) => {
       toast.success(t('general.saved'));
     } catch (error: unknown) {
       if (error instanceof SyntaxError) {
-        setSaveError(t('connector_details.save_error_json_parse_error'));
+        toast.error(t('connector_details.save_error_json_parse_error'));
+      } else {
+        toast.error(t('errors.unexpected_error'));
       }
     }
 
@@ -105,7 +104,6 @@ const ConnectorContent = ({ connectorData, onConnectorUpdated }: Props) => {
             config={config}
           />
         )}
-        {saveError && <div>{saveError}</div>}
       </div>
       <div className={detailsStyles.footer}>
         <div className={detailsStyles.footerMain}>

packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx

@@ -3,6 +3,7 @@ import { phoneRegEx, emailRegEx } from '@logto/shared';
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
@@ -55,16 +56,25 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props)
 
   const onSubmit = handleSubmit(async (formData) => {
     const { sendTo } = formData;
-    const configJson = config ? (JSON.parse(config) as JSON) : undefined;
 
-    const data = { config: configJson, ...(isSms ? { phone: sendTo } : { email: sendTo }) };
+    try {
+      const configJson = config ? (JSON.parse(config) as JSON) : undefined;
+      const data = { config: configJson, ...(isSms ? { phone: sendTo } : { email: sendTo }) };
 
-    await api
+      await api
-      .post(`/api/connectors/${connectorId}/test`, {
+        .post(`/api/connectors/${connectorId}/test`, {
-        json: data,
+          json: data,
-      })
+        })
-      .json();
+        .json();
-    setShowTooltip(true);
+
+      setShowTooltip(true);
+    } catch (error: unknown) {
+      if (error instanceof SyntaxError) {
+        toast.error(t('connector_details.save_error_json_parse_error'));
+      } else {
+        toast.error(t('errors.unexpected_error'));
+      }
+    }
   });
 
   return (

packages/phrases/src/locales/en.ts

@@ -59,6 +59,7 @@ const translation = {
       username_pattern_error:
         'Username should only contain letters, numbers, or underscore and should not start with a number.',
       password_pattern_error: 'Password requires a minimum of 6 characters',
+      unexpected_error: 'An unexpected error occurred',
     },
     tab_sections: {
       overview: 'Overview',

packages/phrases/src/locales/zh-cn.ts

@@ -59,6 +59,7 @@ const translation = {
       more_details: '查看详情',
       username_pattern_error: '用户名只能包含英文字母、数字或下划线，且不以数字开头。',
       password_pattern_error: '密码应不少于 6 位',
+      unexpected_error: '发生未知错误',
     },
     tab_sections: {
       overview: '概览',