chore: 在面試表單放 error log

src/actions/auth.js

@@ -5,10 +5,7 @@ import {
 } from 'apis/auth';
 import { queryMeApi } from 'apis/me';
 import authStatus from 'constants/authStatus';
-import rollbar from 'utils/rollbar';
-import { NOTIFICATION_TYPE } from 'constants/toastNotification';
-import { ERROR_CODE_MSG } from 'constants/errorCodeMsg';
-import { pushNotification } from 'actions/toastNotification';
+import { pushErrorNotificationAndRollbarAndThrowError } from 'actions/toastNotification';
 import { GraphqlError } from 'utils/errors';
 
 export const SET_LOGIN = '@@auth/SET_LOGIN';
@@ -42,60 +39,32 @@ const FBSDKLogin = FB => {
   });
 };
 
-const composeErrMsg = (code, message, error) => {
-  if (error) {
-    return `[${code}] ${message}: ${error}`;
-  } else {
-    return `[${code}] ${message}`;
-  }
-};
-const loginErrorToast = (code, message) =>
-  pushNotification(NOTIFICATION_TYPE.ALERT, composeErrMsg(code, message));
-
-const toastNotificationAndRollbarAndThrowError = (errorCode, error, extra) => (
-  dispatch,
-  getState,
-) => {
-  dispatch(loginErrorToast(errorCode, ERROR_CODE_MSG[errorCode].external));
-  const internalMsg = composeErrMsg(
-    errorCode,
-    ERROR_CODE_MSG[errorCode].internal,
-    error,
-  );
-  if (!extra) {
-    rollbar.error(internalMsg);
-  } else {
-    rollbar.error(internalMsg, extra);
-  }
-  throw new Error(internalMsg);
-};
-
 /**
  * Use `hooks/login/useFacebookLogin` as possible
  */
 export const loginWithFB = FBSDK => async (dispatch, getState) => {
   if (!FBSDK) {
-    dispatch(toastNotificationAndRollbarAndThrowError('ER0001'));
+    dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0001'));
   }
 
   let fbLoginResponse = null;
   try {
     // invoke FB SDK Login to get FB-issued access token
     fbLoginResponse = await FBSDKLogin(FBSDK);
   } catch (error) {
-    dispatch(toastNotificationAndRollbarAndThrowError('ER0002', error));
+    dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0002', error));
   }
 
   if (!fbLoginResponse || !fbLoginResponse.status) {
-    dispatch(toastNotificationAndRollbarAndThrowError('ER0003'));
+    dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0003'));
   }
 
   switch (fbLoginResponse.status) {
     case authStatus.CANCELED:
       return;
     case authStatus.NOT_AUTHORIZED:
       dispatch(setLogin(authStatus.NOT_AUTHORIZED));
-      dispatch(toastNotificationAndRollbarAndThrowError('ER0004'));
+      dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0004'));
       break;
     case authStatus.CONNECTED:
       try {
@@ -107,19 +76,19 @@ export const loginWithFB = FBSDK => async (dispatch, getState) => {
       } catch (error) {
         if (error instanceof GraphqlError && error.codes) {
           if (error.codes[0] === 'UNAUTHENTICATED') {
-            dispatch(toastNotificationAndRollbarAndThrowError('ER0014'));
+            dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0014'));
             break;
           } else if (error.codes[0] === 'FORBIDDEN') {
-            dispatch(toastNotificationAndRollbarAndThrowError('ER0015'));
+            dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0015'));
             break;
           }
         }
-        dispatch(toastNotificationAndRollbarAndThrowError('ER0016', error));
+        dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0016', error));
       }
       break;
     default:
       dispatch(
-        toastNotificationAndRollbarAndThrowError(
+        pushErrorNotificationAndRollbarAndThrowError(
           'ER0006',
           null,
           fbLoginResponse,
@@ -141,27 +110,27 @@ export const loginWithGoogle = credentialResponse => async (
 ) => {
   //  TODO: 當登入失敗
   if (!credentialResponse || !credentialResponse.credential) {
-    dispatch(toastNotificationAndRollbarAndThrowError('ER0009'));
+    dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0009'));
   }
   const idToken = credentialResponse.credential;
   try {
     const response = await postAuthGoogleApi({ idToken });
     if (response && response.token) {
       await dispatch(loginWithToken(response.token));
     } else {
-      dispatch(toastNotificationAndRollbarAndThrowError('ER0010'));
+      dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0010'));
     }
   } catch (error) {
     if (error instanceof GraphqlError && error.codes) {
       if (error.codes[0] === 'UNAUTHENTICATED') {
-        dispatch(toastNotificationAndRollbarAndThrowError('ER0011'));
+        dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0011'));
         return;
       } else if (error.codes[0] === 'FORBIDDEN') {
-        dispatch(toastNotificationAndRollbarAndThrowError('ER0012'));
+        dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0012'));
         return;
       }
     }
-    dispatch(toastNotificationAndRollbarAndThrowError('ER0013', error));
+    dispatch(pushErrorNotificationAndRollbarAndThrowError('ER0013', error));
   }
 };
 

src/actions/toastNotification.js

@@ -1,3 +1,6 @@
+import rollbar from 'utils/rollbar';
+import { NOTIFICATION_TYPE } from 'constants/toastNotification';
+import { ERROR_CODE_MSG } from 'constants/errorCodeMsg';
 import { generateNotification } from 'utils/toastNotification';
 
 export const PUSH = '@@TOAST_NOTIFICATION/PUSH';
@@ -16,3 +19,51 @@ export const removeNotification = id => ({
   type: REMOVE,
   id,
 });
+
+const composeErrorMessage = (code, message, error) => {
+  if (error) {
+    return `[${code}] ${message}: ${error}`;
+  } else {
+    return `[${code}] ${message}`;
+  }
+};
+
+const pushErrorNotification = (code, message) =>
+  pushNotification(NOTIFICATION_TYPE.ALERT, composeErrorMessage(code, message));
+
+export const pushErrorNotificationAndRollbar = (errorCode, error, extra) => (
+  dispatch,
+  getState,
+) => {
+  dispatch(
+    pushErrorNotification(errorCode, ERROR_CODE_MSG[errorCode].external),
+  );
+
+  const internalMessage = composeErrorMessage(
+    errorCode,
+    ERROR_CODE_MSG[errorCode].internal,
+    error,
+  );
+
+  if (!extra) {
+    rollbar.error(internalMessage);
+  } else {
+    rollbar.error(internalMessage, extra);
+  }
+};
+
+export const pushErrorNotificationAndRollbarAndThrowError = (
+  errorCode,
+  error,
+  extra,
+) => (dispatch, getState) => {
+  dispatch(pushErrorNotificationAndRollbar(errorCode, error, extra));
+
+  const internalMessage = composeErrorMessage(
+    errorCode,
+    ERROR_CODE_MSG[errorCode].internal,
+    error,
+  );
+
+  throw new Error(internalMessage);
+};

src/components/common/FormBuilder/index.js

@@ -25,6 +25,8 @@ import styles from './FormBuilder.module.css';
 import { OptionPropType } from './QuestionBuilder/Checkbox/PropTypes';
 import rollbar from 'utils/rollbar';
 import { ERROR_CODE_MSG } from 'constants/errorCodeMsg';
+import { useDispatch } from 'react-redux';
+import { pushErrorNotificationAndRollbar } from 'actions/toastNotification';
 
 const findIfQuestionsAcceptDraft = draft =>
   R.all(
@@ -110,6 +112,7 @@ const FormBuilder = ({
 
   const [isWarningShown, setWarningShown] = useState(false);
   const [showsNavigation, setShowsNavigation] = useState(true);
+  const dispatch = useDispatch();
 
   const isSubmittable = useMemo(
     () => findIfQuestionsAcceptDraft(draft)(questions),
@@ -120,6 +123,7 @@ const FormBuilder = ({
     if (warning) {
       if (onValidateFail)
         onValidateFail({ dataKey, value: draft[dataKey], warning });
+      else dispatch(pushErrorNotificationAndRollbar('ER0021'));
     } else if (isSubmittable) {
       onSubmit(draft);
     } else {
@@ -131,7 +135,15 @@ const FormBuilder = ({
       );
       console.error(`Not submittable`);
     }
-  }, [warning, isSubmittable, onValidateFail, dataKey, draft, onSubmit]);
+  }, [
+    warning,
+    isSubmittable,
+    onValidateFail,
+    dataKey,
+    draft,
+    onSubmit,
+    dispatch,
+  ]);
 
   useEffect(() => {
     if (open) {

src/constants/errorCodeMsg.js

@@ -81,4 +81,7 @@ export const ERROR_CODE_MSG = {
   ER0020: {
     internal: 'Submit work experience failed',
   },
+  ER0021: {
+    internal: 'Warning without validation failure',
+  },
 };