From 66067a1dfed7e7d89d3a1da7b7f03a7239c89dc9 Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Tue, 11 Aug 2026 09:31:40 +0530 Subject: [PATCH] fix(inboxes): show facebook inbox creation errors (#15408) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Facebook inbox creation failures in Settings could leave users on the same screen without explaining what went wrong. This change preserves the backend error response and displays it through the existing toast mechanism, making account-limit and other creation failures visible and actionable. The shared action now passes the original API error through, so the newer onboarding flow also receives the specific backend message. Successful Facebook inbox creation remains unchanged. ### How to reproduce 1. Use an account that has reached its inbox limit. 2. Go to Settings → Inboxes → Add Inbox → Facebook. 3. Select a Facebook Page and create the inbox. 4. Previously, the loading state ended without any visible error. ### How to test 1. Attempt Facebook inbox creation while the backend returns an HTTP 402 account-limit error. 2. Confirm the returned error appears as a toast message. 3. Retry after increasing the account limit and confirm inbox creation continues normally. ### Things to know The toast falls back to a generic localized creation error when the API response does not contain a displayable message. Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com> --- app/javascript/dashboard/i18n/locale/en/inboxMgmt.json | 1 + .../dashboard/settings/inbox/channels/Facebook.vue | 9 ++++++++- app/javascript/dashboard/store/modules/inboxes.js | 2 +- .../store/modules/specs/inboxes/actions.spec.js | 5 +++-- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 53f9c81e8..bef5bc89f 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -562,6 +562,7 @@ "ERROR_FB_AUTH": "Something went wrong, Please refresh page...", "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ", "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles here.", + "ERROR_CHANNEL_CREATION": "We were unable to create the inbox. Please try again.", "CREATING_CHANNEL": "Creating your Inbox...", "TITLE": "Configure Inbox Details", "DESC": "" diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue index 171bf42c6..531797054 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue @@ -14,6 +14,7 @@ import { useAccount } from 'dashboard/composables/useAccount'; import NextButton from 'dashboard/components-next/button/Button.vue'; import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue'; import { META_RESTRICTION_STATUS_URL } from 'dashboard/constants/globals'; +import { parseAPIErrorResponse } from 'dashboard/store/utils/api'; import * as Sentry from '@sentry/vue'; @@ -152,7 +153,13 @@ export default { params: { page: 'new', inbox_id: data.id }, }); }) - .catch(() => { + .catch(error => { + const errorMessage = parseAPIErrorResponse(error); + useAlert( + typeof errorMessage === 'string' + ? errorMessage + : this.$t('INBOX_MGMT.DETAILS.ERROR_CHANNEL_CREATION') + ); this.isCreating = false; }); } diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js index ed2db91bb..2696405ce 100644 --- a/app/javascript/dashboard/store/modules/inboxes.js +++ b/app/javascript/dashboard/store/modules/inboxes.js @@ -226,7 +226,7 @@ export const actions = { return response.data; } catch (error) { commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false }); - throw new Error(error); + throw error; } }, createWhatsAppEmbeddedSignup: async ({ commit }, params) => { diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js index edbc3f764..0c5cfbe67 100644 --- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js +++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js @@ -95,8 +95,9 @@ describe('#actions', () => { ]); }); it('sends correct actions if API is error', async () => { - axios.post.mockRejectedValue({ message: 'Incorrect header' }); - await expect(actions.createFBChannel({ commit })).rejects.toThrow(Error); + const error = { response: { data: { error: 'Incorrect header' } } }; + axios.post.mockRejectedValue(error); + await expect(actions.createFBChannel({ commit })).rejects.toBe(error); expect(commit.mock.calls).toEqual([ [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }], [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],