Detect And Log When External JavaScript Or CSS Resources Fail To Load

I have multiple references to external js and css resources. Mostly, these are for things like third party analytics, etc. From time to time (anecdotally), these resou

Solution 1:

If your app/page is dependent on JS, you can load the content with JS, I know it's confusing. When loading these with JS, you can have callbacks that allow you to only have the functionality of the loaded content and not have to worry about what you didn't load.

var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://domain.com/somefile.js';
script.onload = CallBackForAfterFileLoaded;
document.body.appendChild(script);
function CallBackForAfterFileLoaded (e) {
//Do your magic here...
}

I usually have this be a bit more complex by having arrays of JS and files that are dependent on each other, and if they don't load then I have an error state.

I forgot to mention, obviously I am just showing how to create a JS tag, you would have to create your own method for the other types of files you want to load.

Hope maybe that helps, cheers

Solution 2:

You can look for the presence of an object in JavaScript, e.g. to see if jQuery is loaded or not...

if (typeof jQuery !== 'function') {
   // Was not loaded.
}

jsFiddle.

You could also check for CSS styles missing, for example, if you know a certain CSS file sets the background colour to #000.

if ($('body').css('backgroundColor') !== 'rgb(0, 0, 0)') {
   // Was not loaded.
}

jsFiddle.

When these fail, you can make an XHR to the server to log these failings.

Solution 3:

What about ServiceWorker? We can use it to intercept all http requests and get response code to log whether the external resource fails to load.

Solution 4:

Make a hash of the js name and session cookie and send both js name in plain and the hash. Server side, make the same hash, if both are same log, if not, assume it's abuse.