Stop tracing and start logging

    Debug information with the good old “trace” is around since ActionScript 1 and has been heavily used as this was a key for debugging a Flash application. In AS3 trace has lost its importance as Flash Player 9 supports Runtime Exceptions and the Flex Builder debugger supports breakpoints so you can have a look at all variables where and when you want.

    Instead of “trace” I recommend to use the logging API of the Flex framework. To have the output also on the Console window add the TraceTarget to your main application MXML:

    <mx:TraceTarget fieldSeparator="->" includeCategory="true" includeLevel="true" includeTime="true" />

    The nice thing you get when you add the TraceTarget is that the internal logs of the Flex framework also show up. If you use for instance HTTPService and load something this shows up in your console:

    “[SWF] Users:soenkerohde:Documents:workspace:Example:bin-debug:Example.swf – 191,465 bytes after decompression
    19:23:22.843->[INFO]->mx.messaging.Producer->’54A8E65E-90C9-3D70-66F6-BA1BEE5842F9′ producer set destination to ‘DefaultHTTP’.
    19:23:22.956->[INFO]->mx.messaging.Channel->’direct_http_channel’ channel endpoint set to http:
    19:23:22.960->[INFO]->mx.messaging.Producer->’54A8E65E-90C9-3D70-66F6-BA1BEE5842F9′ producer sending message ’33FDE4CB-764A-C757-4FC6-BA1BEECFF0A6′
    19:23:22.973->[DEBUG]->mx.messaging.Channel->’direct_http_channel’ channel sending message:
    (mx.messaging.messages::HTTPRequestMessage)#0
    body = (Object)#1
    clientId = (null)
    contentType = “application/x-www-form-urlencoded”
    destination = “DefaultHTTP”
    headers = (Object)#2
    httpHeaders = (Object)#3
    messageId = “33FDE4CB-764A-C757-4FC6-BA1BEECFF0A6”
    method = “GET”
    recordHeaders = false
    timestamp = 0
    timeToLive = 0
    url = “http://feeds.feedburner.com/soenkerohde?format=xml”
    19:23:22.978->[INFO]->mx.messaging.Producer->’54A8E65E-90C9-3D70-66F6-BA1BEE5842F9′ producer connected.
    19:23:23.002->[INFO]->mx.messaging.Producer->’54A8E65E-90C9-3D70-66F6-BA1BEE5842F9′ producer acknowledge of ’33FDE4CB-764A-C757-4FC6-BA1BEECFF0A6′.
    19:23:23.006->[INFO]->mx.rpc.http.HTTPService->Decoding HTTPService response
    19:23:23.011->[DEBUG]->mx.rpc.http.HTTPService->Processing HTTPService response message:
    (mx.messaging.messages::AcknowledgeMessage)#0
    body = “… REMOVED THE CONTENT HERE”
    clientId = “DirectHTTPChannel0”
    correlationId = “33FDE4CB-764A-C757-4FC6-BA1BEECFF0A6”
    destination = “”
    headers = (Object)#1
    messageId = “6AF8650F-3634-FD0D-FF23-BA1BEEFFCDDB”
    timestamp = 0
    timeToLive = 0″

    As you see this a bunch of information and the brackets in front indicate the level of the logging message which are DEBUG and INFO here. If you are not interested in DEBUG logs at all simply change the level in the TraceTarget to LogEventLevel.INFO.

    What you need to log on your own is pretty simple. Just add this to every class (MXML/AS) to define your logger constant:

    import mx.logging.Log;
    import mx.logging.ILogger;
    private static const logger:ILogger = Log.getLogger("MyCategory");

    Now you can use the constant like:

    logger.info("this is an info message");

    which shows up as: 19:51:47.917->[INFO]->MyCategory->this is an info message
    Replace “MyCategory” with a category name. I always use the name of the class. In this case an info message is used but there is also debug, warn, error and fatal to represent the kind of your log message.

6 comments to Stop tracing and start logging

  • […] Stop tracing and start logging – Debug information with the good old “trace” is around since ActionScript 1 and has been heavily used as this was a key for debugging a Flash application. In AS3 trace has lost its importance as Flash Player 9 supports Runtime Exceptions … […]

  • Moin Sönke,

    give ThunderBolt AS3 also a try, which is a lightweight logger extension for using Firebug. It supports the Flex Logging API using an own target called “ThunderBoltTarget” as well. 😉

    -Jens

    http://www.websector.de/blog/

  • […] I have posted a little extension for SOS about two years ago and now I made a little update which is easier to use. It works the same way as the TraceTarget I already blogged about. […]

  • […] Having your app keep a detailed log can be indispensable for figuring out tricky user-reported bugs. This is easy on the server-side, where you can use any logging framework or just write to a file. Flash includes the trace function, which is useful while developing, but nearly impossible to get from an end-user. Flex, however, has a good logging api that lets you put log statements anywhere you want. I’ve always wanted the interface to be as easy as trace, so I write a couple of scripts to make it easier. […]

  • shainy

    Hi,
    This is really a nice example… I could get the output as explained…. I have one more feature in my app to log all the client side error message to server side logs… Client side error message in the sense, If some thing goes wrong in client side then if atleast a server connection is there, Then how to write those error appearing in client side pop window to server side.