I was trying to test whether certain file exist using javascript.(don't want to use Ajax). Want to use catch try to handle ERR_FILE_NOT_FOUND error. I tried

   try{
            img.attr('src', url)
        }catch(err){
            console.log("file"+ url + " doesn't exist");
        }

but it doesn't catch up the error.How do I catch ERR_FILE_NOT_FOUND error?

I was trying to test whether certain file exist using javascript.(don't want to use Ajax). Want to use catch try to handle ERR_FILE_NOT_FOUND error. I tried

   try{
            img.attr('src', url)
        }catch(err){
            console.log("file"+ url + " doesn't exist");
        }

but it doesn't catch up the error.How do I catch ERR_FILE_NOT_FOUND error?

• javascript
• try-catch

Share Improve this question Follow edited Nov 9, 2015 at 17:15 Terry 1,0071010 silver badges2929 bronze badges asked Jul 6, 2015 at 15:19 Elliscope FangElliscope Fang 35122 gold badges44 silver badges99 bronze badges 3

• Try to set event-callbacks like onerror – Adrian Preuss Commented Jul 6, 2015 at 15:22
• onerror attaches an call back function, but it doesn't skip the error message.I'm thinking using try catch to handle error. Any more ideas? – Elliscope Fang Commented Jul 6, 2015 at 15:35
• You cannot use try/catch for asynchronous events. I am not really a javascript expert but I assume the image loading is asynchronous, otherwise it would block your main thread. – Fygo Commented Jul 6, 2015 at 16:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Setting the image attribute src isn't going to throw anything based on the results of the file existing or not, it will just simply show the image or not show it.

You might be able to check the size of the image after it's done loading and see if it is 0 width, but this is still just a hack and might only work for images.

Your best bet is jQuery with ajax and use a simple:

$.get("/path/to/file", function(data, status) {  
   console.log("File request status: "+status); 
});

EDIT:

You might want to check the onerror event like in the ment, you could use the html like:

<img onerror="onerrFunction()">

or

js: imgObject.onerror = function(){}

---

The error you are referring to as 'ERR_FILE_NOT_FOUND' I assume you are finding from a browser such as chrome in the developer console like so:

However, this is not a javascript erro being thrown, so you cannot catch it with js code. This is just a browser error to help debug your code. There might be other ways to catch these kinds of errors but as for what you are asking, that probably isn't in the scope of the question.

Chrome does it to inform. Even if you handle onerror correctly with correct error handling with try-catch and every trick with void or ( ) that is told to prevent error - you can not fix it. It is out of Javascript control.

The best you can do is to let those errors scroll away to the top, to not clutter your output. This works if you also want to remove the clutter of line numbers on each console.log to get a clean output with relevant information. Use \n as line break. A dashed line separate the errors from your output.

var logs = ""

function log(x) {
  logs += '\n\n' + x
}

//your code
try{
  img.attr('src', url)
}catch(err){
  log("file"+ url + " doesn't exist")
}

setTimeout(function(){
  console.log("%c" + logs, "border-top: dashed 2px black;")
}, 1000)

Maybe better replace the setTimeout with a function called in end of your program.

The only way I found is making a fake request to check the file is wherever exist or not like this:

  var request;
  if(window.XMLHttpRequest)
      request = new XMLHttpRequest();
  else
  request = new ActiveXObject("Microsoft.XMLHTTP");
  request.open('GET', url, false);
  request.send();
  // the object request will be actually modified
  if (request.status === 404) {
      console.log("file"+ url + " doesn't exist");
  } 
  else
  {
      img.attr('src', url)
  }

Notice: It only works with same origin, so if you need to check the file in other origins. you need to use Ajax or backend languages.