fix: Show error messages from response (#10173)

This PR fixes the issue where proper error messages from the backend
were not displayed when an email already exists in the system during a
profile update, or when a phone number is already taken for Twilio
during the creation of a new account.

Fixes:
https://linear.app/chatwoot/issue/CW-3560/prod-customer-facing-issue-updating-email

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue

@@ -6,6 +6,7 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 export default {
   props: {
@@ -101,7 +102,10 @@ export default {
           },
         });
       } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
+        const errorMessage =
+          parseAPIErrorResponse(error) ||
+          this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE');
+        useAlert(errorMessage);
       }
     },
   },

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -4,6 +4,7 @@ import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
@@ -109,9 +110,7 @@ export default {
 
         return true; // return the value so that the status can be known
       } catch (error) {
-        alertMessage = error?.response?.data?.error
-          ? error.response.data.error
-          : errorMessage;
+        alertMessage = parseAPIErrorResponse(error) || errorMessage;
 
         return false; // return the value so that the status can be known
       } finally {

app/javascript/dashboard/store/modules/inboxes.js

@@ -183,7 +183,7 @@ export const actions = {
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
-      throw new Error(error);
+      throw error;
     }
   },
   createFBChannel: async ({ commit }, params) => {