Error handling in Dynamic JS loading

Question

I am loading a JS file needed only for one part of my web page, only when the user navigates to that tab on the page.

var scriptFile = document.createElement("script");
scriptFile.setAttribute("type", "text/javascript");
scriptFile.setAttribute("src", scriptURL);

I am trying to come up with an error handling mechanism for this dynamic loading, so that I can show an error message if the JS load times out or if the JS is unavailable in the location specified by the URL.

This is how I am trying to implement the error handling (for IE):

scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
        // Display content in tab
    } else {
        // Display error message
    }
}

This is causing one problem. When all is fine, and the JS is present as expected, I am getting the error message first, and then the correct content.

After some brainstorming, I found out that the readyState changes from "uninitialized" to "loading" first, and then to "loaded". Its when the state is at "loading" that the error message is being displayed. After that, the state is changing to "loaded" at which point the content is being displayed.

Any ideas how to handle this so the error is not displayed initially?

Answer 1

Since there is no "oops I died!" state, you can't display error messages.

edit: removed the code since my point is that you can't do that. With an AJAX request you can check the response and see if it's a 404 but you can't do that with a script tag.

edit2: on second thought, why don't you fetch the script via AJAX and inject a '<script type="text/javascript">' + responseText + '</script>' inside document.body?

To check if an AJAX request has bombed, check the XMLHTTPRequest object's status property. If it's 404, well, it's a 404.

Also, you shouldn't do this stuff by hand. I always suggest using Prototype or jQuery. Since I have been spoiled by Prototype, I shouldn't try to explain how to check for the request's status. Why don't you ask how to handle AJAX requests in another question here? The pros will certainly tell you how to handle all kinds of failures, not just 404.

Answer 2

what about having one (global) variable to check if it's loaded (e.g. the script will set it after loading finished) and then have another function (already on the page before the loading function) set with timer to check for that variable (e.g. 5 seconds delay?)

if the variable is not set (after the predefined amount of time), display error to the user.

Answer 3

I think you need to scrap the "else", as it will always go through that "loaded" state, whether it's going to work or not, so the "else" branch isn't doing anything useful.

Instead, set a timeout.

var scriptTimer = setTimeout(function() {
  // show error message
  // (should ideally precede with a check the content hasn't
  // been displayed, in case of race condition)
});
scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
       clearTimeout(scriptTimer);
       // now display content in tab
    }
}

Answer 4

EDIT: my method was wrong - use AJAX as Kaze suggested