EXTJS4 - How to handle JavaScript Errors, server exceptions globally

One way to catch JavaScript Errors with window.onerror: 

Fiddle: https://jsfiddle.net/prajavk/d0ywj710/

Handle Ext errors and Javascript errors Globally as below,

Possible cases to handle:
1. success - Ext handled.
2. failure, due to communication problem - Ext handled.
3. failure, due to server-side exception – developer have to handle response failures...

Fiddle: https://fiddle.sencha.com/fiddle/1gsq

Solution1:

Write below method in your Application controller.

//Ajax Response Error Handler

Ext.Ajax.on('requestexception', function(conn, response, options, eOpts) {

                         var error = response.status + ' - ' + response.statusText;

                         console.log('Ajax Request Exception! '+error);

                         if (response.status != 200) {

var errorData = Ext.JSON.decode(response.responseText);  console.log('ajax req error:'+errorData.message);

                      console.log('Ajax request Error', response.status);

Ext.Error.raise(error);

                           }

                  });

Solution2:

when an exception on server occurs, we can send a 500 response header with the reason returned as HTML in the content.

store.on('loadexception',
function(a,conn,resp) {
if (resp.status == '304') {
    Ext.Msg.alert('Content has not changed');
}else if(resp.status == '200') {
return; //Do nothing
}else if (resp.status == '401') {
       Ext.Msg.alert('Authentication required - You need to Login');
}else if (resp.status == '302') {
errorDialog.body.update('Session Has Expired');
errorDialog.show();
}else if(resp.status == '500') {
errorDialog.body.update(resp.responseText);
errorDialog.show();
}else{
errorDialog.body.update('An uncaught exception has occured');
errorDialog.show();
}
}

Solution3:

When sending Ajax or REST requests, a proxy of ExtJs 4 typically expects a response with the following parameters: data, success and message. The message parameter is optional, but it may come in handy when you want to show the request results to the user.

function requestMessageProcessor(proxy, response) {

         if (response && proxy) {                   

                 try {                                              

                          var responseData = proxy.reader.getResponseData(response);

                         

                          if (responseData.message) {

                                   var messageDescription = 'Information'; // title of the alert box

                                   var messageIcon = Ext.MessageBox.INFO;

                                  

                                   if (!responseData.success)

                                   {

                                            var messageDescription = 'Error';

                                            var messageIcon = Ext.MessageBox.ERROR;

                                   }

                                  

                                   Ext.MessageBox.show({

                                            title: messageDescription,

                                            msg: responseData.message,

                                            buttons: Ext.MessageBox.OK,

                                            icon: messageIcon

                                   });

                          }

                 }

                 catch(err) {

                          // Malformed response most likely

                          console.log(err);

                 }

         }

}

And here’s the part which should reside in proxy:

proxy: {
 ...
 listeners: { 
  exception: function(proxy, response, options) {
   requestMessageProcessor(proxy, response);
  }
 },
 afterRequest: function(request, success) {
  requestMessageProcessor(request.scope, request.operation.response);
 }
}

Handle Generic error handler for Ajax failures :

Ext.data.Connection.prototype._handleFailure = Ext.data.Connection.prototype.handleFailure;
Ext.data.Connection.prototype.handleFailure = function(response, e) {
 var errorText = Ext.DomQuery.selectValue("Reason/Text", response.responseXML, "Unknown Error");
 Ext.Msg.alert('Error', errorText);
 
 Ext.data.Connection.prototype._handleFailure.call(this, response, e);
};