Detect js/css file loading failure

Question

In our SAAS web app, we use a whole bunch of js and css files (around 80 in total), and some of the files, especially ones other depend on like jQuery, must be loaded before our app can run properly.

In an ideal network environment, this poses no problem, as all resources would be loaded every single time. But in a production environment, we have found it's not rare that some of the js/css files are not properly loaded when the network is poor. When this happens, the browser logs the js/css load timeout errors in console, and the app appears running. Then when the app tries to call some functions defined in the js files that failed to load, some undefined exception is thrown and logged in console, and the app stops running which confuses users most of the time. Note that I am not talking about 404 loading errors which are programming/deployment errors, just timeout errors caused by poor network connections.

We don't think such an experience is optimal. We want to check if all the resources loaded before the app runs. If there is any issue, we warn the user so that he can opt to reload the app, which can reduce much of the confusion, in our opinion.

Some might suggest to concat the files and get the number down to a couple, and yes that could reduce the possibility of having timeout errors. But still this won't solve the problem -- we still could have timeout errors loading a couple of files.

After some research on SO, I found the following proposals:
1 use window.error to catch uncaught exceptions, including undefined exception;
2 place some special variable/state in every js/css file, and detect if that variable/state exists;
3 use onload event handler to register a loading event has completed successfully, then call setTimeout to see if any event has not been registered;

AFAICS, these have some drawbacks:
1 is a lazy detection technique, i.e., we don't know the script is not properly loaded until the exception is thrown;
2 messy, need to modify 3rd party plugins in some cases;
3 it is said that IE has some problems firing onload event in some scenarios;

So what is the best cross browser mechanism to detect such js/css file loading failures?

Answer 1

You can load your scripts in javascript. For example:

var scriptsarray=new Array(
"script1.js",
"script2.js",
"style1.css",
"style2.css"
)

var totalloads=0;

for (var i=0;i<scriptsarray.length;i++){
var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = scriptsarray[i] + '?rnd=' + Math.random();
                   document.body.appendChild(script);
    script.addEventListener('load', wholoads, false);
    script.addEventListener('error', errload,false);
}

function wholoads(scriptname){
 totalloads++;
 if (totalloads==scriptsarray.length){alert('All scripts and css load');}
}

function errload(event){

    console.log(event);
}

Answer 2

window.addEventListener("error", function (e, url) {
    var eleArray = ["IMG", "SCRIPT", "LINK"];
    var resourceMap = {
        "IMG": "Picture file",
        "SCRIPT": "JavaScript file",
        "LINK": "CSS file"
    };
    var ele = e.target;
    if(eleArray.indexOf(ele.tagName) != -1){
        var url = ele.tagName == "LINK" ? ele.href: ele.src;
        console.log("src：" + url + " File " + resourceMap[ele.tagName] + " failed loading. ");

        return true;// dont show in console
    }
}, true);