chore: Add better error messages for Facebook unauthorized (#7936)

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -371,6 +371,8 @@
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
       "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 <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
       "CREATING_CHANNEL": "Creating your Inbox...",
       "TITLE": "Configure Inbox Details",
       "DESC": ""

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

@@ -17,9 +17,16 @@
       </p>
     </div>
     <div v-else>
-      <loading-state v-if="showLoader" :message="emptyStateMessage" />
+      <div v-if="hasError" class="max-w-lg mx-auto text-center">
+        <h5>{{ errorStateMessage }}</h5>
+        <p
+          v-if="errorStateDescription"
+          v-dompurify-html="errorStateDescription"
+        />
+      </div>
+      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
       <form
-        v-if="!showLoader"
+        v-else
         class="mx-0 flex flex-wrap"
         @submit.prevent="createChannel()"
       >
@@ -99,6 +106,7 @@ export default {
   data() {
     return {
       isCreating: false,
+      hasError: false,
       omniauth_token: '',
       user_access_token: '',
       channel: 'facebook',
@@ -106,6 +114,8 @@ export default {
       pageName: '',
       pageList: [],
       emptyStateMessage: this.$t('INBOX_MGMT.DETAILS.LOADING_FB'),
+      errorStateMessage: '',
+      errorStateDescription: '',
       hasLoginStarted: false,
     };
   },
@@ -194,19 +204,30 @@ export default {
     tryFBlogin() {
       FB.login(
         response => {
+          this.hasError = false;
           if (response.status === 'connected') {
             this.fetchPages(response.authResponse.accessToken);
           } else if (response.status === 'not_authorized') {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
             // The person is logged into Facebook, but not your app.
-            this.emptyStateMessage = this.$t(
-              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
+            this.errorStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED'
+            );
+            this.errorStateDescription = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED_HELP'
             );
           } else {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
             // The person is not logged into Facebook, so we're not sure if
             // they are logged into this app or not.
-            this.emptyStateMessage = this.$t(
+            this.errorStateMessage = this.$t(
               'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
             );
+            this.errorStateDescription = '';
           }
         },
         {

app/services/instagram/message_text.rb

@@ -44,6 +44,7 @@ class Instagram::MessageText < Instagram::WebhooksBaseService
       @inbox.channel.authorization_error!
       ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     rescue StandardError, Koala::Facebook::ClientError => e
+      Rails.logger.warn("[FacebookUserFetchClientError]: #{e.message}")
       ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     end