Question

Any errors that are thrown on the server side (PHP) is captured in a hash and sent back to the client side (javascript) via AJAX. In this way, the JSON of errors is actually delivered to the AJAX success event.

...
catch ($e) {
    echo ( array("error" => $e->getMessage()) );
}

I essentially check if data[“error”] is undefined and if not, I want to throw a new error that would theoretically be caught in my try/catch block encapsulating the entire AJAX.

...
success : function(data) {
    if (typeof(data["error"]) != "undefined") {
        throw new Error(data["error"]);
    }

    handleGoodData(data);
}

It keeps telling me that the error is uncaught (via Chrome console). I have checked and data[“error”] returns a string if it is defined.

Even in the simplest form, simply throwing a new error in the success event doesn’t seem to work either:

success : function(data) {
    throw new Error("error message!");
}

Answer 1

you have to encapsulate your success and error functions actually in try catch blocks to be able to catch errors within them. One solution is to create a layer between $.ajax calls so that it goes through your own function first. For example:

myajax: function(settings) {

            // override provided success callback with try catch
            if (settings.success){
                var successFunc = settings.success;
                settings.success = function(){
                    try{
                        successFunc.call(arguments);
                    }
                    catch(error){
                        console.log("An unhandled error occurred in ajax success callback: " + error);
                    }
                };
            }

            // override provided error callback with try catch
            if (settings.error) {
                var errorFunc = settings.error;
                settings.error = function() {
                    try{
                        errorFunc.call(arguments);
                    }
                    catch(error){
                        console.log("An unhandled error occurred in ajax error callback: " + error);
                    } 
                };
            }
            // else create our own basic error callback
            else {
                settings.error = function(jqXHR, textStatus, errorThrown) {
                    console.log("An unhandled error occurred during an AJAX call: " + errorThrown);
                };
            }


            $.ajax(settings);
        }
    };