14

We have an established logging system for our server-side services. Specifically, our Django project makes heavy use of the Python logging module, so call calls to logger.info(), logger.warn() and logger.error() get picked up by our centralized logging system.

I would like an equivalent on our frontend, and I've got a few ideas:

  1. There would be some sort of custom logging object exposed via JavaScript that would send messages to backend via an XmlHttpRequest.

  2. I'd like to have equivalent logging levels on the client-side: debug, info, warning and error.

  3. When we're developing locally (debug mode), I'd like those logging messages to be logged to the browser/Firebug console via console.log().

  4. In production, debug messages should be dropped completely.

  5. I recall seeing a way to capture all uncaught JavaScript exceptions, so these should be logged at the error level.

  6. We're already using Google Analytics event tracking, and it'd be nice for whatever system we create to tie into that somehow.

Is this a good idea? How would you do this? Are there existing solutions?

(FWIW, we're using jQuery on the frontend.)

Update: Simplified question here: https://stackoverflow.com/questions/1423267/are-there-any-logging-frameworks-for-javascript

Community
  • 1
  • 1
a paid nerd
  • 30,702
  • 30
  • 134
  • 179
  • I can't decide on a good title for this question. Feel free to improve. – a paid nerd Feb 17 '11 at 20:09
  • 4
    If client can "populate" the server-side logs, does that mean anyone on the internet (Assuming it's a webapp) can flood the server-side log by spamming AJAX? You may want to add some security restrictions on who can log "stuff" to our system log... – DashK Feb 17 '11 at 20:18
  • @DashK – Yeah, but it's not worth it for us. We also log all broken links, so anyone can flood our logs by hammering non-existent paths on our site. But we're nice people and not really a DoS target at the moment :) – a paid nerd Feb 17 '11 at 20:25
  • I did sth similar in a XMPP-app issue reporting proj. We discovered that the logs can really clog up the logs if the app has been running for a long time. (We don't do onthefly reporting. We only send the data over if the client wants to report an issue - Sth to think about?) If I were to do it again, I'll use some constants to replace the entire log message. (For example, "User entered a chat room. Room name is: {0}" will be logged as "#1 {0}" in the log. This greatly reduces the size of the data travelling between the client and the server. We use log4javascript. – DashK Feb 17 '11 at 21:24
  • Feel free to try [Usersnap](http://usersnap.com/features/console-recorder). Read more also [this article](https://hacks.mozilla.org/2014/08/javascript-error-and-xhr-log-recording-with-every-bug-report/) from Mozilla Hacks – Bogo Sep 01 '14 at 11:47
  • `I recall seeing a way to capture all uncaught JavaScript exceptions, so these should be logged at the error level.` - this is possible with `window.onerror` which is not supported by every browser at least not by the older ones. e.g. opera supports it from 2011 december. – inf3rno Mar 09 '15 at 00:35

3 Answers3

18

First, I wrote and maintain log4javascript, so I'm declaring my interest up front. I also use it every day in my work, so I have some experience of it as a user. Here's how I would deal with your questions, specifically relating to log4javascript:

  1. Use log4javascript's AjaxAppender for server logging;

  2. debug, info, warning and error are all supported, as well as trace and fatal;

  3. Use a BrowserConsoleAppender to log to FireBug or the native browser console;

  4. If you don't want to remove all debug logging calls from you production code, you can either adjust your logger's threshold (using log.setLevel(log4javascript.Level.ERROR), for example, which will suppress all log calls with priority less than ERROR). If you want to suppress all logging calls, you can drop in a stub version of log4javascript in your production code.

  5. You'll need to write a bit of code to do this using window.onerror. Something like window.onerror = function(msg, file, line) { log.error("Error in " + file + " on line " + line + ": " + msg); }

  6. I'm not sure how you want to tie in with Google Analytics. log4javascript has no particular support for it.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • actually msg, file and line is usually not enough to debug based only on logs. what you really need to send is the stack. currently it is the fifth param, but not supported by every browser, so you need to create a new Error, override the message, file, etc... and send the stack of that if the browser supports stack – inf3rno Mar 09 '15 at 01:35
  • note: it seems like the new Error won't contain the stack: https://github.com/stacktracejs/stacktrace.js/issues/26 so I am afraid there is no workaround in old browsers, but not tested yet. – inf3rno Mar 09 '15 at 01:38
2

The idea sounds good here. Just be aware of what exactly it is you are looking to log client-side and have at it.

I would recommend using log4javascript for logging. The log4 api is pretty straight foward.

Terrance
  • 11,764
  • 4
  • 54
  • 80
2

Here is another question from here on SO about this very issue.

Some recommendations are: log4js, log4javascript, and Blackbird.

FWIW, log4js was the accepted answer there. I don't have experience with any of these platforms, so I can't really recommend one over the other.

Community
  • 1
  • 1
wageoghe
  • 27,390
  • 13
  • 88
  • 116
  • Useful, but what about questions 5 and 6? – a paid nerd Feb 17 '11 at 21:23
  • @a paid nerd - I don't actually work with Java or JavaScript, so I am not really familiar with these issues. I just mentioned those other options because I had come across them recently when I was asked to look into a way of integrating JavaScript logging with our centralized logging solution (that we are currently working on). I still have not actually gotten around to doing anything with JavaScript. – wageoghe Feb 17 '11 at 22:53