7

I have multiple <head> references to external js and css resources. Mostly, these are for things like third party analytics, etc. From time to time (anecdotally), these resources fail to load, often resulting in browser timeouts. Is it possible to detect and log on the server when external JavaScript or CSS resources fail to load?

I was considering some type of lazy loading mechanism that when, upon failure, a special URL would be called to log this failure. Any suggestions out there?

What I think happens:

  1. The user hits our page and the server side processes successfully and serves the page

  2. On the client side, the HTML header tries to connect to our 3rd party integration partners, usually by a javascript include that starts with "http://www.someothercompany.com...".

  3. The other company cannot handle our load or has shitty up-time, and so the connection fails.

  4. The user sees a generic IE Page Not Found, not one from our server.

So even though my site was up and everything else is running fine, just because this one call out to the third party servers failed, one in the HTML page header, we get a whole failure to launch.

Improve this question
2

4 Answers 4

Reset to default
5

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

Improve this answer
3
1

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.

Improve this answer
1
  • I can't do either of these if the page fails to load. See the edit I made to the question for clarification.
    – Mark Richman
    Commented Apr 16, 2011 at 5:25
0

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.

Improve this answer
-1

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.

Improve this answer
3
  • I can't make a hash of anything if the whole page fails to load. See the edit I made to the question for clarification.
    – Mark Richman
    Commented Apr 16, 2011 at 5:24
  • I mean you combine this with lazy loading 3rd party js, after your page becomes functional; and ping your js_failed_logger.php with the name and hash in the event js fails to load. Your question implied you are concerned with this being exploited, rather than how to implement it.
    – Majid Fouladpour
    Commented Apr 16, 2011 at 7:30
  • Thanks. I think I'm initially interested in how to implement it. If it works, I can figure out how to secure it.
    – Mark Richman
    Commented Apr 16, 2011 at 13:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.