Program testing can be used very effectively to show the presence of bugs but never to show their absence.” – E.W. Dijkstra, On the reliability of programs.

There are always some bugs which are failed to be detected by developers and QA. In this post I will try to show how to catch them on the client side.

There are two types of bugs:

  • JavaScript errors.
  • Incorrect server response which can crash the application.

JavaScript Errors

For the first type of exception we must define the ‘window.onerror’ handler which will send to error logging server the information about the exception. You can get the browser version and other information from the request on the server side.

window.onerror = function (msg, url, line, col, error) {
    Ext.Ajax.request({
        url: 'errorJournalServer.json',
        params: {
            msg: msg,
            url: url,
            line: line,
            col: col,
            error: error
        },
        success: function (response, opts) {
            console.log(response.responseText);
        },

        failure: function (response, opts) {
            console.log('server-side failure with status code ' + response.status);
        }
    });
}

Incorrect server response

For incorrect server response we will handle the ‘requestcomplete’ and ‘requestexception’ events of the ‘Ext.Ajax’ singleton. We will inform the user about server side problem with popup window.

Ext.Ajax.on('requestcomplete', function (conn, response, options, eOpts) {
    var resp = Ext.decode(response.responseText);
    if (resp.error) {
        Ext.Msg.show({
            title: "Error",
            msg: resp.error,
            modal: true,
            buttons: Ext.Msg.OK,
            icon: Ext.Msg.ERROR,
            closeAction: 'destroy'
        });
    }
    return false;
});
Ext.Ajax.on('requestexception', function (conn, response, options, eOpts) {
    Ext.Msg.show({
        title: "Error",
        msg: response.request.url + '<br>' + response.status + ' ' + response.statusText,
        modal: true,
        buttons: Ext.Msg.OK,
        icon: Ext.Msg.ERROR,
        closeAction: 'destroy'
    });
    return false;
});

I am not sending this exception to error logging server because such requests are already registered in our web server log files.

Do not forget to open the browser debugger tool to see the requests for this sample.