Detect and Log When External JavaScript or CSS Resources Fail to Load

Detect and log when external JavaScript or CSS resources fail to load

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

how can I check if an external javascript has failed to load?

At the top of your <head>

<script>
    function scriptfail(element) {
        alert('failed to load ' + element.src);
    }
</script>

In your script element

<script src="url1" onerror='scriptfail(this);'></script>

How to detect when one or more JS/CSS library fail to load (e.g. CDN)?

Just add an onerror handler to the tag. This can call a fallback, give the user a message etc.

Example

Using a non-existing url will here pop up an alert:

<link    onerror="alert('woa, error')"    rel="stylesheet"    href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx" >

External resources fail to load when using HTML5 cache

You need to add the NETWORK section, like this:

CACHE MANIFEST

CACHE:
/css/style.css
/js/colors.js
/js/dropzone.js
/js/jquery.min.js
/js/script.js

/img/icon_analytics.png
/img/icon_exit.png
/img/icon_expand.png
/img/icon_list.png
/img/icon_lock.png
/img/icon_menu.png
/img/icon_more_content.png
/img/icon_settings.png
/img/icon_settings_black.png
/img/svg_icons/close_fullscreen.svg
/img/svg_icons/go_fullscreen.svg
/img/loader.gif

NETWORK:
*

Failed to load resource: the server responded with a status of 404 (Not Found)

Your files are not under the jsp folder that's why it is not found.
You have to go back again 1 folder
Try this:

<script src="../../Jquery/prettify.js"></script>

How to use Javascript to check and load CSS if not loaded?

Just check to see if a <link> element exists with the href attribute set to your CSS file's URL:

if (!$("link[href='/path/to.css']").length)
    $('<link href="/path/to.css" rel="stylesheet">').appendTo("head");

The plain ol' JS method is simple too, using the document.styleSheets collection:

function loadCSSIfNotAlreadyLoadedForSomeReason () {
    var ss = document.styleSheets;
    for (var i = 0, max = ss.length; i < max; i++) {
        if (ss[i].href == "/path/to.css")
            return;
    }
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "/path/to.css";

    document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSSIfNotAlreadyLoadedForSomeReason();

Detect and Log When External JavaScript or CSS Resources Fail to Load