Global exception handling for data requests

[kef4e]

Hi,

I am migrating an application form 3.4 to 4.x. The application is using the MVC architecture of ExtJS 4.

In 3.3x there was the option to register 'global' exception handling by adding a listener to the DataProxy:

////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
    if (type === 'remote') {
        Ext.Msg.show({
            title: 'REMOTE EXCEPTION',
            msg: res.message,
            icon: Ext.MessageBox.ERROR,
            buttons: Ext.Msg.OK
        });
    }
}); 

This is taken from one of the examples: http://localhost/ext-3.4.0/examples/writer/writer.html
However, in 4.x the example is modified and the listener is directly appended to the proxy:

listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            } 

Once the application is loaded i checked the DOM and it seems that the option to append
a listener to one of the proxy types (Server types preferably ) is not yet finished ( even though it is listed in the documentation) or at least that's what I understood from what i get. May be it won't be supported at all..

There is the possibility to extend the data.Store class, add exception handling to that class and use it as
a 'base' for creating Stores in the application, but I am looking for a more general solution to the problem.

So the question is (are) :

Is it possible, to declare again global exception handling for data requests just like
in 3.x?

If not, is this just temporary?

If you have any other suggestions, please help

[bclinton]

I'm extending Ajax proxy. Maybe something like this will work for you?

Ext.define('APP.data.proxy', {
    extend: 'Ext.data.proxy.Ajax',
    alias: 'proxy.myproxy',
    
    listeners:
    {
        exception: function (proxy, request, operation)
        {
            if (request.responseText != undefined)
            {
                // responseText was returned, decode it
                responseObj = Ext.decode(request.responseText,true);
                if (responseObj != null && responseObj.msg != undefined)
                {
                    // message was returned
                    Ext.Msg.alert('Error',responseObj.msg);
                }
                else
                {
                    // responseText was decoded, but no message sent
                    Ext.Msg.alert('Error','Unknown error: The server did not send any information about the error.');
                }
            }
            else
            {
                // no responseText sent
                Ext.Msg.alert('Error','Unknown error: Unable to understand the response from the server');
            }
        }
    }
});

Once you give it the alias you can refer to it as an xtype in your model:

    proxy:
    {
        type    : 'myproxy'
	}

[kef4e]

Thanks for the reply!

Good suggestion, I will definitely use it.

[scollins]

We have just worked out one way this can be done globally using Ext.override.

The above solution works really well but this has the benefit that it uses the existing ExtJS proxy and we don't have to use an extended class. This code adds a listener for the "exception" event to Ext.data.proxy.Server by overriding it's constructor. Since proxies get automatically created (I would guess when the Stores are created), this will add a listener to each object inheriting from this class including those used in Ajax server calls.

Ext.override(Ext.data.proxy.Server, {

        constructor: function(config)
        {
            this.callOverridden([config]);

            this.addListener("exception",  function (proxy, response, operation) {
                if (response.responseText != null)
                {
                    Ext.Msg.alert('Error', response.responseText);
                }
            });

        }

});

Please post if you find this useful or have other good ways to generically handle server side exceptions.
Thanks
Steve

[plalx]

In ExtJS 3 there was Ext.util.Observable.observeClass method that allowed to make a class observable. Not sure if there is an equivalent in ExtJS 4?

[scollins]

Yes in ExtJS 3.x you could do something like this:

Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('requestexception', function(dataconn, response, options){
     if (response.responseText != null) {
        window.document.body.innerHTML = response.responseText;
    }
});

I take back everything I said! This also works in ExtJS 4.x with a small modification. Doh!

Ext.util.Observable.observe(Ext.data.Connection);
Ext.data.Connection.on('requestexception', function(dataconn, response, options){
     if (response.responseText != null) {
        window.document.body.innerHTML = response.responseText;
    }
});

[Lindsey]

I am looking to do the same thing as the original poster (I have an ExtJS 4 MVC application) - I am still totally new to ExtJS and JS, for that matter. Where would I put the proxy Ext.override statement? In app.js?
Thanks for your help!

[bclinton]

I am looking to do the same thing as the original poster (I have an ExtJS 4 MVC application) - I am still totally new to ExtJS and JS, for that matter. Where would I put the proxy Ext.override statement? In app.js?

Somewhere between the script tag that includes the ext js library and your application definition. I like to put all my overrides in a overrides.js file and include it in script tag right after the ext js library script file.

[Lindsey]

Makes sense. Thanks!

[chamacs]

If you're taking an MVC approach, another option would be to create an APP.util.Overrides.js class file and include it in the 'requires' attribute of you application definition:

requires : ['APP.util.Overrides']