What is YLogger

YLogger is a java script control that allows you to view server side messages in browser window. The control utilizes yahoo user interface (YUI) library's Logger control to display the messages and uses DataSource widget to implement AJAX calls to server to pull messages. This control is a very helpful tool in debugging server side implementation of your web applications as long as you have developed your application to add logging and instrumentation messages at critical junctions of life cycle. The control will let you see those messages while you are running the application on client browser.

How does it work?

The implementation is very simple. The control runs a timer to pull messages from specified URL at specified intervals and then displays those messages using Logger control provided by YUI. What you need to provide is an end point URL where control can send asynchronous HTTP request to get response that contains the messages. The current version only accepts response in JSON format.

How to implement?

Follow the following steps and you will be good to go.

Server Side Implementation:

• Add a URL to your existing web application that will handle requests to send log messages back to client.

Client Side:

• Download the java script files for this control.
• Add include instructions at the top of the page
• Provide a div tag on the page to host the control.
• Write a small piece of java script code to create an instance of the control with correct parameters.

Example

Follwoing code snippet is the piece of java script I wrote to create instance of control for my application. And that was it to get it working.

<script language="javascript" type="text/javascript">
 var winista_yloggerControl = null;
 function loadPage_YLogger(){
  winista_yloggerControl = new WINISTA.YLogger("logger-container", 
	"MonitorREST.aspx", ["messages","Text","Type","Source","Time","Scope"]);
  winista_yloggerControl.setTitle("Winista ASP.Net Log Console");
}
YAHOO.util.Event.addListener(window, "load", loadPage_YLogger);
</script>						

<div id="logger-container"></div>
							

In the above code snippet:

• logger-container: is id of HTML DIV tag that will host the logger control
• MonitorREST.aspx: in the URL in web application that hosts RESTful API to handle requests.
• ["messages","Text","Type","Source","Time","Scope"] is JSON schema of message collection returned by above RESTful API request

Features | Download Sample and Scripts