Tuesday Jan 22, 2008

Improved Callstack information in JavaScript

In this post I blogged about a simple function to get the call stack in JavaScript. Here is an improved variant of the same function:

/\*\*
\* This function returns an array of objects that contain the information about call stack.
\*/
function callstack() {
function StackFrame(funcName, funcSource, flName, lnNumber) {
this.functionName = funcName;
this.functionSource = funcSource;
this.fileName = flName;
this.lineNumber = lnNumber;
}
StackFrame.prototype.toString = function() {
return 'at ' + this.functionName + '(' + this.fileName + ':' + this.lineNumber + ')' ;
};
StackFrame.prototype.toHtml = function() {
return '<table border="0">' +
'<tr valign="top"><td><b>Name: </b></td><td>' + this.functionName + '</td></tr>' +
'<tr valign="top"><td><b>File: </b></td><td>' + this.fileName + '</td></tr>' +
'<tr valign="top"><td><b>Line: </b></td><td>' + this.lineNumber + '</td></tr>' +
'<tr valign="top"><td><b>Source:</b></td><td>' +
( this.functionSource ?
'<pre>' + this.functionSource.toString().replace(/\\</g, '&lt;').replace(/\\>/g, '&gt;') + '</pre>' :
'unavailable') + '</td></tr>' +
'</table>'
;

};
var stackFrameStrings = new Error().stack.split('\\n');
// remove first two stack frames
stackFrameStrings.splice(0,2);
var stackFrames = [];
for (var i in stackFrameStrings) {
// a stack frame string split into parts
var stackFrame = stackFrameStrings[i].split('@');
if (stackFrame && stackFrame.length == 2) {
stackFrames.push(
// Stackframe object
new StackFrame(stackFrame[0],
eval(stackFrame[0].replace(callstack.sansParenthesisRE,'')),
stackFrame[1].match(callstack.fileNameLineNumberRE)[1], // first group
stackFrame[1].match(callstack.fileNameLineNumberRE)[2] // second group
)
);
}
}
return stackFrames;
}
callstack.sansParenthesisRE = /[(][\^)]\*[)]/;
callstack.fileNameLineNumberRE = /(.\*):(\\d+)$/;

Here is how it canbe used. The callstack function code above is assumed to be stored in a file named Utilities.js .

<html>
<head>
<title>Callstack</title>
<script src='Utilities.js'></script>
<script>
function called() {
var cs = callstack();
document.write(cs[0].toHtml());
document.write(cs[1].toHtml());
document.write(cs[2].toHtml());
}
function caller() {
called();
}
</script>
</head>
<body onload="caller();">
</body>
</html>

Here is the output as displayed in the browser (FireFox):

Name: called()
File: file:///languages/javascript/Callstack.html
Line: 7
Source:
function called() {
var cs = callstack();
document.write(cs[0].toHtml());
document.write(cs[1].toHtml());
document.write(cs[2].toHtml());
}
Name: caller()
File: file:///languages/javascript/Callstack.html
Line: 13
Source:
function caller() {
called();
}
Name: onload([object Event])
File: file:///languages/javascript/Callstack.html
Line: 1
Source:
function onload(event) {
caller();
}


 

Monday Dec 24, 2007

Callstack information in JavaScript


I have started hacking JavaScript. It has been an interesting learning experience and quite different from Java coding. However some things remain same...here is a function to get the information about current call stack:

/\*\*
 \* This function returns an array of objects that contains information about the current call stack.
 \*/
function callstack() {
    var stackFrameStrings = new Error().stack.split('\\n');
    stackFrameStrings.splice(0,2);
    var stackFrames = [];
    for (var i in stackFrameStrings) {
        var stackFrame = stackFrameStrings[i].split('@');
        if (stackFrame && stackFrame.length == 2) {      
            stackFrames.push(
            {
            functionName: stackFrame[0],
            functionSource: eval(stackFrame[0].replace(/[(][\^)]\*[)]/,'')),
            fileName: stackFrame[1].match(/(.\*):(\\d+)$/)[1],
            lineNumber: stackFrame[1].match(/(.\*):(\\d\*)$/)[2]
            }
            );
        }
    }
    return stackFrames;
}

NOTE: Tested in Firefox.

It uses a mechanism very similar to Java's new Throwable().getStackTrace() to get information about the current call stack. It uses the JavaScript Error object which happens to have a property called stack.  Example usage:

function called() {
    var cs = callstack();
    alert('Self: ' + cs[0].functionName);
    alert('Caller: ' + cs[1].functionName);
}
function caller() {
    called();
}
caller();

This displays two alert dialogs:

Self: called()
Caller: caller()
Please let me know if there is a better way to get similar information. 
About

sandipchitale

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today