2

I'm attempting to catch a potential error on my page, the page has a collection of URLs (retrieved at page load) to various resources which are loaded when needed.

However these resources are only available for a set time, so if the user leaves the page idle for a long period, the URLs may no longer be valid and may return a 403.

I'm currently detecting errors on the resources using something along the lines of:

$(".identifier").on("error", function () {
    console.log("Error on resource load");
});

But can I detect the specific type of error / the error code? e.g. the 403 permissions error rather than a generic "There is an error". If possible I would like to be able to react differently to different errors.

DBS
  • 9,110
  • 4
  • 35
  • 53

1 Answers1

4

Let's say you have all available URL's to your resources inside an array e.g.

var resources = [
    "http://url/to/resource-one.fiel",
    "http://url/to/resource-two.fiel"
    ]

Then you could use the following function to check the http response of these resources, by looping over the array and passing each resource to checkResources.

   function checkResource (url, index) {
      var req = new XMLHttpRequest();
      req.open('HEAD', url, true);
      req.send();
      if (req.status === 404) {
        return index;
      }
      if (req.status === 403) {
        return index;
      }
   };

Or use a specific URL without a loop and delete the index param in the function, maybe return the URL instead. In other words do an ajax HEAD request, which will only return the headers resource, rather than the resource itself.

You could as well get all the header information or just a specific header info by name like so

 xmlhttp.open('HEAD', 'path/to/your/resource', true);
 xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) {
      console.log(xmlhttp.getAllResponseHeaders()); // get all header info
      console.log(xmlhttp.getResponseHeader("Last-Modified")); // get by name
    }
 }
 xmlhttp.send(null)
DavidDomain
  • 14,976
  • 4
  • 42
  • 50
  • Hmm good point, I could check the resource head. However I was hoping I could somehow read the error returned, rather than double up my requests each time something is loaded. – DBS May 20 '15 at 12:46
  • Are you requesting your resources via ajax? – DavidDomain May 20 '15 at 12:59
  • The resources are video files which are displayed in a standard HTML5 video element. I'm setting the source of the video element and the browser is fetching the content. – DBS May 20 '15 at 13:04
  • As far as i know, the error event handler will only provide information on errors related to scripts and files. The errors you are trying to catch are related to http requests, so if you are trying to catch those and get information on them within your javascript you will have to do so using ajax, or use the error event handler on the video element and check the networkState attribute, but this will not give you information on the http response header. – DavidDomain May 20 '15 at 13:40
  • Did you find an elegant solution for this? – rorykoehler Apr 27 '16 at 09:11