Call Stack Visualizer in JavaScript

Understanding the call stack is fundamental to debugging and comprehending how JavaScript code executes. This challenge asks you to build a simple visualizer that dynamically displays the call stack as a function is called and returns. This tool will be invaluable for grasping the flow of execution and identifying potential issues like infinite recursion.

Problem Description

You are tasked with creating a JavaScript function, visualizeCallStack, that takes a function as input and executes it. While the function is executing, visualizeCallStack should:

1. Log the current call stack to the console at each function call and return. The call stack should include the function name and its arguments.
2. Format the call stack output in a clear, readable way. Each entry in the call stack should be on a new line and clearly indicate the function being called and the arguments passed to it.
3. Handle nested function calls correctly. The visualizer should accurately represent the entire call chain, including calls within other functions.
4. Handle the initial call. The first function call should also be logged.

Key Requirements:

• The solution must use Error.stack to capture the call stack information.
• The solution must not modify the original function passed as input.
• The solution should be reusable – it should work with any function passed to it.

Expected Behavior:

When visualizeCallStack is called with a function, the function will execute, and the call stack will be logged to the console at each function call and return. The output should be easy to understand and accurately reflect the execution flow.

Edge Cases to Consider:

• Functions with no arguments.
• Functions that call themselves recursively.
• Functions that call other functions, which in turn call other functions (deeply nested calls).
• Functions that return immediately without executing any code.
• Functions that throw errors (the stack trace should still be logged before the error is thrown).

Examples

Example 1:

function a(x) {
  function b(y) {
    function c(z) {
      console.log("Inside c with z:", z);
    }
    c(y + 1);
  }
  b(x + 1);
}

visualizeCallStack(function(arg) { a(arg); });

Output:

Inside visualizeCallStack with arg: undefined
Inside a with x: undefined
Inside b with y: 1
Inside c with z: 2

Explanation: The call stack is logged at the entry of each function (a, b, and c) and when they return. The arguments passed to each function are also included.

Example 2:

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

visualizeCallStack(function(arg) { factorial(arg); });

Output:

Inside visualizeCallStack with arg: undefined
Inside factorial with n: undefined
Inside factorial with n: 1
Inside factorial with n: 2
Inside factorial with n: 3
Inside factorial with n: 4
Inside factorial with n: 5
Inside factorial with n: 6
Inside factorial with n: 7
Inside factorial with n: 8
Inside factorial with n: 9
Inside factorial with n: 10

Explanation: This demonstrates the handling of recursive function calls. The call stack grows with each recursive call and shrinks as the function returns.

Example 3: (Edge Case - Empty Function)

function emptyFunction() {
  // Does nothing
}

visualizeCallStack(emptyFunction);

Output:

Inside visualizeCallStack with arg: undefined
Inside emptyFunction with arg: undefined

Explanation: Even an empty function should trigger a call stack entry and exit.

Constraints

• The solution must be implemented in JavaScript.
• The solution must not rely on external libraries or frameworks.
• The solution should be reasonably performant. Excessive logging or inefficient stack processing should be avoided. While performance isn't the primary focus, avoid unnecessary overhead.
• The visualizeCallStack function should accept a single argument: a function to be executed.
• The output should be logged to the console using console.log.

Notes

• Error.stack provides a string representation of the call stack. You'll need to parse this string to extract the relevant information (function name and arguments).
• Consider using regular expressions or string manipulation techniques to parse the Error.stack string.
• The format of Error.stack can vary slightly between JavaScript engines (e.g., Chrome, Firefox, Node.js). Your solution should be robust enough to handle these variations, or at least provide a reasonable approximation.
• Focus on clarity and readability of the output. A well-formatted call stack is much easier to understand than a jumbled mess of information.
• Think about how to handle the arguments passed to each function. You may need to stringify them or truncate them if they are very large.
• This is a great exercise in understanding JavaScript's execution model and working with the Error object. Good luck!