Javascript: How to catch error on page navigated to using window.location.href = url

Question

I am using a REST service to generate a CSV file that I want to prompt the user to download. An example of the service is below:

https://localhost:8444/websvc/exportCSV?viewId=93282392

To prompt the user to download the file, I use this code:

window.location.href = exportUrl, where exportUrl would be a URL like the one above.

This works great if there are no errors on the server when executing the service. The file download prompt appears, the page doesn't refresh, and all is well.

However, if there is an error, I'm getting a nasty HTTP Status 500 page, which is no good for user experience. What I'd like to do is catch any error on the resulting page, and throw up a more friendly error without leaving the current page. I tried:

try {
    window.location.href = exportUrl;
}
catch (e) {
    alert(e);
}

But that doesn't seem to change the behavior at all. Does anyone have any ideas on how to handle this?

Thanks very much.

Answer 1

Catching an error like that will only catch a JavaScript error. That's not what you're experiencing here. Your server is returning a status code of 500. You need to make sure that everything is good BEFORE you send your users there.

To do that you could effectively 'ping' the URL with Ajax to ensure that it won't return a 500 error.

Something like the following:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        window.location.href = exportUrl;
    }
}

xhr.open('head',exportUrl);
xhr.send(null);

This would do a HEAD request to the URL to ensure that there are no nasty server errors waiting.

Of course, if in the process of actually GENERATING the CSV your server throws an error - it would still return a 500.

A more robust way would be to get the data via Ajax, build a data URL via base64encode and then set window.location.href to that data URL.

By doing that, you could also ensure that the Ajax didn't return a 500 and you got the data you were expecting in the response.

Hope this helps!