Today's Question: 

Hide

Different programming are similar in helping people build staff work as people want them to. But they all have their own features which differentiate them from other programming languages. The language type may be different, for example Java is OOP, some may have different syntax. A programming motto usually can best describe the characteristic of the programming language. For example, "Write once Run everywhere" for Java.Do you know any other programming language motto?
Do you know the mottos of programmig languages?
Description My Answer

Technical Article => Web =>  JavaScript

An easy way to log client side information to server

Source : sonic0002    Date : 2012-12-30 09:16:50  

JavaScript debug is a very troublesome thing in web application development. Because many web browsers will not notify you if there is any error in the JavaScript codes you write. They just silently fail and block the following codes execution. In order to debug JavaScript codes, we need a good log mechanism which will help us log the error information,, we often need to log errors in JavaScript codes to server for debug purpose in a production web application,

What should we do?

The first thought comes into our mind may be using AJAX, since it involves client server communication and we also should make it asynchronously because we don't want to interrupt users while we are logging something to server. This is feasible, but it needs many codes to be written to create the XMLHttpRequest object and implements some function related to it, it is also error prone since the communication may be interrupted as well.

Is there any simple and reliable way? Yes, we can create an Image object in our JavaScript. The details steps are:

1. We need to create a backend server script to get the passed query strings and store them on the server. We assume it is logger.php here;

2. Create a log() function in JavaScript:

function log(type,message){

var img=new Image();

img.src="logger.php?type="+type+"&message="+message;

}

3. Call the log() function like :

log("Error","Syntax error");

That's all. You can simply log information to server now.

In the log() function, we created an Image object, it is supported in all modern browsers, later when we assign the src property, the image will be loaded immediately. this will load the logger.php script with the passed query string. It has similar effect as the AJAX method.

According to "Professional JavaScript for Web Developers", the benefits for using this are:

  • The Image object is available in all browsers, even those that don’t support the XMLHttpRequest object.
  • Cross-domain restrictions don’t apply. Often there is one server responsible for handling error logging from multiple servers, and XMLHttpRequest would not work in that situation.
  • There’s less of a chance that an error will occur in the process of logging the error. Most Ajax communication is handled through functionality wrappers provided by JavaScript libraries. If that library’s code fails, and you’re trying to use it to log the error, the message may never get logged.
Save as PDF Mark as read Mark as important
By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags : JavaScript log, Ajax,Image,Debug   Read(1422) Comment(0) Version(0)

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious 

 Previous : How does PHP session work?
 Next : The 10 most expensive domains on the Internet

  ::Related Articles

  ::Comment Zone  (Total 0 comment)

No comment for this article.

  ::Comment

Nickname  
Email 
Comment

:: Other versions

No other versions available yet.

:: Recent articles

:: Most read

:: Contribute

Want to share with the world your understanding about technology? Want to record the process you solve a technical problem? Want to make the world benefit from your understanding and solution? Write them down. You make the world better, the world makes us better.

Write article

:: Find us

Back to top