carl: ui

JavaScript Error Reporting with Splunk

Keeping track of new browser releases these days can be really challenging. It is less than ideal if your payment processor is throwing a JavaScript onsubmit exception effectively canceling all transactions.

Here is a little technique for indexing JavaScript exceptions in your production and development environments using Splunk.

In JavaScript create an onerror event handler that makes an HTTP request to a server that has access logs indexed by Splunk.


    function JSErrorLogger(httpBeacon){
        var self = this;
        self.handler = function(msg, url, line){
            var log = {
                "date":new Date(),
                "type":"jserror",
                "line":line,
                "msg":msg,
                "url":url
            }
            var logStr = "";
            for(var i in log){
                logStr += i + ":" + log[i] + ” “;
            }
            var imgObj = new Image();
            imgObj.src = httpBeacon + “?” + logStr;
        };
        self.JSErrorLogger = function(){
            window.onerror = self.handler;
        }();
    }

Make sure that this JavaScript is the very first item executed by the interpreter, ensuring all exceptions are caught by the event handler.

Instantiate the class with a URI that points to a beacon on a machine that has Splunk indexing the access log. You may want to set some environment variables in JavaScript that turn logging on for only testing and production machines.

Hey Browser, You’ve Got Tail!

For those interested in monitoring real-time data being consumed by Splunk we’ve introduced a new feature called Live Tail to the latest preview release. Additionally, we’ve added a nifty new REST endpoint /v3/splunk/tail for your custom application needs.

Live Tail

More information can be found in these videos:

  • A quick walkthrough of the new preview release feature Live Tail, its UI, and some sample code - See Video
  • An overview of the architecture used to integrate real-time data from Splunk Live Tail in a web browser. Challenges and workarounds when using JavaScript/Flash hybrids - See Video

Happy Streams!

Flash/AS3 URLStream Memory Leak

Lately we have been doing some work with persistent connections. If you are familiar with Comet the Flash/AS3 URLStream class provides an interesting alternative. The URLStream class exposes raw binary data as it is downloaded.

Unfortunately, this week we ran into a rather tricky memory leak when using this nifty class. An event listener was subscribed to the progress event and over time memory usage steadily increased to a point of making the browser inoperable.

After a little digging we narrowed the problem down to the URLStreams usage of the ByteArray. It seems as if URLStream was reallocating a buffer for the array and the short turn around time (on the reads) was not giving the garbage collector enough time to throw out the old allocation.

The way the leak could be corrected was by deleting the ByteArray (Set null), forcing garbage collection of the read buffer.

Here is the workaround:


var bytes:ByteArray = new ByteArray();
this.readBytes(bytes, 0, this.bytesAvailable);
bytes = null;

Happy Streams!

JavaScript Hybrids (Extending the browser) - Part 1

I deeply enjoy browser programming, however sometimes I wish it could do more. Things like sockets, streams, audio and improved file system handling would be a real treat. Man would it be fresh if I had access to this functionality in JavaScript.

Now this is going to sound pretty circa 98, but several main stream browser plugins support a JavaScript communication layer. According to the Millward Brown survey plugin installations of Flash (99%) and Java (85%) are pretty ubiquitous.

Flash/JavaScript Communication
The Flash ExternalInterface class enables communication between JavaScript and the Flash Player. ExternalInterface was first introduced in ActionScript 1.0; so Flash Player 8 is the minimum plugin version required.
From JavaScript

  • Call an ActionScript function
  • Pass arguments
  • Return a value to the JavaScript callee

From ActionScript

  • Call a JavaScript function
  • Pass arguments
  • Pass various data types (Boolean, Number, String, etc…)

Java Applet/JavaScript Communication
The scarcely documented LiveConnect API provides JavaScript with the ability to call methods of Java classes and vice-versa. Using LiveConnect in applets requires the mayscript attribute and the plugin.jar package for newer versions of Java (Howto for Mac OS X users). Communication from Java to JavaScript is mitigated through the netscape.javascript.JSObject class. JavaScript exceptions in Java can be handled using the netscape.javascript.JSException class. Public methods in an applet can be called using the applet container object followed by the method name and arguments (e.g., document.getElementById(”myapplet”).publicAppletMethod(arg1, argN);).