We Keep Coding

Fetching error gives more information on error in console than in catch method [duplicate]

I wrote a function that keeps returning an Access-Control-Allow-Origin error. This is actually fine for me; I don't want to fix this. I just want to catch it so I can read its message in my program.
All the code that causes the error to be thrown is within my try block, and my catch block displays the error's string message. However, when I run the code, no error is caught, and the error shows up in red in the console. How do I catch this error and store its message?
try {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (this.status < 400 && this.status >= 300) {
console.log('this redirects to ' + this.getResponseHeader("Location"));
} else {
console.log('doesn\'t redirect');
}
}
xhr.open('HEAD', $scope.suggLink, true);
xhr.send();
} catch(e) {
console.log('Caught it!');
console.log(e.message);
}

While browsers will log a more-detailed error message to the console, you can’t access that from your code. See https://bugs.chromium.org/p/chromium/issues/detail?id=118096#c5:
The details of errors of XHRs and Fetch API are not exposed to JavaScript for security reasons.
As far as the what specs actually require here, the Fetch spec is what defines the details of the “status message” to provide in case of an error — even if XHR is used instead of the Fetch API (the XHR spec references the Fetch spec). And for any network error or response blocked by the browser, the Fetch spec requires that the status message be “the empty byte sequence”:
A network error is a response whose status is always 0, status message is always the empty byte sequence, header list is always empty, body is always null, and trailer is always empty.
So all you can get back from any error you can catch is “TypeError: Failed to fetch” or such.
If you’re using XHR, all you have for handling an error is the onerror event handler:
xhr.onerror = function() { console.log("Error occurred but I dunno what exactly.")}

jquery version of above (sideshowbarker's) workaround for CORS error:
let sURL = 'https://www.mocky.io/v2/5185415ba171ea3a00704eed';
$.getJSON(sURL, function (json)
{
console.log('json from web-service ->', json);
})
.fail(function()
{
console.log("error - could not get json data from service");
});

Dash.js - Trapping 404 errors from MPEG-DASH player

I've using the Dash.js player to play MPEG-DASH videos. The videos are pulled from a server. Every now and then there will be 404 errors due to server issues, I would like to retry the stream in the background by detecting the 404 error and acting accordingly.
The problem is I cannot catch the error, it's thrown from the line
req.send();
Which is in a file called FragmentLoader.js.
I've tried the following error handling:
window.addEventListener('error', function(e) {
console.log("Item: " + e.message);
}, true);
var oReq = new XMLHttpRequest();
oReq.addEventListener("error", function (e) {
console.log("xml item: " + e.message);
}, true);
$(document).ajaxError(function (event, xhr, ajaxOptions, errorThrown) {
alert("ajax erorr");
});
However none of these conditions catch the error. Is there any way to catch these errors thrown from the dash.js player?

Dash.js has internal retry logic on a 404 - it will retry 3 times (so a total of 4 attempts) before giving up. There's some discussion about improving this behaviour further such as trying the other available representations, but that isn't there yet.
However, this depends on the 404 being detected by the page. There are some XHR errors that are completely silent in terms of what JavaScript can see, even though an error is logged to the console on the exact line of req.send(), which is behaviour I've seen here: https://github.com/Dash-Industry-Forum/dash.js/issues/1209
If the request is indeed throwing a 404 that Dash.js' error handling has handled, retried, and then gave up, then you can bind to its error event:
var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);
player.on('error', function(e) {
if (e.error === 'download') {
// dash.js gave up loading something
// e.event.id will tell you what it failed to load (mpd, segment...)
// and e.event.url will have the URL that failed
}
});

its been a bit since i've been in that code, but if memory serves, you should be able to determine it is a 404 by checking the status property of the error
var oReq = new XMLHttpRequest();
oReq.addEventListener("error", function (e) {
console.log("xml item: " + e.status);
}, true);

does this error affect my code.?

i m getting error in firebug console
uncaught exception: [Exception... "'Invalid save data.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: chrome://firebug/content/spy.js :: callPageHandler :: line 744" data: no]
When i put this code
value = key+'^_^'+value;
But when i modify this code and put
value = key
the error removes.
so does this error affect my code?

I have an inkling that this might be a good place for exceptions. Exceptions allow you catch errors, which in Javascript is very handy indeed because it also allows you to execute altetrnative code if your browser doesn't support what you are trying to do.
try {
somethingThatOnlyWorksInChrome();
}
catch (ex) {
worksInEverythingElse();
}

Check whether url returns 404

I'm trying to check whether an URL returns 404, 403 etc when including a Javascript file. It works ok, but I still get an error in "Chrome developer tools".
This is my code:
(function() {
try
{
var ml = document.createElement('script');
ml.type = 'text/javascript';
ml.async = true;
ml.id = 'monoloop_invoke';
ml.onerror = function(){alert('File does not exist');};
ml.src = 'http://somedomain.com/somefile.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ml, s);
}
catch(err)
{
alert('Error: '+err);
}
})
();
If the file does not exist it shows the error "File does not exist" from the ml.onerror function. This is all good. But the problem is that I still get an error line in my console like:
GET http://somedomain.com/somefile.js 403 (Forbidden)
and the try/catch does not catch this error.
Anyone knows how to solve this? Or is there another way of testing if a URL exists before including it? I cannot use AJAX as I need to use this in a cross-domain fashion. I could use jQuery if necessary.
EDIT: It does not show an error in IE, so i guess this maybe just relates to the way chrome reports issues. Does anyone see a more elegant solution for checking if a file exisists without genreting anything in the console.

jQuery.getScript( url, [ success(data, textStatus) ] )
Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.
url
A string containing the URL to which the request is sent.
success(data, textStatus)
A callback function that is executed if the request succeeds.
To catch the errors use the ajaxError event:
http://api.jquery.com/ajaxError/

How does this create an error?

I have a jquery/ajax website at tarh33ls.com
For some reason, in firefox, i get the following error:
uncaught exception: [Exception...
"Component returned failure code:
0x80004005 (NS_ERROR_FAILURE)
[nsIDOMLocation.href]" nsresult:
"0x80004005 (NS_ERROR_FAILURE)"
location: "JS frame ::
http://tarh33ls.com/ :: ::
line 26" data: no]
Line 0
but line 26 is:
if (location.href.indexOf("#")==-1) {location.href="http://tarh33ls.com/#";}
How would that generate an error?

I'm not sure why the error happens, but it seems this fixes it:
Move the if (location.href.indexOf("#") == -1 code inside the $(document).ready block (at the top of it), like this:
$(document).ready(function() {
if (location.href.indexOf("#") == -1) {
location.href="http://tarh33ls.com/#";
}
$.ajaxSetup({
...etc