AngularJS $http Timeout: Diagnosing Unexpected Status -1 Errors

Likely explanation

The request exceeded the $http timeout setting (or was manually aborted via navigation or a $timeout) before a response arrived. AngularJS treats any client‑side abort or timeout as HTTP status -1 with statusText "timeout".

Confirmed fact

AngularJS internally creates a $timeout promise that, when it resolves, calls the underlying XMLHttpRequest’s abort() method. The abort causes the XHR’s onerror handler to fire, and the $http service wraps that in a rejected promise whose error object has status === -1 and statusText === "timeout".

Steps to verify and resolve

1. Check the timeout value: Before the request, log the config timeout (e.g., console.log('timeout:', config.timeout)). If it is unusually low, increase it (e.g., to 0 for no timeout or a larger value) and see if the error disappears.
2. Inspect the Network tab: In Chrome DevTools → Network, filter XHR, reproduce the error, and look at the Status column. A status of "(canceled)" or a blank entry indicates the request was aborted before reaching the server.
3. Distinguish error sources programmatically: In the error callback, examine the error object:
   • error.status === -1 && error.statusText === 'timeout' → client‑side timeout or abort.
   • error.status === 0 → network failure, DNS error, or CORS preflight abort.
   • error.status >= 400 → server‑side response (e.g., 408, 504).
4. Adjust timeout dynamically (best practice):
   • Use an $http interceptor to read request metadata (e.g., URL pattern, headers) and set config.timeout accordingly.
   • Optionally measure recent round‑trip time via the Navigation Timing API (performance.now()) and apply a safety factor.
   • Example interceptor snippet:

     app.factory('timeoutInterceptor', ['$q', function($q) {
       return {
         request: function(config) {
           // Increase timeout for large payloads
           if (config.method === 'POST' && (config.data || {}).length > 100000) {
             config.timeout = 30000; // 30 s
           } else {
             config.timeout = 10000; // default 10 s
           }
           return config;
         }
       };
     }]);
     app.config(['$httpProvider', function($httpProvider) {
       $httpProvider.interceptors.push('timeoutInterceptor');
     }]);
     

Missing diagnostic detail

If you are unsure whether the current timeout is too low, please confirm the exact timeout value (in milliseconds) set on the failing $http call. That information determines whether raising the timeout is the appropriate next step.