CODEWITHSUNDEEP
javascripttry-catch
Elliscope Fang
Elliscope Fang

Reputation: 351

How to catch ERR_FILE_NOT_FOUND errors in JavaScript

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?

Upvotes: 6

Views: 11288

Answers (3)

Ali Kianoor
Ali Kianoor

Reputation: 1243

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.

Upvotes: 0

user985399
user985399

Reputation:

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.

Upvotes: 1

Micaiah Wallace
Micaiah Wallace

Reputation: 1146

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 comment, 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:

screenshot

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.

Upvotes: 1

Related Questions