Simple Javascript Error Console for HTML AIR Applications

January 22, 2008 3:34 PM
Javascript errors in a HTML AIR application are printed out to the console by adl. I've written a small AIR javascript library which lets you log the javascript error in your own style or see the error inside an HTML div element without the runtime exception dialog.

Using AIRJSConsole

Download AIRJSConsole and put it in the source folder of your HTML AIR project.
Include airjsconsole.js in your HTML application by using the script tag in the head tag:

<html>
  <head>
    <script src="airjsconsole.js" type="text/javascript" />
  </head>
  <body>
  <!-- Other HTML content -->
  </body>
</html>

AIRJSConsole automatically appends a div tag to your body tag. This div tag is appended with javascript error details like type of error, source file name, line number and stack trace.
You can configure AIRJSConsole to call your custom function with error details rather than append it to a div so that you can do whatever you want with the javascript error:

/* For details on traversing the stackTrace array look at
airConsole.describeError() in airjsconsole.js */
function dingDong(errDesc, stackTrace)
{
    alert(errDesc);
}

/* Call dingDong instead of appending to div */
airConsole.registerHandler(dingDong);

Now the dingDong() function will get called on every javascript error.

Here's a sample HTML AIR application:

Application descriptor (AirJSConsole-app.xml):

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6">
  <id>AirJSConsole</id>
  <filename>AirJSConsole</filename>
  <version>v1</version>
  <initialWindow>
    <content>AirJSConsole.html</content>
    <visible>true</visible>
  </initialWindow>
  <name>AirJSConsole</name>
</application>

Main HTML File (AirJSConsole.html):

<html>
<head>
<title>AIR JS Console</title>
<script src="AIRAliases.js" type="text/javascript" />
<script src="airjsconsole.js" type="text/javascript" />
</head>
<body>
<p>This is lots of text</p>
<p>This is lots of text</p>
<p>This is lots of text</p>
<p>This is lots of text</p>
<input type="button" value="Cause JS Mischief" onClick="mischief();"/>
</body>
</html>

Now simply run adl AirJSConsole-app.xml from the flex console to run the sample.

Working

AIRJSConsole catches the HTMLUncaughtScriptExceptionEvent from the main HTMLLoader of the HTML AIR application and directs it to your own custom function or it's own internal logging functions.

On startup, it calls window.addEventListener() to register a function that gets called when the page is loaded. This function appends a div tag to the body tag. Any errors that have been accumulating before this div tag was created is stored in a buffer so that errors are not lost.

Now any uncaught javascript exception is directed to a function which either prints to the console, appends it to the div or calls your custom function.

Note: When a custom log function is registered, any error messages buffered because of unavailability of the div is passed on as HTML to the function. In this case, stackTraceArr will be null.

CategoryAIR Comment(s)