4

I would like my AngularJS app to capture "no internet connection" just like how Chrome captures it. When Chrome captures it, it shows net::ERR_INTERNET_DISCONNECTED on the console.log.

Angular's HTTP interceptor is not able to capture it. The only data I get is rejection.data.status undefined rejection.status 0

devwannabe
  • 3,160
  • 8
  • 42
  • 79
  • possible duplicate of [Detect that the Internet connection is offline?](http://stackoverflow.com/questions/189430/detect-that-the-internet-connection-is-offline) – callmekatootie Feb 18 '15 at 15:55

2 Answers2

9

So far, this has been working great. I noticed that the status is 0 when it can't contact anything. This is inside my http interceptor

responseError: function (rejection) {
    if (rejection.status == 0) {
        // put whatever behavior you would like to happen
    }
    // .......
    return $q.reject(rejection);
}
devwannabe
  • 3,160
  • 8
  • 42
  • 79
  • 1
    `xmlhttprequest.status` will sometimes be 0 on older browsers for certain edge-case CORS request failures. I suppose you could consider that "failure to contact", but I just thought it was worth noting. – James M. Lay Feb 18 '15 at 21:59
  • Thanks for the info too. I'll keep an eye on it. – devwannabe Feb 19 '15 at 02:23
  • pedantic perhaps, but use `rejection.status === 0`, for strict comparison :) – Stuart May 26 '17 at 10:09
2

A simple script that could help you, you could do it in different ways, even loading an image and call a function when this fails.

function getNetworkStatus(callback, timeout, x){
    x = new XMLHttpRequest(); 
    x.timeout = timeout,
    x.onreadystatechange = function(){
        x.readyState == 4 && callback(x.status == 200)
    }, x.onerror = function(e){
        callback(!1)
    }, x.ontimeout = function(){
        callback(!1)
    }, (x.open("GET", "http://ip-api.com/json/"), x.send());
}

getNetworkStatus(function(isOnline){
    console.info(isOnline ? "ONLINE" : "OFFLINE");
},60000);

UPDATE

We define this interceptor in httpProvider, so return strictly an error when a call does not happen successfully

angular.module('MyApp', []).config([
  '$httpProvider',
  function($httpProvider) {
    $httpProvider.interceptors.push([
      '$q',
      function($q) {
        return {
            responseError: function(res){
                console.info("Failed to open url: " + res.config.url, res);
                //Angular returns "success" by default, but we will call "error" if data were not obtained.
                if(res.data == null && res.status === 0 && res.statusText === ""){
                    return $q.reject(res) //callback error()
                }       
                return res //return default success()
            }
        };

      }
    ]);
  }
]).run(['$http', function($http) { // --TEST--
    //$http.get("http://ip-api.com/json/").success(function(){ //page online
    $http.get("https://ip-api.com/json/").success(function(){ //try "https" (page offline to test)
        console.info("My great page is loaded - We are online :)",arguments)
    }).error(function(){
        console.info("ERROR: My great online page is not loaded :/ - possibility of connection loss?",arguments)
    });
}]);

You can change a trusted URL that you think will never be offline, for example Google, but remember, the url should have origin access permissions that does not show the "Access-Control-Allow-Origin" error. http://ip-api.com/json/ is ok.

Walter Chapilliquen - wZVanG
  • 12,010
  • 8
  • 40
  • 64