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?

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?

• javascript
• css

• 1 I suggest looking into something like requirejs.org to dynamically load your JS requirements – jasonscript Commented Jul 24, 2014 at 2:55
• 3 this is the exact reason require.js was made – Deryck Commented Jul 24, 2014 at 2:55
• Ah, nice suggestion, guys. We use requirejs in our project but I missed that. Will take a look into that shortly. – lgc_ustc Commented Jul 24, 2014 at 3:00
• @Deryck does require.js retry loading a script if it fails to load due to network connectivity issues? – mgalgs Commented Oct 1, 2016 at 3:51

2 Answers 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);

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);
}