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.

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.

• javascript
• jquery
• http-status-code-403

Share Improve this question Follow asked May 20, 2015 at 11:19 DBSDBS 10k44 gold badges3838 silver badges5858 bronze badges 1

• Maybe this can help you stackoverflow./a/10556743/1438764 – David Chavez Commented May 20, 2015 at 11:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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)