request.xhr undefined in Ext JS

Question

my web site is made using Ext JS 4.1 framework and ASP .Net MVC v3. When new frame is rendered there are 19 separate AJAX requests for retrieving data in JSON-format. All requests are familiar and made by Ext.Ajax.request(). Example:

Ext.Ajax.request({
    url: getOrderLink,
    method: "GET",
    params: { recId: orderRecId },
    headers: {
        'Accept': 'application/json'
    },
    success: function (response) {
        var order = Ext.decode(response.responseText);
        ...
    }
});

In some cases there are errors in ext-all.js in

onStateChange : function(request) {
    if (request.xhr.readyState == 4) {
        this.clearTimeout(request);
        this.onComplete(request);
        this.cleanup(request);
    }
},

where request has no property xhr so that request.xhr.readyState throws exception "Cannot read property 'readState' of undefined". This errors appear not for all requests and don't effect site work(responses are retrieved successfully). Some times this errors don't appear at all. Timeout for all requests is set to 30s by default and they take about 1.5-2 seconds each. I am using Google Chrome 21. Could you please give me some idea why it's happening.

Westward

This is really wired. If you look at the Network/XHR tab of Chrome's Developer Tools, are you 100% sure all urls are valid, that all server calls return without exception, and that all the responses return with correct data? – Winter

Most browsers have an upper limit of ~6 concurrent requests per domain. If you're sending all 19 requests at once, things might get out of hand. Can you try manually throttling the number of requests? Say, wait for 6 to finish before sending the next 6? Not sure if that will solve the problem, but it's a start. – Bibliophage

@Izhaki, Web Developer Tools show that all URLs were correct and responses were retrieved after 1.5 seconds as maximum. Strange thing is that only 1 time of 7 gives such error. Other are normal. – Westward

@Bibliophage Cook, Total number of requests is 14 now. Some times they all are successful. Right now almost all of them are without XHR error. – Westward

Answer 1

The problem seems to occur if and only if you have a breakpoint or a "debugger;" line in anything related to AJAX. For me it happened in Chrome, haven't tried other browsers yet.

In my case it happened when I had set a breakpoint in a load event handler for a store like code example below.

But the error occurrs if you set a breakpoint inside the Ext onStateChange function in the framework itself as well.

If disabling your breakpoints and debugger; calls removes the error you can safely ignore it!

There is a similar thread on ExtJS forums. Sencha might add a fix.

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    stores: ['Projects'],

    init: function () {
        this.getProjectsStore().addListener(
            "load",
            this.onProjectsStoreLoaded,
            this
        );
    },

    onProjectsStoreLoaded: function () {
        console.log('MyController: onProjectsStoreLoaded');

        debugger; // <- this causes the errors to appear in the console

        SomeOtherThingsIWantedToDebug();
    }
}

Chiller