Fix when config is undefined.

[marcelaraujo]

Sometimes, the config is not provided in cache function. So, I fixed it.

TypeError: Cannot read property 'config' of undefined

[chieffancypants]

Hi there -- sorry for the late response. Why would config ever not be defined? Can you show me how to reproduce the error before I merge this in?

[marcelaraujo]

http://jsfiddle.net/Q9Bx6/

[mattdarveniza]

Have also encountered this; seems to occur if the response is a 500 error on certain requests..

[chieffancypants]

@marcelaraujo your interceptor is breaking the angular requirements for an interceptor which is why there's no config. From the docs:

request: interceptors get called with http config object. The function is free to modify the config or create a new one. The function needs to return the config directly or as a promise.

So specifically, your interceptor's response looks like this:

myApp.factory('handlerInterceptorFactory', [function() {
  return {
    'response': function(response) {
        return null; // <-- this is not returning the config object
        return response || $q.when(response);
     }
  }
}]);

Happy to investigate further if you can correct the example fiddle and still replicate the error.

[marcelaraujo]

@chieffancypants, I agree that but sometimes when the server returns no response, I catch this error .

[Incisive]

I've experiencing the same issue when buffering HTTP requests and aborting them.

For example, using this library https://github.com/witoldsz/angular-http-auth throws the same error above.

Thanks,
-Ryan S.

[chieffancypants]

@Incisive I'm using the same library and have never seen this. When you abort the request, are you rejecting the promise or returning null?

[Incisive]

$rootScope.$on( 'event:auth-loginRequired', function(event, response) {
    authService.loginCancelled("test", response);
});

Thanks again,
-R

edit Updated code example to working state. see comment below.

[Incisive]

It seems my issue was caused by passing the wrong argument into the 'loginCancelled' method and I no longer have the above issues. I've updated my above comment with the correct use.

Sorry for the confusion,
-R

[chieffancypants]

In each case this error has been the result of an implementation issue somewhere else, and unrelated to the loading bar. I'm going to close for now, but please feel free to re-open if anyone is able to reproduce while adhering to specs.

[just-boris]

@chieffancypants here is updated version: http://jsfiddle.net/Q9Bx6/9/
when you try access to file, but browser rejects it and throw synchronous exception on xhr.send.
In that case you got an Error object in response which doesn't have config property.

[chieffancypants]

@just-boris that fiddle includes an improperly written interceptor. Please read the comments above, as I specifically show the line that breaks everything

[just-boris]

Sorry, wrong version. Here an example without interceptor: http://jsfiddle.net/Q9Bx6/10/
It happens when I'm trying to load a file though file:// protocol

[chieffancypants]

This is a pretty strange situation, but this is actually a bug within Angular. When following the call stack you can see it's not returning a response object in the format required for an interceptor. It's also throwing it's own errors as it can't access the local resource.

{
code: 19,
message: "Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file://resource.txt/'.",
name: "NetworkError",
stack: "Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file://resource.txt/'.↵    at Error (native)↵    at https://code.angularjs.org/1.3.13/angular.js:9827:11↵    at sendReq (https://code.angularjs.org/1.3.13/angular.js:9628:9)↵    at serverRequest (https://code.angularjs.org/1.3.13/angular.js:9344:16)↵    at processQueue (https://code.angularjs.org/1.3.13/angular.js:13189:27)↵    at https://code.angularjs.org/1.3.13/angular.js:13205:27↵    at Scope.$eval (https://code.angularjs.org/1.3.13/angular.js:14401:28)↵    at Scope.$digest (https://code.angularjs.org/1.3.13/angular.js:14217:31)↵    at Scope.$apply (https://code.angularjs.org/1.3.13/angular.js:14506:24)↵    at HTMLButtonElement.<anonymous> (https://code.angularjs.org/1.3.13/angular.js:21440:23)",
__proto__: DOMException
}

[just-boris]

@chieffancypants why are think that interceptor always gets response? In the angular docs responseError argument named a rejection, so that can contain any information about what's happened.

I thought about to report issue into angular, but decided, that it's correct behavior, because there is no actually a response object, request throw an exception synchronously

[Tobbe]

I don't think this is properly solved yet. We're getting "Broken interceptor detected: Config object not supplied in rejection:" even though the loading bar is the one and only interceptor we have. I have not been able to reproduce it in a fiddle, because I think it depends on the reply we get from our API (which is locked down inside a VPN)

[Tobbe]

Turned out I had a TypeError. That's why there was no config property on the rejection object.

I think you should consider handling Error objects as well. I found this comment in an article about interceptors: "And, we may not have access to the config - the rejection may be an error object." from http://www.bennadel.com/blog/2777-monitoring-http-activity-with-http-interceptors-in-angularjs.htm

[mayank2707]

I am also getting the same error when I try to upload a file using ng-file-upload

[marcelaraujo]

@chieffancypants, I won't give you more reasons to fix this behavior. A lot of developers and apps use your module and they have the same issue too.

Please, do me a favor, fix it.

Make everyone happy.

[mayank2707]

got it fixed by adding a config object to response

[chieffancypants]

There's nothing to fix. I added in a detector, which will actually help developers way more than just ignoring it completely.

[Tobbe]

I think that detector might actually do more harm than good in some cases right now. I got the "Broken interceptor detected: Config object not supplied in rejection" message even when your interceptor was the only one loaded.

Perhaps you should check $httpProvider.interceptors.length to make sure it's > 1 before printing that message?

[chieffancypants]

@Tobbe I see, I think you're right. It appears angular will catch the error, but it's not super clear what it does with it. Either way, the documentation shows that response errors do not require a config object, so at the very minimum this should be fixed

[Tobbe]

Looking forward to the fix 👍

[joaovieira]

"Either way, the documentation shows that response errors do not require a config object, so at the very minimum this should be fixed"

Finally! You've been having dozens of complaints, issues and PRs and you keep pushing back. I myself have the same issue and can't find the origin. The loading bar is the one and only interceptor and I keep getting Sentry notifications on that same line (rejection.config is undefined). Probably failed pre-flight CORS requests? Probably errors on file upload? Probaly Firefox (they only appear to come in Firefox)? Probably something else? Don't really know, but checking for a variable before using it is just a favor you do for yourself.

[rcollette]

Just to show where this scenario can occur without any other interceptors defined.

I had a case where a configured URL was not specified resulting in a null url parameter being passed to $http.post. The result is an infinite loading bar.

See example here:
http://plnkr.co/edit/YhsWp7G4L1Gh93v1fsTJ?p=preview

[peter-atlanta]

I'm also looking forward to the fix!

[RustamIrzaev]

I had have the same issue.
This code would fire the error.

'responseError': function (rejection) {
                if (rejection.status== 403) {
                    return;
                }

                return $q.reject(rejection);
            }

I have fixed it just by returning return $q.reject(rejection); instead of simple return;

[ma-zal]

My SOLUTION for "Broken interceptor detected" message with 'angular-loading-bar' module.

I found that problem is caused by wrong order of Angular module dependencies.

// Wrong order, with "Broken interceptor detected" message:
angular.module('myApp', ['angular-loading-bar', 'http-auth-interceptor']);

// Right order, all is fine:
angular.module('myApp', ['http-auth-interceptor', 'angular-loading-bar']);

I hope, it helps you.

[hugsbrugs]

In my case, I was not sending back from server proper response. In php I had to json_encode my response body. Just to say sometimes we focus on front end while error is on back end ;)

[hedleygois]

I was struggling in this problem did some refactor on my interceptors but when I checked what @rcollette wrote I just found the problem. I was getting an undefined url :(

[hirro]

I got this error while parsing an invalid, unbalanced JSON resource. I missed a '}' in the property file at the server in my JHipster project).

[alex88]

I have this request:

      $http({
        method: 'GET',
        url: someurl
      }).then((response) => {
        debugger;
        deferred.resolve(response.data);
      }, (rejection) => {
        console.log(rejection);
      });

and the error Broken interceptor detected: Config object not supplied in rejection: sends me here, why?
What's the context of the error and the possible solution?

[gaplo917]

@alex88 you may try to add a interceptor that return the err object on responseError, sth like this

    angular.module('starter', [])
    .provider('http_interceptor_sample',[function(){

      this.$get = [function(){
        return {
          request: (config) => {
            return config
          },
          responseError: (err) => {
            return err
          }
        }
      }]
    }])
    .config(function($httpProvider) {
      $httpProvider.interceptors.push('http_interceptor_sample')
    })

[faceleg]

There is plenty of information about this above, and elsewhere. Locking thread.