We Keep Coding

Send javascript errors to servers

I have a script that capture the errors and send them to my server. But I'm worried that if I have a lot of users, and every user gets a couple errors, it may collapse my server.
This is my code:
window.onerror = function(msg, url, num) {
try {
var clientSideErrorInfo = {
message: msg,
url: url,
num: num
};
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://domain/api/v1/browser/', true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(clientSideErrorInfo));
console.log(clientSideErrorInfo)
} catch (e) {
console.log(e);
// Don't allow for infinitely recursively unhandled errors
return true;
}
};
Is there a way to send a group of logs instead of sending them one by one?
Thanks

Instead of sending the error at the moment you get it, you could collect all errors into a global variable and you send them using an interval. This way you can limit how many errors you want to send at a same time and you could increase your interval as well.
var errorSend = {};
errorSend.listErrors = [];
errorSend.maxErrors = 50;
errorSend.interval = 100;
window.onerror = function(msg, url, num) {
var clientSideErrorInfo = {
message: msg,
url: url,
num: num
};
listErrors.push(clientSideErrorInfo);
console.log(clientSideErrorInfo)
};
function sendErrors() {
if (errorSend.listErrors>errorSend.maxErrors) {
console.log("Too many errors to send");
return;
}
var errors = {list: errorSend.listErrors};
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://domain/api/v1/browser/', true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(errors));
}
setInterval(sendErrors,errorSend.interval);

Something very simple,umm:
var body =[];
setInterval(function(){
//Using a copy of the error queue
let batch = body.slice();
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://domain/api/v1/browser/', true);
xhr.setRequestHeader("Content-Type", "application/json");
let myJson = JSON.stringify(body);
xhr.send({
data:{
param: myJson
}
});
//Updating the main queue to contain only unsent error messages
body=body.slice(batch.length,body.length);
},time_you_specify);
window.onerror = function(msg, url, num) {
try {
var clientSideErrorInfo = {
message: msg,
url: url,
num: num
};
body.push(clientSideErrorInfo);
console.log(clientSideErrorInfo)
} catch (e) {
console.log(e);
// Don't allow for infinitely recursively unhandled errors
return true;
}
};

Is not problem for this job but if you have a lot of errors in you web app can be problem. First you will need to setup your javascript code to the perfect state. In that case you idea is good ( catch every possible error ) . Just put it in some table on server .
Heres from mozilla dev site about param :
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
return false;
};
Very important use (userAgent) detectBrowser data , you must know which device is used also which browser is used -just add data intro your function. In 90% your client error will happend only on specific platforms . For example on android chrome ver < 23 ...
Please don't use interval for this kind of tasks , just on error catch event send error log to the server just like you already did!

It is better to use message queueing infrastructure, if you are expecting millions of messages
some sample

Why isn't JavaScript throwing exceptions as the result of an asynchronous HTTP (AJAX) request?

I've written the following JavaScript function which is very simple, it takes an ID and which then is sent to a PHP page, which echoes out some JSON. It passes the ID into the PHP page via GET.
For example, if I was to make the following GET request: /processing/getAccountInfo.php?id=5, it would return this (got from a database): {"username":"carefulnow","profileImg":null}. This is correct, so I know my PHP is working fine.
My JavaScript code that originally called the AJAX now needs to process it, echo it out and check it for errors. If the PHP function encounters any errors, the returned JSON will contain an "errorMsg" which contains the name of the PHP exception that it encountered including a specific message (Exception::getMessage()). An example error result would be {"errorMsg":"PDOException: some error..."}.
function getAccountInfo(id) {
var loading = document.getElementById("loading");
var inner = document.getElementById("accInfInner");
var name = document.getElementById("accInfName");
var img = document.getElementById("accInfImg");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
try {
var response = JSON.parse(this.responseText);
if (response.errorMsg === undefined) {
if (response.username === undefined || response.profileImg === undefined) {
throw new Error("Could not get the username and profile image. Try logging in then back out.");
}
name.innerHTML = response.username;
// The profile image is not required.
if (response.profileImg !== null) {
img.src = response.profileImg;
} else {
img.src = "/assets/img/defaultuser.jpg";
}
loading.style.display = "none";
inner.style.display = "block";
} else {
throw new Error(response.errorMsg);
}
} catch (exception) {
inner.innerHTML = "Error. Hover for details.";
inner.title = exception.message;
}
}
};
xmlhttp.open("GET", "/processing/getAccountInfo.php?id=" + id, true);
xmlhttp.send();
}
The problem, however, is that the throw statements aren't working. If an error is thrown from the PHP, nothing happens (no errors in the console)! My IDE (PHPStorm 2017.1) gives the following error: "'throw' of exception caught locally", which after a lot of searching, I cannot find anyone else having this same issue. Is it something to do with the GET request been asynchronous, or is it something a lot simpler I'm not seeing?

JSON parse error: Cannot read property

I have created some little jt code, but it gives me error
function Mind(){
var request = "request";
var reply = "reply";
var words = '';
this.Reply = function(){
if(request == words.nouns[0].noun){
reply = words.nouns[0].noun;
}
else
reply = this.words.nouns[0].noun;
}
this.SetRequest = function(req){
request = req;
}
this.GetReply = function(){
return reply;
}
this.Parse = function(u){
var xmlhttp = new XMLHttpRequest();
var url = u;
var result;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
words = JSON.parse(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
return result;
}
this.Construct = function(){
words = this.Parse('mind/words.json');
}}
var mind = new Mind();
mind.Parse('mind/words.json');
and here is my json file
{
"nouns": [
{"noun": "child"},
{"noun": "father"}
]
}
In command live all goes well, but when I run this code, appears error
Uncaught TypeError: Cannot read property 'nouns' of undefined

Mutliple errors. The most fundamental one is that your code ignores that XMLHttpRequest is async, and wont return a value in the same way as "regular" functions. Read about it here: How to make a function wait until a callback has been called using node.js. The TL;DR is that you have to pass in a "callback-function" to your parse-method and "return" your value using that function, instead of using a return-statement. Google for "javascript callbacks" and read a few tutorials if this concept is new to you!
You also have some minor errors, like returning result from Parse, but never actually setting result to anything. Also words is being assigned in multiple places in a way that doesn't really make sense. But both of these things will go away when you solve the sync/async issues.
EDIT:
Essentially the fix looks like this:
this.Parse = function(u, callback){ // this "callback" is new
var xmlhttp = new XMLHttpRequest();
var url = u;
var result;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
words = JSON.parse(xmlhttp.responseText);
callback(null, words); // we're "returning" the words here
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
// no return statement here!
}
this.Construct = function(){
this.Parse('mind/words.json', function(error, words) {
// here you can use your words!
});
}}

PubSub.js multiple subscriptions, or a different way to handle awaiting on multiple callbacks

I am trying to figure out the best way to handle this scenario. Basically I want the flow to work like this:
1.) Get configuration data from server (async)
2.) Run doStuff() after configuration data is received (async)
3.) Run postResults after doStuff() completes
Currently I seem to have this flow working using PubSub.js, however I am trying to figure out how I can provide the results from config data (#1) to postResults (#3). While I seem to have the flow working with PubSub, I'm not sure how to access the configuration (#1) callback data from postResults (#3)
Here is a code summary:
PubSub.subscribe('config', doStuff());
fetchConfigurations();
function fetchConfigurations () {
var req = new XMLHttpRequest();
var url = CONFIGURATION_SERVER_URL;
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var configObject = eval('(' + req.responseText + ')');
PubSub.publish('config', configObject);
} else {
console.log("Requesting config from server: " + url);
}
}
req.open("GET", url, true);
req.send(null);
}
function doStuff() {
PubSub.subscribe('results', postResults);
var results = {};
// do some async work...
results['test1'] = "some message";
results['test2'] = "another message";
PubSub.publish('doStuff', results);
}
function postResults (doStuffId, doStuffData) {
var req = new XMLHttpRequest();
var url = TEST_RESULTS_URL; // I want to get this from the configObject is get in fetchConfigurations
req.open("POST",url,true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send(doStuffData['test1'] + doStuffData['test2']);
}

Using promise seemed like the a better fit for this problem instead of pub/sub, here is the implementation I ended up using:
https://github.com/hemanshubhojak/PromiseJS

Parse Error Where Nothing Is Wrong

I'm making a mobile site using Dashcode to help me creating better UIs, but the problem is that I'm getting a strange Parse Error on my code, where nothing is wrong... This is the code:
function get_currency(from, to) {
var XMLHttp; // Create the Ajax handler
XMLHttp = new XMLHttpRequest();
var url = "http://download.finance.yahoo.com/d/quotes.csv?e=.csv&f=sl1d1t1&s=" + from + to + "=X";
XMLHttp.open("GET", url, true);
XMLHttp.onreadystatechange = function() {
if(XMLHttp.readyState == 4) {
/* Once the server has completed its tasks display the result */
var response = XMLHttp.responseText;
var parsed_reply = response.split(',');
document.getElementById('txtAmount').value = parsed_reply[1];
}
XMLHttp.send(null);
}
function btConvert_Click(event)
{
get_currency("BRL", "USD");
}
The error is occurring(According to the debugger) at the line 209(the last line of the code), which is the } a the end of this code that I gave. What's wrong?

You're missing a closing } for your onreadstatechange handler, causing the parser to puke at the end of the script. Given the indentation, it's the closing } for the if(XMLHttp.readyState...) check

You're missing a }
Based on your spacing, you haven't closed the { from
if(XMLHttp.readyState == 4) {