We Keep Coding

How to jQuery Ajax Error Catch and Report

In what way to get the function caller of ajaxError event produced for js error reporting?
I have built a js error repo app with jQuery and I can handle normal js errors occurred globally, but I have problems on ajax errors.
I can get the line number of error when it is a normal error!
I tried to catch them with one of global ajax handlers "ajax error", but I am not sure how to get line number of that ajax caller or caller name.
please look at the bottom part!
const error_log_url = '/log';
const errorPost = function (data) {
$.ajax({
url: error_log_url,
type: 'post',
data: data,
success: function (res) {
console.log(res)
}, error: function (res) {
console.log(res)
}
})
}
window.addEventListener('error', function (e) {
let params = {
message: e.message || "Exception Handler",
url: e.filename || "",
lineno: e.lineno || 0,
colno: e.colno || 0
}
errorPost(params)
}, true);
// wrap function for new error stack with adding event to certain element
window.wrap = function (func) {
// make sure you only wrap the function once
if (!func._wrapped) {
func._wrapped = function () {
try {
func.apply(this, arguments);
} catch (exception) {
throw exception
}
}
}
return func._wrapped;
}
// override add & remove event listeners with above wrap function
let addEvenListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEvenListener.call(this, event, wrap(callback), bubble);
}
let removeEventLister = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventLister.call(this, event, callback._wrapped || callback, bubble);
}
$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {
// please look at here, how can I get the caller name that produced this error!
console.log(arguments.callee.caller)
if (settings.url != error_log_url)
errorPost({
message: event.type,
filename: event.currentTarget.location.origin + settings.url
})
});
console.log(arguments.callee.caller) this prints out null.
you see, I can get much more info from ErrorEvent, but I can not get detailed info like line number from ajaxError event!

Unfortunately, it looks like there is no global event for network errors.
There is a hacky way to figure it out, though - if you attach a function to the ajaxSend method, which runs when a request is sent, you can throw an error immediately, then catch it and examine the stack to figure out the caller. Then, put the appropriate stack line into a WeakMap which can be examined later, indexed by the jqXHR object. Afterwards, if the request fails, in the ajaxError handler, use its jqXHR object to look up the stack in the WeakMap. For example:
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
console.log(stacksByXHR.get(jqxhr));
});
const stacksByXHR = new WeakMap();
$(document).ajaxSend((event, jqXHR) => {
try {
throw new Error();
} catch({ stack }) {
let callCountNonJquery = 0;
const foundCall = stack
.split('\n')
.slice(1) // Remove the top "Error" line, contains no information
.find(line => {
if (line.includes('jquery')) {
return false;
}
callCountNonJquery++;
// First call would be the thrown error above
// Second call is the $.ajax initiator
if (callCountNonJquery === 2) {
return true;
}
});
stacksByXHR.set(jqXHR, foundCall);
}
});
$.ajax('/DoesNotExist');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
On my machine, this shows me
at https://stacksnippets.net/js:40:3
which corresponds to the $.ajax('/DoesNotExist'); line:
If the $.ajax is inside a function, the function name will be visible in the stack too, for example:
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
console.log(stacksByXHR.get(jqxhr));
});
const stacksByXHR = new WeakMap();
$(document).ajaxSend((event, jqXHR) => {
try {
throw new Error();
} catch({ stack }) {
let callCountNonJquery = 0;
const foundCall = stack
.split('\n')
.slice(1) // Remove the top "Error" line, contains no information
.find(line => {
if (line.includes('jquery')) {
return false;
}
callCountNonJquery++;
// First call would be the thrown error above
// Second call is the $.ajax initiator
if (callCountNonJquery === 2) {
return true;
}
});
stacksByXHR.set(jqXHR, foundCall);
}
});
function myFunctionWhichRunsAjax() {
$.ajax('/DoesNotExist');
}
myFunctionWhichRunsAjax();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How do I capture an aborted call or is setting the timeout to 0 correct?

I have a JavaScript client that works in Chrome and Firefox, but fails in IE. Looking at the network trace in the IE debugger it shows that multiple of the AJAX calls have been aborted.
I've been able to get around it by setting the timeout to 0. I'd like to know if this is the correct way to handle my requests being aborted? Basically what could go wrong?
My initial thought was that I should capture and resend on error, and if multiple resubmits do not result in a completed request, finally alert the user. I'd still like to know how to do this even if the setTimeout is the proper way to address my immediate issue.
Also the application will process an excel workbook of addresses, call a web service to add some data to them and then allow the user to download the enhanced file.
This is what I have so far, first in the app.js
var requestWithFeedback = function (args) {
$(".loader").removeClass('hidden');
var oldConfig = args.config || function () { };
args.config = function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + localStorage.token);
oldConfig(xhr);
extract: extract;
};
var deferred = m.deferred();
setTimeout(function () { // <== This solved in IE, but is this the way to handle this?
m.request(args).then(deferred.resolve, function(err){
if (err === "Invalid token!"){
m.route('/');
}
})}, 0);
$(".loader").addClass('hidden');
return deferred.promise;
}
From the model.js
app.MarkedAddresses.ProcessAddressBatch = function () {
var requestData = {
Addresses: app.MarkedAddresses.vm.addresses
}
return requestWithFeedback({
method: "POST"
, url: "API/server.ashx"
, data: requestData
, deserialize: function (value) { return value; }
})
.then(function (value) {
var responseJSON = $.parseJSON(value);
$.merge(app.MarkedAddresses.vm.results, responseJSON)
app.MarkedAddresses.vm.currentRecord(app.MarkedAddresses.vm.results.length);
app.MarkedAddresses.vm.progress(Math.max(app.MarkedAddresses.vm.progress(), ~~(app.MarkedAddresses.vm.currentRecord() / app.MarkedAddresses.vm.totalRecords() * 100)));
m.redraw(); //Force redraw for progress bar
return value;
},
function (error) { console.log(error) } // <== I thought error would show up here, but I never hit a breakpoint here.
);
}
Added loops
function process_wb(wb) {
app.MarkedAddresses.vm.results.length = 0;
$('.descending').removeClass("descending");
$('.ascending').removeClass("ascending");
app.MarkedAddresses.vm.progress(.1);
m.redraw();
var header = mapHeader(wb);
var addressJSON = to_json(wb, header);
app.MarkedAddresses.vm.totalRecords(addressJSON.length);
for (var i = 0; (i < addressJSON.length + 1) ; i += 1000) {
app.MarkedAddresses.vm.addresses = addressJSON.slice(i, Math.min(((i) + 1000), addressJSON.length));
app.MarkedAddresses.vm.response(new app.MarkedAddresses.vm.processAddressBatch());
}
}
Why isn't the error triggered in the section of the code?
It seems like I should add a deferred section here, but anything I've tried has been a syntax error.

Catch exception in JS

I've got next code that fills page with data I get from server every 10 sec:
var refreshFunction = function() {
//get data from server
$.get("<c:out value="${baseURL}"/>/js/getCounts", function(data) {
vardata = data;
});
if (vardata != null) {
//divide
countArray = vardata.split("/");
//if server returns "-" or new array with new structure
if ((vardata == "-" || length != countArray.length)
&& !(document.getElementById('requestForm') instanceof Object)) {
//reload
location.reload();
clearInterval(refreshId);
} else {
//fill page with data
for (var j = 0; j <= countArray.length; j++) {
console.log(countArray[j]);
$('#badge_' + (j + 1)).text(countArray[j]);
}
}
}
};
$(document).ready(function() {
refreshId = setInterval(refreshFunction, 10000);
});
The code works, but if I open application and then turn off my server, script will never stop. I'm having
Failed to load resource: net::ERR_CONNECTION_REFUSED
How can I catch it and stop the script after that? I was trying to wrap code blocks with try and catch(e), but doesn't help.

Since the AJAX request is executed asynchronously, wrapping your code in try ... catch will not catch the exception. The exception happens after your code has finished executing.
You should handle the .fail case on the object returned by $.get to avoid seeing that error reported on the console:
var jqxhr = $.get("<c:out value="${baseURL}"/>/js/getCounts", function() {
vardata = data;
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
As a side note, you should put the complete body of your function inside the call back in $.get. Otherwise, you'll always be running your code with the old dataset, not the new one.
This problem doesn't show up in your code in the first execution because vardata is probably undefined and in Javascript land, undefined != null is false.

Why can XMLHttpRequest instance send only one request?

I'm trying to send a several requests from a single instance of XMLHttpRequest object, like this:
GC3D.Application.prototype.setMapTiles = function() {
var ajaxInstance = new GC3D.Ajax();
for ( var i = 0, j = 0; i < 10; i++ ) {
var urlFinal = this.prepareRequestForTileDownload( i, j );
ajaxInstance.sendRequest({
id: { i: i, j: j },
HttpMethod: 'GET',
UrlEndpoint: urlFinal
}).then( function( item ) {
//...
});
}
};
It doesn't work and sends only the one request. BUT! If to change source code to the next:
for ( var i = 0, j = 0; i < 10; i++ ) {
var ajaxInstance = new GC3D.Ajax();
...
It begins to send so many requests as the total number of for loop iterations and all is working perfectly. I prefer to get known some features. As in C# development in my past I never create a new instance of some TCP socket in loop, if I want to make it asynchronously - I create a single instance with delegates to async functions and if there is a similar situation in C# project like in JavaScript code here in the question's content, because it's doesn't produce new objects in for loop, it takes less memory and as for architecture it's represented as more clean and good solution.
GC3D.Ajax is defined as the next prototype:
GC3D.Ajax = function() {
this.httpRequest = undefined;
this.listExceptions = undefined;
this.init();
};
GC3D.Ajax.prototype.init = function() {
this.listExceptions = [];
if ( window.XMLHttpRequest ) this.httpRequest = new XMLHttpRequest();
else if ( window.ActiveXObject ) {
try {
this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
catch ( exception ) {
this.listExceptions.push( exception );
try {
this.httpRequest = new ActiveXObject( 'Msxml2.XMLHTTP' );
}
catch ( exception ) {
this.listExceptions.push( exception );
try {
this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
catch ( exception ) {
this.listExceptions.push( exception );
}
}
}
}
if ( !this.httpRequest ) {
console.error( 'Can\'t create a HTTP Request instance for AJAX! Possible problems:' );
console.error( this.listExceptions );
}
};
GC3D.Ajax.prototype.sendRequest = function( properties ) {
var defer = new GC3D.Defer();
if ( this.httpRequest !== undefined ) {
this.httpRequest.onreadystatechange = function() {
if ( this.httpRequest.readyState === 4 && this.httpRequest.status === 200 ) {
var objectOutput = {};
objectOutput.id = properties.id;
objectOutput.content = this.httpRequest.responseText;
defer.resolve( objectOutput );
}
else {
var message = 'There was a problem with the request in GC3D.Ajax.';
defer.reject( message );
}
}.bind( this );
this.httpRequest.open( properties.HttpMethod, properties.UrlEndpoint );
this.httpRequest.send();
}
else console.error( 'HTTP Request instance isn\'t defined!' );
return defer.promise;
};
GC3D.Ajax.prototype.get = function() {
return this.httpRequest;
};

The XMLHttpRequest API is very well defined and leaves no doubt about this behaviour.
The definition of the open() method, step 13, states that the method should:
Terminate the request.
http://www.w3.org/TR/XMLHttpRequest/#the-open()-method
Opening a debugger in the browser and having a look at the network traffic reveals that, in fact, several requests are being send asynchronously, with each but the last request being canceled by the next one.
In this case, the open() method is being invoked repeatedly on the same instance of an XMLHttpRequest inside the sendRequest method of ajaxInstance.

Javascript & Ajax - better way to populate objects?

I'm an old 'C' programmer and with Javascript always struggle populating my data following ajax calls; i.e. I always resort to using global references. I'd rather be able to pass in the objects I need to update. Here's one example of what I do now - 'app' is the global (I'd have used a pointer in C :))
treeMapp.login = function ( dialog_div, form_div, server_call ) {
// validate the fields
if ( 0 ) {
}
else {
// send to server & parse JSON response (single line)
var jqxhr =
$.getJSON( server_call,
$( "#" + form_div ).serialize() )
.done( function( data, status ) {
if( status == 'success' ) {
// hack!?
app.user.username = data.username;
app.user.organisation = data.organisation;
app.user.loggedIn = true;
//close the dialog
$( '#' + dialog_div ).dialog('close');
}
else {
// login failed
alert( "login failed!" );
}
})
.fail( function() {
alert( "login: server error" );
}); // end var jqxhr =
} // end else (field validation ok)
}; // end treeMapp.login()
What's the best way of updating passed in parameters?
thanks
mini

You can pass app as an argument to your treeMapp.login function, then within the scope of it it would be local.
treeMapp.login = function ( dialog_div, form_div, server_call, app )

You could assign the data object returned by your jQuery result to app.user, thus avoiding the need for element by element assignment.
i.e. app.user = data
However, normally you ensure the global object can self initialise through a method, or you pass a reference to the global object to the method so it can initialise. Directly using assignment to global variables is (with a few exceptions) poor programming in Javascript as in any other language
UPDATE: the following shows an amalgamation of the answers...
treeMapp.login = function ( dialog_div, form_div, server_call, theapp ) {
var app = theapp; // may be needed for scope issue..
// validate the fields
if ( 0 ) {
}
else {
// send to server & parse JSON response (single line)
var jqxhr =
$.getJSON( server_call,
$( "#" + form_div ).serialize() )
.done( function( data, status ) {
if( status == 'success' ) {
// not a hack
$.extend(this.app.user, data, { loggedIn: true })
//close the dialog
$( '#' + dialog_div ).dialog('close');
}
else {
// login failed
alert( "login failed!" );
}
})
.fail( function() {
alert( "login: server error" );
}); // end var jqxhr =
} // end else (field validation ok)
}; // end treeMapp.login()