How can I catch a 404 error in Javascript?

Question

I have an HTML audio element and I am dynamically setting the "src" property of the element to an audio file stored on our local area network.

This is how it works:

function setSource(source) {
   audio.src = source;
}

var audio = new Audio();
var source = "http://localhost/folder/file.mp3";
setSource(source);

Sometimes, the source audio file that I am pointing to has a broken link and this causes a 404 error to be generated and logged to the browser console.

I want to be able to catch the 404 errors so as to prevent them being logged to the console.

This is how I attempted it:

function setSource(source) {
  try {
    audio.src = src;
  }//end try
  catch (e) {
    //do nothing
  }//end catch
}//end setSource

var audio = new Audio();
var source = "http://localhost/folder/file.mp3";
setSource(source);

Unfortunately, my try/catch statement does absolutely nothing and the error is still logged to the console. Am I doing something wrong?

Due to the nature of my app, there will be lots of 404 errors, which is normal and expected, but it looks really unstable and "ugly" to the users (if they happen to open the console).

FYI: I am using Google Chrome.

I don't think you can prevent people checking error inside google chrome console, if it's an error, google will log it — Mindless
– Mindless, Commented Aug 9, 2017 at 3:51
Due to the nature of my app, there will be lots of 404 errors, which is normal and expected, but it looks really unstable and "ugly" to the users (if they happen to open the console) - I have added this into the body of my question :) — cleverpaul
– cleverpaul, Commented Aug 9, 2017 at 3:55
@guest271314 - will a ServiceWorker prevent the network request from being logged? — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 3:59
to "assure" the user, you could have an error event listener on the audio object, and log something assuring to the console :p — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 4:00
a proxy server is only necessary if the end server is not under the OP's control. If the end server is, then a proxy server is not at all necessary :p — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 4:19

cleverpaul · Accepted Answer · 2017-08-09 04:20:12Z

9

In this case, the logging of HTTP errors in the browser console is a feature exclusive to the browser and not of Javascript, or any other website code.

This cannot be prevented.

answered Aug 9, 2017 at 4:20

cleverpaul

9554 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

grantonzhuang · Accepted Answer · 2017-08-09 04:01:07Z

3

audio.onload = function() {
    console.log('success');
};
audio.onerror = function() {
    console.log('fail');
};
audio.src = 'http://localhost/folder/file.mp3';

answered Aug 9, 2017 at 4:01

grantonzhuang

5674 silver badges6 bronze badges

2 Comments

cleverpaul Over a year ago

This logs "fail" to the console as well as the standard error.

Jaromanda X Over a year ago

you can make it log "the above error is nothing to worry about, keep calm and continue browsing" - or something equally assuring to the end user :p you can't hide network requests from the end user, that could be a perceived "security" or "privacy" issue by the end user

Tamunoibi Aprekuma · Accepted Answer · 2021-03-05 21:27:52Z

1

Yes. With recent updates this is possible. You can enable it here: DevTools->Settings->General->Console->Hide network messages.