Javascript Error Logging Infrastructure

If you are running a large scale dynamic site than you are familiar with logging on the server side. This immediately notifies you if there are any issues with your JSPs/PHP, broken controller code, data integrity, etc. Common practice is to log everything, accumulate logs, and generate automatic reports. Most errors will bubble up within minutes of a code push.

One problem with this is that no one javascript into the picture. Javascript errors are very evasive due to the wide variance of browsers on the web. QA process alone will likely catch backend errors more often than front end errors since the backend environment is static while the front end is not.

I propose something very simple and elegant. The requirements are few:

  • System must tie into the already used backend logging infrastructure
  • The processing and code length must have a small footprint as not to effect performance.
  • Captured information must be meaningful: need to know where it happens, why it happens, and how it happens

Here is sample code using Prototype JS:

			var newHandler = 
				function(msg,url,line) { 
					new Ajax.Request("/error", { parameters: { "msg": msg, "url": url, "line": line, "browser": navigator.userAgent } });
				}; 
			var oldHandler = window.onerror;
			
			window.onerror = function(msg,url,line) {
				if(oldHandler) { oldHandler(msg,url,line); } 
				newHandler(msg,url,line); 
			}; 

With some Spring Controller handling:

@Controller
@RequestMapping("/error")
public class JSLoggerController {
	static final Logger logger = Logger.getLogger(JSLoggerController.class.getName());
	@RequestMapping(method = RequestMethod.POST)
	public String onSubmit(@ModelAttribute("message") String msg, @ModelAttribute("url") String url, @ModelAttribute("browser") String browser, @ModelAttribute("line") Integer line) {
		logger.error(url+" | " + browser + "\n" + msg);
		return "redirect:pixel.png";
	}
}

In production environments this can be rewritten to be a batch API. Notice that we capture the browser information as well, but we do not process it so that there is lower overhead. The server can download the file and pull the lines before and after the error to be even more expressive. The server piece here is trivial: we bind the error URL to a Log4J(or other) logger and print into the logs we are already processing.

Advertisements

One Response to Javascript Error Logging Infrastructure

  1. if it’s of use we have an open source solution at http://jsErrLog.appspot.com … it’s a one-line JS include for the front-end and provides an AppEngine based backend for the heavy lifting.

    There’s a demo service running at the above URL (free of course, up to the limits of our AppEngine subscription) and there are links to the GitHub source etc if you want to contribute, fork or grab the bits that are useful 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: