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");
});

axios cannot access message of an error

I have a function which use axios get method and on the promised returned I have added error handling to handle a situation when service I am trying to connect to has been disabled.
axios.get('/someurl')
.then(() => {
// this does not matter
})
.catch((err) => {
logger.error(TAG, 'postCreateVm', err);
return reply(Boom.forbidden(err.message));
});
When I use curl I can see the message, status of response is 403:
# curl -X GET localhost:3000/someurl
{
"message": "abort"
}
The problem is that when I try to access 'message' property i get nothing, but I know it's there! (I have tried to use err.response.data as well with no success also)
According to the documentation I should be able to access it: axios handling errors
What is the proper way to access this message?

I've looked at his code, and it appears the correct response is in the error, but in axios, settle.js masks it with a generic response. You can see the server response by logging the error object in your catch block as stringified JSON:
console.log('caught:::', JSON.stringify(response, null, 2))
So in my case, I fixed it by accessing the returned error as:
error.response.data.message

My catch function received the response property instead of error object. So, to access message I had use:
err.data.message

Reading the error value in Javascript

I am handling the error in a if block in the method where I receive the response from the server. I put the server down in order to test the service unavailable scenario
_onResponse: function (err, res) {
if (err){
}
on doing alert("error " + err);
I receive
Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
at Request.crossDomainError (http://localhost:9000/index.js:33875:14)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9000/index.js:33945:20)
I want to read the value of Error:
I tried doing err.message but then I receive the entire body of the error.
I tried with err.name I just get the text 'Error'
How do I get the content Request has been terminated in a javascript variable?

From the response all I can say is this is not the error your server is sending. It is raised by the engine while doing XHR to a domain for which CORS is disabled. To catch this error, wrap the XHR code in index.js around line 33945 in a try{} catch(e){} block. Inside catch block you get hold of the error using the e variable.
Your block will handle error only when you get a response from the target server.

Angular $http error callback response is always undefined

I am having issues trying to gracefully handle $http errors. I am looping over a list of servers to make API calls to for status. The calls that complete successfully for perfectly. The ones that fail are not giving me access to the error information. It is always undefined. Here is the code snippet:
angular.forEach($scope.servers, function (server) {
// blank out results first
server.statusResults = {};
$http.jsonp(server.url + '/api/system/status?callback=JSON_CALLBACK', {headers: { 'APP-API-Key': server.apiKey }}).
success(function (data, status, headers, config) {
server.statusResults = data;
}).
error(function (data, status, headers, config) {
// data is always undefined here when there is an error
console.error('Error fetching feed:', data);
});
}
);
The console output shows the correct 401 error (which I didn't output) and my console error message (which I did output) with an undefined data object.
GET https://server_address/api/system/status?callback=angular.callbacks._1 401 (Unauthorized) angular.min.js:104
Error fetching feed: undefined
What I am trying to do is NOT have Angular display the 401 in the log, and instead I will display it in a graceful way. However since data is undefined I have no way of accessing the information.
I am new to AngularJS, but my example closely matches other examples I've found in the documentation.
I've also tried using $resource instead of the $http and got the exact same problem.
var statusResource = $resource(server.url + '/api/system/status', {alt: 'json', callback: 'JSON_CALLBACK'},
{ status: {method: 'JSONP'}, isArray: false, headers: { 'APP-API-Key': server.apiKey } });
// make status API call
statusResource.status({}, function (data) {
server.statusResults = data;
}, function (err) {
// data is always undefined here when there is an error
console.log(err);
});
I'm probably doing something obviously wrong, but I'm not sure what else to try.

Per the $http docs, body is
The response body transformed with the transform functions.
With the 401 (Unauthorized) error you are getting back, it is quite possible there is no body being returned, hence why it is undefined.
If you want to log the error code, log the status parameter instead. It contains the HTTP Status Code, which should be uniform, unlike response bodies.

jquery error function help

I'm not much of a javascript guy but I would like to implement error dialogs in this project I'm working on. I want to send a http header that the error function will catch and display the correct message. I've already tested the error function with an alert box and when I send a header 400, the error function is triggered.
Is it possible in JQuery or javascript to show different messages / dialogs based on the header code like 400 or 401? Based on that code then show the user the proper error message? I have about 4 or 5 messages that I need to show per error function
error:function(){
// call my dialog here
}

The statusCode option is available in jQuery 1.5+ for jQuery.ajax:
A map of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:
$.ajax({
statusCode: {
404: function() {
alert('page not found');
}
}
});
If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error, they take the same parameters as the error callback.