Suppress AJAX errors caused by 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.

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;
 
 /**

changelogs/unreleased/nfriend-dont-show-error-messages-on-browser-navigation.yml

+---
+title: Suppress error messages shown when navigating to a new page
+merge_request: 32779
+author:
+type: fixed

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.