Suppress AJAX errors caused by browser navigationnfriend-dont-show-error-messages-on-browser-navigation

This commit attempts to detect when errors are caused due to AJAX
requests being cancelled when the user navigates to a new page. If this
is the case, we swallow the error so that an error message isn't shown
to the user a split second before they navigate away from the page.

3 files changed, 34 insertions, 0 deletions

diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index 37721cd030c..d9981dfcd66 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -25,6 +25,31 @@ axios.interceptors.response.use(
   },
 );
 
+if (window.gon && window.gon.features && window.gon.features.suppressAjaxNavigationErrors) {
+  let isUserNavigating = false;
+  window.addEventListener('beforeunload', () => {
+    isUserNavigating = true;
+  });
+
+  // Ignore AJAX errors caused by requests
+  // being cancelled due to browser navigation
+  axios.interceptors.response.use(
+    response => response,
+    err => {
+      if (isUserNavigating && err.code === 'ECONNABORTED') {
+        // If the user is navigating away from the current page,
+        // prevent .catch() handlers from being called by
+        // returning a Promise that never resolves
+        return new Promise(() => {});
+      }
+
+      // The error is not related to browser navigation,
+      // so propagate the error
+      return Promise.reject(err);
+    },
+  );
+}
+
 export default axios;
 
 /**
diff --git a/changelogs/unreleased/nfriend-dont-show-error-messages-on-browser-navigation.yml b/changelogs/unreleased/nfriend-dont-show-error-messages-on-browser-navigation.yml
new file mode 100644
index 00000000000..e70206346d6
--- /dev/null
+++ b/changelogs/unreleased/nfriend-dont-show-error-messages-on-browser-navigation.yml
@@ -0,0 +1,5 @@
+---
+title: Suppress error messages shown when navigating to a new page
+merge_request: 32779
+author:
+type: fixed
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index 92917028851..850cad3ec3b 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -38,6 +38,10 @@ module Gitlab
         gon.current_user_fullname = current_user.name
         gon.current_user_avatar_url = current_user.avatar_url
       end
+
+      # Initialize gon.features with any flags that should be
+      # made globally available to the frontend
+      push_frontend_feature_flag(:suppress_ajax_navigation_errors)
     end
 
     # Exposes the state of a feature flag to the frontend code.