Catch errors in jquery ajax error callback?

Question

I tend to use a lot of jquery ajax calls to the server side in my applications.

Usually when something goes wrong on the server side ill serialize an errormessage and send as a response (JSON). Something similar to

 { "ErrorMessage" : "Something went wrong: " + ex.message }

What I would like to know is if there's any way to make errors end up in jquery ajax error callback, rather than success.

Is there any way to do this? Or should I stick to my old way of handling errors? It doesn't matter if you provide a PHP or ASP.NET + c# example, since im intrested in both. Thanks

score 3 · Accepted Answer · answered May 14 '12 at 19:34

You can make them end up in the error callback on jQuery. In ASP.NET, all you need to do is to change the custom errors section in your web.config to <customErrors mode="Off" /> BUT if you go this route, make sure that you put your web service in a separate folder so that you only do it for your web service calls without turning off this for the entire site; for example:

<location Path="/Services"> <!--Your web service lives here -->
    <system.web>
        <customErrors mode="Off" />
    </system.web>
</location>

This way, any exception thrown on your web methods will be handled in the error callback in jQuery.

You can either let the exception propagate without caching it on your web method or you can catch it and rethrow a more "user friendly" message.

Ah ok, but i suppose the errors will be returned as a asp.net default error page as HTML and not JSON? — Johan, May 14 '12 at 19:41
`request, status, error` will be returned as JSON objects. You can do something like: `alert(request.responseText);` in your error handler. See here: http://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages — Icarus, May 14 '12 at 19:44

score 0 · Answer 2 · answered May 14 '12 at 19:44

This is possible using Deferred object in jQuery 1.5+. Ben Nadel has some examples about that, you can have a look here http://www.bennadel.com/blog/2255-Using-jQuery-s-Pipe-Method-To-Change-Deferred-Resolution.htm and here http://www.bennadel.com/blog/2123-Using-Deferred-Objects-In-jQuery-1-5-To-Normalize-API-Responses.htm

Here is a simplified version of its JavaScript code

var request = $.ajax({
    type: "post",
    url: "./web_service.cfm",
    dataType: "json"
});

request = request.pipe(

    // Filter the SUCCESS responses from the API.
    function (response) {

        // real success
        if (response.success) {
            return (response);
        }
        else {
            // The response is actually a FAIL even though it
            // came through as a success (200). Convert this
            // promise resolution to a FAIL.
            return (
                $.Deferred().reject(response)
            );
        }
    },

    // Filter the FAIL responses from the API.
    function (response) {
        return ({
            success: false,
            data: null,
            errors: ["Unexpected error: " + response.status + " " + response.statusText]
        });

    }

);


// Now that our API response has been filtered, let's attach
// our success and fail handlers to the promise resolution.
request.then(

    function (response) {
        console.log("Success!!!", response);
    },

    function (response) {
        console.log("Fail!!!", response);
    }

);

Catch errors in jquery ajax error callback?

2 Answers2

Linked