jQuery.getJSON().error() isn't being executed on 404 error - javascript

This is a brief outline of my code:
$.getJSON(json_url, function(data) {
// application logic
}).error(function() {
console.log("error");
});
The problem is that when the server returns a 404 error, it does not appear to be handled as there is no console.log() saying error, but there is a GET request failure with a code of 404 (Not Found) showing up in the console.
I am using jQuery 1.9.0.
Is there some simple error I am making?

Due to the nature of JSONP requests, the error callback is not called for those.
From the docs:
When data is retrieved from remote servers (which is only possible using the script or jsonp data types), the error callbacks and global events will never be fired.

Related

Stop jQuery from console logging on failed XHR GET request

I am trying to load a page when it is done with certain processes. When the process is still running, it returns a 503 error code, when the page is loaded, it returns a 200 code.
I am doing this via the $.get function. However, when jQuery get's a 503 error code (and probably also with other error codes), it logs this in the console:
XHR failed loading: GET "URL".
Example:
How do I remove this console.log()?
The logging entry in chrome's console is a behaviour of chrome when any HTTP request is handled, not a problem with jQuery or ajax(XMLHttpRequest), even an or tag could cause this issue.
So you cannot stop the chrome browser from logging 503 errors in console. Instead you should correct the server side implementation. The server should return 200 even if the process is running, with a response data indicating that the process is running. (You may run your process in background thread on the server asynchronously and return the response on the main thread.)

How do I get the actual error from an AngularJS $http request?

I'm fairly new to AngularJS. I'm trying to get information on the actual error that occurred during a GET request. I've got the request set up like this:
$http.get(myUrl).then(mySuccessFunction).catch(function(reason) {
//
});
The reason object that is passed to the catch has 5 properties:
config - contains information on the request I sent (the URL, method, etc.)
headers
data - always seems to be null, regardless of the error that occurred
status - always seems to be 0, regardless of the error that occurred
statusText - always seems to be "", regardless of the error that occurred
I've also looked at using the $http.get(url).success().error() technique, but the error() function is passed generally the same (seemingly useless) information, only in parameter form, rather than as properties of a single object.
From the browser console, I can see that the request is triggering a status 500, or ERR_CONNECTION_REFUSED, etc. However, I'm not seeing how to get that information from the reason object...
How do I get information on the actual error that occurred during the request?
UPDATE:
I found that the issue, for me, was actually a CORS issue. See my answer below.
I found that, in my case, the problem was a CORS issue, which was hiding the real issue.
Before posting the question, I was testing 2 error cases:
Server Unavailable (ERR_CONNECTION_REFUSED)
Server encountered an internal error (status 500)
Both error conditions were giving me exactly the same "error" data (null/0/"" for data/status/statusText) via the angular catch/error function. For (1) null/0/"" is the correct response. For (2), when my dev server was (intentionally) triggering status 500 response, it wasn't handling CORS correctly for that error response.
Apparently, for CORS issues, null/0/"" is also the correct "error" data for an Angular-generated GET.
After posting this question, I tried other error conditions (404, etc.), and started getting more useful data passed to the catch/error function.
$http.get('/someUrl').success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
});
the status variable should provide the error code and headers should provide better details on the request
here's the work around to get StatusText (as pointed out that some mobile browsers strip out DATA from successfull responses: https://stackoverflow.com/a/28470163/1586498
I have also discovered that .success and .error on $http in Angular does not pass the StatusText, you have to use .then(response)

Is there a way to get debug information from an ajax preflight request?

I have some javascript that is making an ajax request using ajax. The preflight OPTIONS call for this request fails. I'd like to display some debug information to the user about the call and it's status code - how can I get this information from the jqXhr object in the error callback?
$.ajax
url: url
headers: headers
...
error: (jqXhr, status) =>
# how can I get info about OPTIONS call here?
At the moment, this simply isn't possible.
CORS is severely lacking in error-information when a pre-flight request fails for whatever reason, both in the spec, and in browser implementations. Relevant excerpts from HTML5 Rocks:
If there is an error in the CORS request, the browser will fire the client's onerror event handler. It will also print the following error to the console log:
XMLHttpRequest cannot load http://api.alice.com. Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
The browser doesn't give you a lot of details on why the error occurred, it only tells you that something went wrong.
... it goes on to say (under known issues):
No error information provided to onerror handler - When the onerror handler is fired, the status code is 0, and there is no statusText. This may be by design, but it can be confusing when trying to debug why CORS requests are failing.
Indeed, all you'll find is that the jqXHR statusText property will be blank, the status code will be 0, and getAllResponseHeaders() will return an empty string.
Just to be clear: this is a problem getting data out of the underlying XMLHttpRequest object. It's not that jQuery is masking information or otherwise not making it available; it simply isn't possible (at the moment) to get error-data out of the XmlHttpRequest object in this circumstance.

How to suppress javascript errors when xmlhttp.status != 200

In my Google Chrome console I keep receiving errors when the xmlhttp status does not result in 200. For example, in certain cases I intentionally set the header of my PHP files to 500 so in javascript I can display the error and avoid anything that requires that PHP file. Since I have my own error handler for this, is there anyway to suppress the default error?
Error Example:
POST http://localhost/mama/cgi-bin/pages/Module-Install.php 500 (Internal server error)
It seems that there is no way to supress these warnings in google chrome when handling the error yourself. For any of those who are looking for an alternate solution, embed the error code in a json object, and parse the json object client side for any errors.
This error was sended by Server side, not browser, not js. You can not just "hide" it from console. You can handle it in onerror event:
request.onerror = function (e) {
// do something to fix the results of server error...
};
In other words, this is a server error and it CAN break your code execution, but if you make couple steps to resume the job after a possible exception from xmlHttp class, the code will be fine.
UPD:
Just if you are pure perfectionist, and you cares about flawless environment:
In a server side you must implement the server answer without a firing any statuses except 200. It's not a super hard job.
For ASP: Suppressing HTTP 500 response codes;
For PHP: http://php.net/manual/en/function.http-response-code.php .

In what way Backbone.js error function is triggered

In Backbone.js in what terms the error state is triggered. I'm facing a challange and error is triggered even it receives 200. I've read it an article that success can be forced by sending a 204 status code from php.
What are the circumstances that causes error to trigger?
If your response is returning anything other than JSON, even with a 200 status, you'll get an error. For instance, in the app I'm building, I'm calling into an old REST endpoint that returns XML. The response is valid, but error gets invoked every time. If you can get your response to return as JSON, the error condition should go away.

Categories

Resources