Menu
To the point: how would you handle a server-side HTTP 4nn/5nn errors in jQuery's ajax requests? This case concerns a JSP/Servlet webapplication at the server side. Here I am not talking about trivial runtime exceptions such as NullPointerException and so on. Assume that they're all handled perfectly. A good example of such a HTTP 4nn/5nn error is 401 unauthorized (insufficient user rights) and 500 internal server error (database down, I/O error, Errors, etc). Assume that they cannot (or should not) be caught at coding level.
Right now I have just declared an <error-page> in web.xml for those kind of errors. It basically forwards the request to a predefinied JSP/HTML error page wherein the enduser is informed that a serious error has occurred and that the user can contact [email protected] for further assistance. The same page also displays the global details about the error/exception.
It works perfectly in regular HTTP requests, but how would you handle it in XMLHtttp requests using jQuery? What's the best for the user experience? To me, it would be just displaying the entire error page as if it is a normal HTTP request. I've solved it as follows:
function init() {
$.ajaxSetup({
error: handleXhrError
});
}
function handleXhrError(xhr) {
document.open();
document.write(xhr.responseText);
document.close();
}
Although it works perfectly, it feels to me like a hack. Replacing the entire document with the contents of the HTTP error page. But is that also the way you would follow? If not, can you maybe elaborate why not and what way you'd prefer? The only alternative I see is using JS to display some alert/message box to inform the user about the unresolveable error, but the user could dismiss it and continue with the page while that should not be possible.
250
After all, dealing with errors on asynchronous requests the same way as with synchronous requests is the best for user experience. Only, the
function handleXhrError(xhr) {
document.open();
document.write(xhr.responseText);
document.close();
}
will fail in IE6/7/8 when you've <script> elements which needs to be loaded and initialized as well. IE6/7/8 namely won't do that. In order to get IE to do that, you basically need to keep the current <head> element and only replace its children by $("head").html(newHead). The same should be done for the <body> element.
function handleXhrError(xhr) {
var newDocument = xhr.responseText;
$("head").html(newDocument.substring(newDocument.indexOf("<head>") + 6, newDocument.indexOf("</head>")));
$("body").html(newDocument.substring(newDocument.indexOf("<body>") + 6, newDocument.indexOf("</body>")));
}
Nasty, but it's not possible to do a $(xhr.responseText) when the response text represents a whole HTML document with a head and body. Don't forget to alter the substring index accordingly when you've some attributes on <body> of the error page template (e.g. ID, class, etc).
128
Use a JQuery dialog, something like this:
function handleXhrError(xhr) {
ele = $("<div></div>").appendTo("body");
ele.html(xhr.responseText);
$(ele).dialog();
}
I should answer the rest of what you asked. I throw and catch specific exceptions where I can, and send special messages to the client. Sometimes I instruct the client to run a function which may redirect the browser or partially refresh part of the page. It just depends on the circumstances. Catching 400/500 will deal with real errors, but you want to also write JS code once to filter all your AJAX requests for custom error flags that you will return from the server, take a look at this page for more: http://www.bennadel.com/blog/1392-Handling-AJAX-Errors-With-jQuery.htm
21
If necessary, you should also be able to re-direct to one of the pre-defined error pages you set-up with window.location.href = "url-to-error-page";
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
