Identifying all failed http GET requests

Question

Identifying all failed http GET requests

Within my application, there is a grid that retrieves data through HTTP promises. Currently, I am able to recognize errorCallbacks - as demonstrated below:

myDataPromise.then(function () {
    //do stuff
}, function errorCallback(response) {
        if (response.statusText === "Not Found") {
            //do stuff
        }else if(response.statusText === "Internal Server Error"){
            //do stuff
        }

However, in the case of an SSL error, such as "ERR::CONNECTION REFUSED" returned by Chrome, I am unable to detect it as easily as I can with 404 errors, for example. What I really want is to show a simple message or image indicating that there was an error in retrieving the user's data, regardless of the specific error. If an HTTP GET request fails in any way, the user should be informed. This requirement seems common, yet I am having trouble finding relevant information online.

javascript angularjs

Answer 1

Answer №1

To implement an interceptor, you must follow these steps:

 // create the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dep1, dep2) {
  return {
    'request': function(config) {
      // do something with the request
      return config;
    },

    'requestError': function(rejection) {
      // handle request errors
      if (canFix(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },

    'response': function(response) {
      // handle response success
      return response;
    },

    'responseError': function(rejection) {
      // handle response errors
      if (canFix(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');


// Alternatively, use an anonymous factory to register the interceptor
$httpProvider.interceptors.push(function($q, dep1, dep2) {
  return {
    'request': function(config) {
       // implement request logic here
    },

    'response': function(response) {
       // implement response logic here
    }
  };
});

This interceptor will capture all $http requests, including template loading.

Answer 2

To implement an interceptor, you must follow these steps:

 // create the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dep1, dep2) {
  return {
    'request': function(config) {
      // do something with the request
      return config;
    },

    'requestError': function(rejection) {
      // handle request errors
      if (canFix(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },

    'response': function(response) {
      // handle response success
      return response;
    },

    'responseError': function(rejection) {
      // handle response errors
      if (canFix(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');


// Alternatively, use an anonymous factory to register the interceptor
$httpProvider.interceptors.push(function($q, dep1, dep2) {
  return {
    'request': function(config) {
       // implement request logic here
    },

    'response': function(response) {
       // implement response logic here
    }
  };
});

This interceptor will capture all $http requests, including template loading.

Identifying all failed http GET requests

Answer №1

Similar questions

Is it possible to hide and reveal specific form elements based on the selection of a checkbox?

single calendar bootstrap-datepicker allowing users to select date ranges

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Setting response character encoding in Node.js/Express - how is it done?

Is it feasible to insert the result of a JavaScript code into a PHP script?

Unable to conceal adjacent element when z-index is set as 1

Is Dart the new AngularJS in terms of programming style?

What is the best method for gracefully opening external links in a reusable new tab?

Develop an array of unique objects with multiple dimensions, ensuring no duplicates are included

What is the best way to extract the class name from ui.item or event using the function(event, ui)?

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Obtain information from YouTube and format it into a list item

Transforming a massive JSON object into a Blob concerns directly converting it into an ArrayBuffer or Blob to prevent exceeding the maximum string length error

JavaScript code to copy a specified column through the last column, and then paste it down to the last row

Leveraging JavaScript and PHP for fetching image files and generating a downloadable zip folder

JavaScript: Selecting parent elements using getElementsByClassName

Component does not render on router.push('/page') without reloading first

Error Encountered: ModalInstanceProvider Not Found

Tips for accessing payment details from a stripe paymentElement component in a React application

JavaScript Dynamic Array for Generating GoogleChart JSON Data