How to tell if a <script> tag failed to load

Asked 11/2, 2009 at 20:57 Answered 18/9, 2020 at 17:5

147

I'm dynamically adding <script> tags to a page's <head>, and I'd like to be able to tell whether the loading failed in some way -- a 404, a script error in the loaded script, whatever.

In Firefox, this works:

var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);

However, this doesn't work in IE or Safari.

Does anyone know of a way to make this work in browsers other than Firefox?

(I don't think a solution that requires placing special code within the .js files is a good one. It's inelegant and inflexible.)

Beldam answered 11/2, 2009 at 20:57 Comment(3)

Big website, automatic loading of dependencies for content loaded through ajax. if+polling is annoying cruft that I don't want to have to put into all JS. – Beldam 11/2, 2009 at 21:49

You might also want to check for load failure when making a JSONP request using script tag injection... – Eyas 23/1, 2012 at 17:57

Skip to ans #539245 – Primula 27/9, 2017 at 5:52

UPDATE 2021: All browsers today support onerror="" on script tags, examples:

Building script tag in js on MDN
Html example by @Rudey in comments: <script src="nonexistent.js" onerror="alert('error!')"></script>

Original comment from 2010:

If you only care about html5 browsers you can use error event.

From the spec:

If the src attribute's value is the empty string or if it could not be resolved, then the user agent must queue a task to fire a simple event named error at the element, and abort these steps.

(...)

If the load resulted in an error (for example a DNS error, or an HTTP 404 error) Executing the script block must just consist of firing a simple event named error at the element.

This means you don't have to do any error prone polling and can combine it with async and defer attribute to make sure the script is not blocking page rendering:

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

More on http://www.w3.org/TR/html5/scripting-1.html#script

Bawdyhouse answered 12/11, 2010 at 10:8 Comment(5)

Any idea of JSONP implementations, like that in jQuery support this? Everything I've read here about detecting that JSONP failures to load says it can't be detected but a timeout can be a workaround, and a timeout was added to a recent version of JSONP. It seems that this answer provides something better than the timeout though - is that correct? – Consistory 26/12, 2011 at 21:29

example possible please? – Carotenoid 27/10, 2016 at 20:23

<script src="nonexistent.js" onerror="alert('error!')"></script> fiddle – Perice 17/2, 2017 at 10:48

@Perice Uncaught SyntaxError: Unexpected token '<' (in latest Chrome) – Extern 29/2, 2020 at 5:25

@Extern sounds like you've attempted to put a HTML tag in JavaScript. <script src="nonexistent.js" onerror="alert('error!')"></script> should go in your HTML file, not JS. – Perice 3/3, 2020 at 16:18

There is no error event for the script tag. You can tell when it is successful, and assume that it has not loaded after a timeout:

<script type="text/javascript" onload="loaded=1" src="....js"></script>

Pammie answered 11/2, 2009 at 21:12 Comment(9)

The "onload" listener will be fired even if there's a javascript error. – Urbai 11/2, 2009 at 21:38

Well, yes if the file LOADS and there is an error in the file itself, but if the file is not served up, the onload will never fire. – Pammie 11/2, 2009 at 21:49

yes, true, that's why I asked to be more specific of what kind of error he's looking for. – Urbai 11/2, 2009 at 21:51

Ok, sorry for the downvote, seems like he's looking for both 404 error (which will work with your solution), and also javascript error, which will work with mine. – Urbai 11/2, 2009 at 21:52

But the timeout has to be provided by the page's coder right? So the coder might choose a different timeout to the browser, assume the script load timed out, and then have it succeed a bit later. Or not? – Consistory 26/12, 2011 at 21:18

I guess there is one for HTML5 now? – Carotenoid 27/10, 2016 at 20:26

There is onerror evnt for script tag. It will fire when the resource not found. – Butterandeggs 22/12, 2017 at 8:59

Note I found I needed a combination of both the onload and onerror events. If there is a syntax error in the script (e.g. error in code, truncated source, or html error page), the onload event will fire and the onerror event will not fire. If the resource fails to be fetched (404) the onerror event will fire. In IE11 onerror also fired if escape was pressed before the file loaded (tested using fiddler and long timeout on script file in autoresponder). Here is a jsbin test: jsbin.com/jusoyob – Yardman 15/11, 2018 at 2:43

@Diodeus-JamesMacFarlane as others have commented, there is an error event, at least in all modern browsers - down voted for incorrectly stating "There is no error event for the script tag". Please update or remove this outdated/wrong answer. – Emulation 28/10, 2021 at 13:11

my working clean solution (2017)

function loaderScript(scriptUrl){
   return new Promise(function (res, rej) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.type = 'text/javascript';
    script.onerror = rej;
    script.async = true;
    script.onload = res;
    script.addEventListener('error',rej);
    script.addEventListener('load',res);
    document.head.appendChild(script);
 })

}

As Martin pointed, used like that:

const event = loaderScript("myscript.js")
  .then(() => { console.log("loaded"); })
  .catch(() => { console.log("error"); });

try{
 await loaderScript("myscript.js")
 console.log("loaded"); 
}catch{
 console.log("error");
}

Brigidabrigit answered 2/6, 2017 at 9:45 Comment(1)

Use it as follows: loaderScript("myscript.js").then(() => { console.log("loaded"); }).catch(() => { console.log("error"); }); – Pruter 20/9, 2017 at 17:28

The script from Erwinus works great, but isn't very clearly coded. I took the liberty to clean it up and decipher what it was doing. I've made these changes:

Meaningful variable names
Use of prototype.
require() uses an argument variable
No alert() messages are returned by default
Fixed some syntax errors and scope issues I was getting

Thanks again to Erwinus, the functionality itself is spot on.

function ScriptLoader() {
}

ScriptLoader.prototype = {

    timer: function (times, // number of times to try
                     delay, // delay per try
                     delayMore, // extra delay per try (additional to delay)
                     test, // called each try, timer stops if this returns true
                     failure, // called on failure
                     result // used internally, shouldn't be passed
            ) {
        var me = this;
        if (times == -1 || times > 0) {
            setTimeout(function () {
                result = (test()) ? 1 : 0;
                me.timer((result) ? 0 : (times > 0) ? --times : times, delay + ((delayMore) ? delayMore : 0), delayMore, test, failure, result);
            }, (result || delay < 0) ? 0.1 : delay);
        } else if (typeof failure == 'function') {
            setTimeout(failure, 1);
        }
    },

    addEvent: function (el, eventName, eventFunc) {
        if (typeof el != 'object') {
            return false;
        }

        if (el.addEventListener) {
            el.addEventListener(eventName, eventFunc, false);
            return true;
        }

        if (el.attachEvent) {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    },

    // add script to dom
    require: function (url, args) {
        var me = this;
        args = args || {};

        var scriptTag = document.createElement('script');
        var headTag = document.getElementsByTagName('head')[0];
        if (!headTag) {
            return false;
        }

        setTimeout(function () {
            var f = (typeof args.success == 'function') ? args.success : function () {
            };
            args.failure = (typeof args.failure == 'function') ? args.failure : function () {
            };
            var fail = function () {
                if (!scriptTag.__es) {
                    scriptTag.__es = true;
                    scriptTag.id = 'failed';
                    args.failure(scriptTag);
                }
            };
            scriptTag.onload = function () {
                scriptTag.id = 'loaded';
                f(scriptTag);
            };
            scriptTag.type = 'text/javascript';
            scriptTag.async = (typeof args.async == 'boolean') ? args.async : false;
            scriptTag.charset = 'utf-8';
            me.__es = false;
            me.addEvent(scriptTag, 'error', fail); // when supported
            // when error event is not supported fall back to timer
            me.timer(15, 1000, 0, function () {
                return (scriptTag.id == 'loaded');
            }, function () {
                if (scriptTag.id != 'loaded') {
                    fail();
                }
            });
            scriptTag.src = url;
            setTimeout(function () {
                try {
                    headTag.appendChild(scriptTag);
                } catch (e) {
                    fail();
                }
            }, 1);
        }, (typeof args.delay == 'number') ? args.delay : 1);
        return true;
    }
};

$(document).ready(function () {
    var loader = new ScriptLoader();
    loader.require('resources/templates.js', {
        async: true, success: function () {
            alert('loaded');
        }, failure: function () {
            alert('NOT loaded');
        }
    });
});

Metonymy answered 11/5, 2013 at 13:15 Comment(5)

I was forced to use jQuery's $.getScript, as this function did fail for cached scripts in MSIE8-, unfortunatelly – Darleen 4/6, 2013 at 10:35

@ZathrusWriter that's probably a better idea, thanks for letting us know! You could probably add a random int to the url in this code and it would remove the caching. – Metonymy 4/6, 2013 at 14:23

Yes Aram, that would certainly do the trick, however it would also invalidate browser's caching, so the overhead in such case is probably not really worth it ;) – Darleen 4/6, 2013 at 16:14

@ZathrusWriter, so how does the workings of the jQuery implementation work? – Primula 7/5, 2014 at 9:2

@Primula sorry, I'm not a jQuery core developer, so I can't really answer that – Darleen 7/5, 2014 at 9:11

I know this is an old thread but I got a nice solution to you (I think). It's copied from an class of mine, that handles all AJAX stuff.

When the script cannot be loaded, it set an error handler but when the error handler is not supported, it falls back to a timer that checks for errors for 15 seconds.

function jsLoader()
{
    var o = this;

    // simple unstopable repeat timer, when t=-1 means endless, when function f() returns true it can be stopped
    o.timer = function(t, i, d, f, fend, b)
    {
        if( t == -1 || t > 0 )
        {
            setTimeout(function() {
                b=(f()) ? 1 : 0;
                o.timer((b) ? 0 : (t>0) ? --t : t, i+((d) ? d : 0), d, f, fend,b );
            }, (b || i < 0) ? 0.1 : i);
        }
        else if(typeof fend == 'function')
        {
            setTimeout(fend, 1);
        }
    };

    o.addEvent = function(el, eventName, eventFunc)
    {
        if(typeof el != 'object')
        {
            return false;
        }

        if(el.addEventListener)
        {
            el.addEventListener (eventName, eventFunc, false);
            return true;
        }

        if(el.attachEvent)
        {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    };

    // add script to dom
    o.require = function(s, delay, baSync, fCallback, fErr)
    {
        var oo = document.createElement('script'),
        oHead = document.getElementsByTagName('head')[0];
        if(!oHead)
        {
            return false;
        }

        setTimeout( function() {
            var f = (typeof fCallback == 'function') ? fCallback : function(){};
            fErr = (typeof fErr == 'function') ? fErr : function(){
                alert('require: Cannot load resource -'+s);
            },
            fe = function(){
                if(!oo.__es)
                {
                    oo.__es = true;
                    oo.id = 'failed';
                    fErr(oo);
                }
            };
            oo.onload = function() {
                oo.id = 'loaded';
                f(oo);
            };
            oo.type = 'text/javascript';
            oo.async = (typeof baSync == 'boolean') ? baSync : false;
            oo.charset = 'utf-8';
            o.__es = false;
            o.addEvent( oo, 'error', fe ); // when supported

            // when error event is not supported fall back to timer
            o.timer(15, 1000, 0, function() {
                return (oo.id == 'loaded');
            }, function(){ 
                if(oo.id != 'loaded'){
                    fe();
                }
            });
            oo.src = s;
            setTimeout(function() {
                try{
                    oHead.appendChild(oo);
                }catch(e){
                    fe();
                }
            },1); 
        }, (typeof delay == 'number') ? delay : 1);  
        return true;
    };

}

$(document).ready( function()
{
    var ol = new jsLoader();
    ol.require('myscript.js', 800, true, function(){
        alert('loaded');
    }, function() {
        alert('NOT loaded');
    });
});

Rechaba answered 4/8, 2011 at 20:26 Comment(15)

...where did jQuery come from? – Dewees 4/8, 2011 at 20:29

You are using $('#'+os) and one or two others. you did notstate in your answer that you are using jQuery – Dewees 4/8, 2011 at 20:50

And also, it is a cross-browser solution ;-) – Rechaba 4/8, 2011 at 20:50

github.com/LivePress/scriptcaller - this project does exactly this in a cross-browser way with a nice interface – Rissa 7/6, 2012 at 17:48

@gleber: This script is also cross-browser but with one major advantage: the code is less. – Rechaba 8/6, 2012 at 19:42

I was forced to use jQuery's $.getScript, as this function did fail for cached scripts in MSIE8-, unfortunatelly – Darleen 4/6, 2013 at 10:35

@Zathrus: Sorry to hear that. Since I wrote this, never experience any problems with it and I also use caching at serving my scripts. Did you check the http headers of your caching method are well-formed? $.getScript is not the same as inserting a link tag to the head section of the page. – Rechaba 5/6, 2013 at 1:57

@Erwinus I did not check headers, it was just a quick cross-browser check that I performed and $.getScript always ran without problems, so I stuck with it... you are welcome to try yourself, I'm using W7 and XAMPP here – Darleen 5/6, 2013 at 13:20

@Erwinus, Please add in which browsers are supported in the answer too, that would be helpful. – Primula 7/5, 2014 at 8:49

Whether this works or not, it's damned painful to read - let alone debug. That's some pretty poor formatting and truly atrocious coding style. The variable naming alone is a mess. – Slip 21/11, 2014 at 11:26

Thank you for your kindness, @Thor84no. I hope you enjoy it. Code is designed for SPEED. Look at the answer of Aram Kocharyan, if you want to get it clearer if you don't understand it. – Rechaba 21/11, 2014 at 18:4

If you don't see the value of readable code (and you could make that readable without any changes to actually executed code), then I feel sorry for every single person that has to work with you and your code. – Slip 22/11, 2014 at 23:7

@Thor84no: Thank you for you concerns. You are free to don't use it if you don't like it. Have a nice day. – Rechaba 23/11, 2014 at 5:24

This works for me, but I had to remove an extra }; on the line before o.require. Regarding its readability, I think that critics should present a better solution rather than ridicule the only solution presented. Most code that is considered well written by critics really ends up looking like hieroglyphics anyway. – Borgia 6/10, 2015 at 21:28

@Borgia Yesterday. Fixed it, thanks. Well, about the style of the code, I like it short (saves some bytes at downloading). The first letter is expected type. When you know this you don't need long var names, type is important. Because javascript is a untyped language, it's nice to know what the var must be instead of a long name that could be wrong. – Rechaba 8/10, 2015 at 10:13

To check if the javascript in nonexistant.js returned no error you have to add a variable inside http://fail.org/nonexistant.js like var isExecuted = true; and then check if it exists when the script tag is loaded.

However if you only want to check that the nonexistant.js returned without a 404 (meaning it exists), you can try with a isLoaded variable ...

var isExecuted = false;
var isLoaded = false;
script_tag.onload = script_tag.onreadystatechange = function() {
    if(!this.readyState ||
        this.readyState == "loaded" || this.readyState == "complete") {
        // script successfully loaded
        isLoaded = true;

        if(isExecuted) // no error
    }
}

This will cover both cases.

Urbai answered 11/2, 2009 at 21:13 Comment(6)

It works, but doesn't really do what I want -- a failure in that case would never fire an event. I don't want to have to poll for a variable and, if it's still false after a few seconds, fire the on-fail callback. – Beldam 11/2, 2009 at 21:43

What kind of error are you trying to retrieve? Failure to load? Failure to execute the javascript in nonexstant.js? HTTP Response Error? Please be more descriptive. – Urbai 11/2, 2009 at 21:45

Any of the above would be good. I specifically care about a 404 error, though. – Beldam 11/2, 2009 at 21:50

404, meaning you want to check if the file nonexistant.js doesn't exist? But if it does you want to check if it returned no error? – Urbai 11/2, 2009 at 21:52

Hey David, you should be able to assume that if this.readyState/... is not true, then the script failed to load. Basically an onError. – Unchristian 16/8, 2012 at 23:44

@Cody, he is saying the onload callback didn't even run because there is no onload event (example internet down or server down etc etc) – Primula 21/6, 2013 at 17:35

I hope this doesn't get downvoted, because in special circumstances it is the most reliable way to solve the problem. Any time the server allows you to get a Javascript resource using CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing), you have a rich array of options to do so.

Using XMLHttpRequest to fetch resources will work across all modern browsers, including IE. Since you are looking to load Javascript, you have Javascript available to you in the first place. You can track the progress using the readyState (http://en.wikipedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener). Finally, once you receive the content of the file, you can execute it with eval ( ). Yes, I said eval -- because security-wise it is no different from loading the script normally. In fact, a similar technique is suggested by John Resig to have nicer tags (http://ejohn.org/blog/degrading-script-tags/).

This method also lets you separate the loading from the eval, and execute functions before and after the eval happens. It becomes very useful when loading scripts in parallel but evaluating them one after the other -- something browsers can do easily when you place the tags in HTML, but don't let you by adding scripts at run-time with Javascript.

CORS is also preferable to JSONP for loading scripts (http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests). However, if you are developing your own third-party widgets to be embedded in other sites, you should actually load the Javascript files from your own domain in your own iframe (again, using AJAX)

In short:

Try to see if you can load the resource using AJAX GET
Use eval after it has successfully loaded

To improve it:

Check out the cache-control headers being sent
Look into otherwise caching the content in localStorage, if you need to
Check out Resig's "degrading javascript" for cleaner code
Check out require.js

Artimas answered 31/1, 2013 at 21:38 Comment(1)

NB that this way requires the origin server to have CORS enabled, which is not always the case or controllable :| – Carotenoid 27/10, 2016 at 20:34

This trick worked for me, although I admit that this is probably not the best way to solve this problem. Instead of trying this, you should see why the javascripts aren't loading. Try keeping a local copy of the script in your server, etc. or check with the third party vendor from where you are trying to download the script.

Anyways, so here's the workaround: 1) Initialize a variable to false 2) Set it to true when the javascript loads (using the onload attribute) 3) check if the variable is true or false once the HTML body has loaded

<html>
  <head>
    <script>
      var scriptLoaded = false;

      function checkScriptLoaded() {
        if (scriptLoaded) {
          // do something here
        } else {
          // do something else here!
        }
      }
    </script>
    <script src="http://some-external-script.js" onload="scriptLoaded=true;" />
  </head>
  <body onload="checkScriptLoaded()">
    <p>My Test Page!</p>
  </body>
</html>

Repetition answered 12/1, 2013 at 17:53 Comment(4)

What if the script is still loading? How do you know if the file was not found or if you just have to wait? – Justinjustina 14/10, 2013 at 3:28

This solution works in my testing, as long as the script tag is placed directly in the document source. The document's onload event doesn't fire until all resources referenced in the page source have already loaded (or failed). If you need to insert scripts into the DOM later, though, you need another approach. – Osanna 27/11, 2013 at 18:29

Great solution. I don't understand why it hasn't been upvoted. – Betroth 11/11, 2014 at 8:35

This assumes that the script will be loaded synchronously blocking everything else, which is not always true. In fact, it is not a recommended way of loading scripts. – Resilient 25/6, 2019 at 20:2

Here is another JQuery-based solution without any timers:

<script type="text/javascript">
function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}
</script>

Thanks to: https://mcmap.net/q/99734/-how-do-i-check-if-file-exists-in-jquery-or-pure-javascript

Sample usage (original sample from JQuery getScript documentation):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button id="go">&raquo; Run</button>
<div class="block"></div>

<script>


function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}


loadScript("https://raw.github.com/jquery/jquery-color/master/jquery.color.js", function() {
  console.log("loaded jquery-color");
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
}, function() { console.error("Cannot load jquery-color"); });


</script>
</body>
</html>

Justinjustina answered 14/10, 2013 at 3:24 Comment(4)

Nice Sergey! So, you're using .get() to check if the file exists and .getScript() to check to see if it can be executed/loaded without errors? – Milkwort 13/11, 2013 at 18:24

Yes. As I recall, this approach does have limitations: you won't be able to load many scripts in this way --- if I remember correctly, because of cross-domain scripting restrictions. – Justinjustina 14/11, 2013 at 0:47

The problem with using jQuery (or another library) is that you need to first load that library. So how do you check if that library failed to load? – Primula 7/5, 2014 at 9:4

I've taken this approach as well, but I recommend using cache:true for the $.getScript call (this is off by default). This way, for most requests, it automatically uses the cached version for the getScript call (saving you latency) – Egis 10/12, 2014 at 16:32

This can be done safely using promises

    function loadScript(src) {
      return new Promise(function(resolve, reject) {
        let script = document.createElement('script');
        script.src = src;
    
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error("Script load error: " + src));
    
        document.head.append(script);
      });
    }

and use like this

    let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");
    
    promise.then(
      script => alert(`${script.src} is loaded!`),
      error => alert(`Error: ${error.message}`)
    );

Sufficiency answered 30/7, 2018 at 9:24 Comment(0)

onerror Event

*Update August 2017: onerror is fired by Chrome and Firefox. onload is fired by Internet Explorer. Edge fires neither onerror nor onload. I wouldnt use this method but it could work in some cases. See also

Definition and Usage The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image).

Tip: When used on audio/video media, related events that occurs when there is some kind of disturbance to the media loading process, are:

onabort
onemptied
onstalled
onsuspend

In HTML:

element onerror="myScript">

In JavaScript, using the addEventListener() method:

object.addEventListener("error", myScript);

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

Example Execute a JavaScript if an error occurs when loading an image:

img src="image.gif" onerror="myFunction()">

Analysand answered 23/4, 2019 at 20:30 Comment(0)

The reason it doesn't work in Safari is because you're using attribute syntax. This will work fine though:

script_tag.addEventListener('error', function(){/*...*/}, true);

...except in IE.

If you want to check the script executed successfully, just set a variable using that script and check for it being set in the outer code.

Parhelion answered 11/2, 2009 at 21:18 Comment(5)

That actually doesn't make any difference for Safari -- it still doesn't fire the error handler. – Beldam 11/2, 2009 at 21:35

I had a problem with an onclick handler in safari and this was what fixed it, so I thought it'd be the same for onerror too. Apparently not... – Parhelion 11/2, 2009 at 21:53

Should this work for statically included script tags too, or just ones injected dynamically? I just tried to use it to detect if jQuery failed to load but it didn't work. I'm not sure if I'm doing it wrong or it just doesn't work in this case. – Consistory 26/12, 2011 at 21:50

@Consistory - an event listener will never work on a static HTML <script>. If you try to add it before then you get an error that the tag doesn't exist, and if you add it after then the script's already run and triggered its events. The only way there is to look for side effects caused by the script. – Parhelion 1/1, 2012 at 3:12

Thanks flussence. Too bad that this only works for 404, not for JS errors. Setting a variable inside the script is not always practicable. – Placative 23/3, 2012 at 17:6

This doesn't need jquery, doesn't need to load the script async, needs no timer nor to have the loaded script set a value. I've tested it in FF, Chrome, and Safari.

<script>
        function loadScript(src) {
          return new Promise(function(resolve, reject) {

            let s = window.document.createElement("SCRIPT");

            s.onload = () => resolve(s);
            s.onerror = () => reject(new Error(src));
            s.src = src;
            // don't bounce to global handler on 404.
            s.addEventListener('error', function() {});
            window.document.head.append(s);
          }); 
        }   
                        
        let successCallback = (result) => {
          console.log(scriptUrl + " loaded.");
        }   
                        
        let failureCallback = (error) => {
          console.log("load failed: " + error.message);
        }   
                        
        loadScript(scriptUrl).then(successCallback, failureCallback);
</script>

Shop answered 18/9, 2020 at 17:5 Comment(0)

It was proposed to set a timeout and then assume load failure after a timeout.

setTimeout(fireCustomOnerror, 4000);

The problem with that approach is that the assumption is based on chance. After your timeout expires, the request is still pending. The request for the pending script may load, even after the programmer assumed that load won't happen.

If the request could be canceled, then the program could wait for a period, then cancel the request.

Tonry answered 28/1, 2010 at 23:24 Comment(0)

Well, the only way I can think of doing everything you want is pretty ugly. First perform an AJAX call to retrieve the Javascript file contents. When this completes you can check the status code to decide if this was successful or not. Then take the responseText from the xhr object and wrap it in a try/catch, dynamically create a script tag, and for IE you can set the text property of the script tag to the JS text, in all other browsers you should be able to append a text node with the contents to script tag. If there's any code that expects a script tag to actually contain the src location of the file, this won't work, but it should be fine for most situations.

Sugar answered 17/2, 2010 at 21:0 Comment(1)

This solution is way obsolete with modern browsers. – Yearling 22/9, 2019 at 1:43

This is how I used a promise to detect loading errors that are emited on the window object:

<script type='module'>
window.addEventListener('error', function(error) {
  let url = error.filename
  url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
  url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
  url = url.substring(url.lastIndexOf("/") + 1, url.length);
  window.scriptLoadReject && window.scriptLoadReject[url] && window.scriptLoadReject[url](error);
}, true);
window.boot=function boot() {
  const t=document.createElement('script');
  t.id='index.mjs';
  t.type='module';
  new Promise((resolve, reject) => {
    window.scriptLoadReject = window.scriptLoadReject || {};
    window.scriptLoadReject[t.id] = reject;
    t.addEventListener('error', reject);
    t.addEventListener('load', resolve); // Careful load is sometimes called even if errors prevent your script from running! This promise is only meant to catch errors while loading the file.
  }).catch((value) => {
    document.body.innerHTML='Error loading ' + t.id + '! Please reload this webpage.<br/>If this error persists, please try again later.<div><br/>' + t.id + ':' + value.lineno + ':' + value.colno + '<br/>' + (value && value.message);
  });
  t.src='./index.mjs'+'?'+new Date().getTime();
  document.head.appendChild(t);
};
</script>
<script nomodule>document.body.innerHTML='This website needs ES6 Modules!<br/>Please enable ES6 Modules and then reload this webpage.';</script>
</head>

<body onload="boot()" style="margin: 0;border: 0;padding: 0;text-align: center;">
  <noscript>This website needs JavaScript!<br/>Please enable JavaScript and then reload this webpage.</noscript>

Larrup answered 23/12, 2018 at 17:25 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags