Uncaught Exception after Timeout Ext.Ajax.request in Chrome

Question

I'm using ExtJS 4.1 and I'm getting an uncaught exception in Google Chrome when a timeout occurs.

Ext.Ajax.timeout = 10000; // 10 seconds
Ext.Ajax.method = "GET";
Ext.Ajax.request({
    url:'rest/dataloggerset.json',
    params:{
           sessionGuid:Ext.getStore("User").getAt(0).get("sessionGuid"),
            loggerId:this.availableLogFiles.loggerId,
            logSet:this.currentLog
    },
    success:this.processReceivedLogData,
    failure:this.failureDuringResourceLoad,
    scope:this
});

The requests ends in a timeout and the so far received data is tried to be parsed in an object. So the uncaught exception that I'm seeing in the developer console looks like :

Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 Connection.js:914 Ext.define.createResponse Connection.js:914 Ext.define.onComplete Connection.js:859 Ext.define.abort Connection.js:767 request.timeout

This issue doesn't come up in FF. Due to the uncaught exception, my method failureDuringResourceLoad is not called.

May be worth mentioning, data is still beeing transmitted when the defined timeout is elapsed.

any ideas?

the communication itself is capsuled in the ExtJS library. So I always try to avoid changing library code. — Chris
This issues is filed as bug in senchas bug forum : sencha.com/forum/… — Chris

Chris Chris · Accepted Answer · 2012-11-20T15:20:30

After some research I've found that the xhr.abort() behaviour differs in Chrome and FF. In Chrome the xhr.status remains unchanged 200, whereas the status in FF is set to 0 after calling xhr.abort().

This difference causes an effect in ExtJS 4.1, that timedout requests mistaken as valid responses. I've used the following override to handle the timeout scenario. In ExtJS 4.1 a variable on the request objects marks if a timeout has occured. The override replaces the onComplete method.

Ext.define('Df.data.Connection', {
    override: 'Ext.data.Connection',

    onComplete : function(request) {
        var me = this,
            options = request.options,
            result,
            success,
            response;

        try {
            result = me.parseStatus(request.xhr.status);
        } catch (e) {
            // in some browsers we can't access the status if the readyState is not 4, so the request has failed
            result = {
                success : false,
                isException : false
            };
        }

        success = result.success && !request.timedout;

        if (success) {
            response = me.createResponse(request);
            me.fireEvent('requestcomplete', me, response, options);
            Ext.callback(options.success, options.scope, [response, options]);
        } else {
            if (result.isException || request.aborted || request.timedout) {
            response = me.createException(request);
            } else {
                response = me.createResponse(request);
            }
            me.fireEvent('requestexception', me, response, options);
            Ext.callback(options.failure, options.scope, [response, options]);
        }
        Ext.callback(options.callback, options.scope, [options, success, response]);
        delete me.requests[request.id];
        return response;
    }
});

The change can be found on line 856 in the original place in Connection.js. I've extended

success = result.success;

to :

success = result.success && !request.timedout;

If there is a more convenient way for solving this problem please let me know!

Uncaught Exception after Timeout Ext.Ajax.request in Chrome

1 Answers