Agile Enterprise Application Development with Flex

Logging with Log4Fx

When you develop distributed applications, you can’t overestimate the importance of a good logging facility.

Imagine life without one: the user pressed a button and…nothing happened. Do you know if the client’s request reached the server-side component? If so, what did the server send back? Add to this the inability to use debuggers while processing GUI events like focus change, and you may need to spend hours, if not days, trying to spot some sophisticated errors.

That’s why a reliable logger is a must if you work with an application that is spread over the network and is written in different languages, such as Adobe Flex and Java.

At Farata Systems, we created a Flash Builder plug-in for Log4Fx, which is available as a part of the open source project Clear Toolkit. This is an advanced yet simple-to-use component for Flex applications. You can set up the logging on the client or the server side (Java), redirect the output of the log messages to local log windows, or make the log output easily available to the production support teams located remotely.

Think of a production situation where a particular client complains that the application runs slowly. Log4Fx allows you to turn on the logging just for this client and you can do it remotely with web browser access to the log output.

Log4Fx comes with several convenient and easy-to-use display panels with log messages. In addition, it automatically inserts the logging code into your ActionScript classes with hot keys (Figure 4-8).

Figure 4-8. Log4Fx hot keys to insert log statements into ActionScript

For example, place the cursor in the script section of your application and press Ctrl-R followed by M to insert the following lines into your program:

import mx.logging.Log;
import mx.logging.ILogger;
private var logger:ILogger = Log.getLogger("MyStockPortfolio");

Say you are considering adding this trace statement into the function getPriceQuetes():

trace("Entered the method getPriceQuotes");

Instead of doing this, you can place the cursor in the function getPriceQuotes() and press Ctrl-R followed by D. The following line will be added at your cursor location:

if (Log.isDebug()) logger.debug("");

Enter the text Entered the method getPriceQuotes() between the double quotes, and if you’ve set the level of logging to Debug, this message will be sent to a destination you specified with the Logging Manager.

If a user calls production support complaining about some unexpected behavior, ask her to press Ctrl-Shift-Backspace; the Logging Manager will pop up on top of her application window (Figure 4-9).

Figure 4-9. A user enables logging

The users select checkboxes to enable the required level of logging, and the stream of log messages is directed to the selected target. You can change the logging level at any time while your application is running. This feature is crucial for mission-critical production applications where you can’t ask the user to stop the application (e.g., financial trading systems) but need to obtain the logging information to help the customer on the live system.

You can select a local or remote target or send the log messages to the Java application running on the server side, as shown in Figure 4-10.

Figure 4-10. Logging in the Local panel

Remote Logging with Log4Fx

Log4Fx adds a new application, RemoteLogReceiver.mxml, to your Flex project, which can be used by a remote production support crew if need be.

Say the user’s application is deployed at the URL http://230.123.12.10:8080/myapplication.html. By pressing Ctrl-Shift-Backspace, the user opens the Logging Manager and selects the target Remote Logging (Figure 4-11).

Figure 4-11. Specifying the remote destination for logging

The destination RemoteLogging is selected automatically, and the user needs to input a password, which the user will share with the production support engineer.

Because RemoteLogReceiver.mxml is an application that sits right next to your main application in Flash Builder’s project, it gets compiled into a .swf file, the HTML wrapper is generated, and it is deployed in the web server along with your main application. The end users won’t even know that it exists, but a production engineer can enter its URL (http://230.123.12.10:8080/RemoteLogReceiver.html) in his browser when needed.

Think of an undercover informant who lives quietly in the neighborhood, but when engaged, immediately starts sending information out. After entering the password provided by the user and pressing the Connect button, the production support engineer will start receiving log messages sent by the user’s application (Figure 4-12).

Log4Fx is available as a part of the open source project Clear Toolkit at https://sourceforge.net/projects/cleartoolkit.

Troubleshooting with Charles

Although lots of programs allow you to trace HTTP traffic, Flex developers need to be able to trace not just HTTP requests, but also AMF calls made by Flash Player to the server. At Farata Systems, we’ve been successfully using a program called Charles, which is a very handy tool on any Flex project.

Charles is an HTTP proxy and monitor that allows developers to view all of the HTTP traffic between their web browser and the Internet. This includes requests, responses, and HTTP headers (which contain cookies and caching information). Charles allows viewing Secure Sockets Layer (SSL) communication in plain text. Because some users of your application may work over slow Internet connections, Charles simulates various modem speeds by throttling your bandwidth and introducing latency—an invaluable feature.

Charles is not a free tool, but it’s very inexpensive. It can be downloaded at http://www.charlesproxy.com.

Figure 4-12. Monitoring log output from the remote machine