In today's Web 2.0 world developers are creating very rich clients with plenty of JavaScript code and little to no logging. With the tools available today there is no reason not to log on the client side.
Logging is an important tool in any developers toolbox. If done right logging gives the developer detailed context for application failures. Logging should not be confused with testing or debugging although in certain instances it can help with the later.
The following is a quick example of how logging on the client side can easily be acheived using Google Gears. There is potential to expand this small demo into a more sophisticated logging mechanismn with reporting features and server-side transfer of logs if desired.
The basic code and idea behind client side logging is very simple. Let's look at a little sample logger that uses Google Gears:
Sample Client Side Logger using Google Gears
To get client side logging running on your site all you need to do is include the following JavaScript files in your head section as follows:
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="glogger.js"></script>
Then you are set to add client side logging in your scripts like this:
// Log to Google Gears client side database
log("INFO", "Hello World");
The client side database creation is done in the initialization function of the included glogger.js script. You can see here how it checks for existence of Google Gears and the database before it tries to create it.
if (!window.google || !google.gears) {
return;
}
try {
db = google.gears.factory.create('beta.database', '1.0');
} catch (ex) {
setError('Could not create database: ' + ex.message);
}
if (db) {
db.open('database-glogger');
db.execute('create table if not exists glogger' +
' (level varchar(50), msg varchar(1024), timestamp int)');
}
Inserting, selecting, and deleting from the log table is just as easy. There are examples of each of these in glogger.js.
The Code:
glogger.html - Web page that logs to client
glogger.js - Logging implementation
gears_init.js - Main Google Gears code
Helper Utilities:
sqlitebrowser.sourceforge.net - SQLiteDatabase Browser
dbquery.html - Web interface to SQLite query analyzer
Happy Client Side Logging!
Let me know if you make any extensions to this code...