AjaxPatterns
This is the original book draft version for the Traffic Sniffing Ajax pattern, offered for historical purposes and as an anti-spam measure.
You're probably better off visiting the Live Wiki Version for Traffic Sniffing instead, where you can make changes and see what others have written.

Traffic Sniffing

Capture, Intercept, Log, Monitor, Network, Record, Sniff, Traffic

Developer Story

Dave hears a report that critical form data isn't being saved on the database. He turns a sniffer on and tries uploading the same data himself, which shows him an XML message being uploaded via XMLHttpRequest. Inspecting the message in an XML editor, he discovers the Javascript hasn't formatted it correctly.

Problem

How can you diagnose errors and strange behaviour?

Solution

Diagnose problems by sniffing ??? traffic. Many Ajax problems arise because ??? messages are either wrong or not sent at all. Debugging and general logging on either side of the network might help you infer what's being transmitted, but it's better to grab the traffic directly. There are various ways to do this:

  • In the browser, use “XMLHttpRequest Call”s in a wrapper that logs the request and response (see “Logging”). This may be the most convenient technique, because the programmer's probably already looking at the browser. The downside is you'll miss out on non- ??? traffic, e.g. full page refreshes.

  • Employ a generic network traffic monitor, filtering on HTTP traffic to and from the server.

  • Configure your browser to use a generic HTTP proxy, and have the proxy log interesting traffic in either direction.

  • In the server, intercept incoming and outgoing traffic for logging. Server-side frameworks often have a common controller object which can be instrumented to capture information in either direction. In addition, interception facilities are often available, such as Java's Servlet Filters.

Traffic Sniffing is a kind of “Logging” function. As such, you'll probably want similar filtering functionality, e.g. to see only messages in one direction, matching certain text, or to a particular URL.

Tool Support

XMLHttpRequest Tracing and XMLHttpRequest Debugging

Julien Couvreur has written two invaluable Firefox tools: XMLHttpRequest Tracing unobtrusively logs traffic to the Javascript console, while XMLHttpRequest Debugging is a much more powerful, interactive, “Popup” tool that not only shows the messages, but lets you set filters and configure the display (Figure 1.108, “XMLHttpRequest Debugging”). Both are Greasemonkey scripts, so you'll need to install the Greasemonkey extension first.

Figure 1.108. XMLHttpRequest Debugging

XMLHttpRequest Debugging

Fiddler

Fiddler is a Windows proxy specifically designed for analysing and "fiddling" with browser-server traffic (Figure 1.109, “Fiddler”).

Figure 1.109. Fiddler

Fiddler

FlangeLib

Adam Vandenberg has noted that his personal flangelib.js library contains an XMLHttpRequest wrapper to log traffic. While you're unlikely to use flangelib, it's mentioned here because some XMLHttpRequest wrapper libraries may eventually implement “Logging” functionality. The main barrier right now is the lack of an industry-standard logging library.

Code Example [Using XMLHttpRequest Tracing]

Following is the output from the XMLHttpRequest Tracing script during the initial load sequence for the Ajax Patterns Reader. First, the request is logged in the Firefox Javascript console:

    http://blog.monstuff.com/XmlHttpRequestTracing: [736] intercepted open (GET , patternList.phtml ,
true , undefined , undefined)
    http://blog.monstuff.com/XmlHttpRequestTracing: [736] intercepted send (null)

Then, the result, showing response code (200) and content:

    http://blog.monstuff.com/XmlHttpRequestTracing: [736] intercepted load: 200 Ajax Stub|||Browser-Side
Cache|||Browser-Side Templating|||Browser-Side XSLT||| ....

Related Patterns

Traffic Sniffing in the browser is a form of “Logging”.

Live Wiki Version for Traffic Sniffing