JS Print Stack Trace

In this article, we will see how to print stack trace in js.

What is stack trace?

The stack trace is a diagnostic tool that provides information about the sequence of function calls that led up to an error or exception. This information is useful for debugging and finding the source of problems in the code. When an error occurs in a JavaScript program, engine generates a stack trace as part of the error object. The stack trace is a list of functions that were called in reverse order of execution, with the most recent function call appearing first.

So. stack trace in JavaScript is a record of the active functions and their call order at a particular point in time during the execution of a program, and it is generated when an error or exception occurs.

How to print stack trace?

There are a few different methods that can be used, depending on the context in which the error occurred and the tools you have available. Here are some of the most common ways to print stack trace in JavaScript:

1. console.trace()

In this method, the console.trace() is a built-in feature of most modern web browsers and Node.js environments. When we called, it will print a stack trace to the console that includes the function names and line numbers of all the functions that were called leading up to the point where console.trace() was called.

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

Output:

Trace
at foo (<anonymous>:2:11)
at bar (<anonymous>:6:3)
at <anonymous>:8:1

This above code starts by calling the bar() function at the bottom of the script. The bar() function calls the foo() function. The ‘foo()’ function logs a stack trace to the console using the console.trace() method. The stack trace shows the current call stack at the point where the console.trace() was called, including the functions that were called to get to that point.

The foo() function, returns, and control are passed back to the bar() function. The bar() doesn’t have any more statements, it also returns, and control is passed back to the caller of bar(), which in this case is the global scope.

Since the global scope doesn’t have any more statements, the program terminates, and the stack trace is displayed in the console.

2. Custom stack trace libraries

There are also several third-party libraries available, so we can use that and make it easier to print and manipulate stack traces in JavaScript. One popular library is call StackTrace.js and it provides a simple API for retrieving stack traces.

You can use its printStackTrace() function to print a stack trace. This function takes an optional error object as an argument, but if no error object is provided, it will automatically generate one and use it to print the stack trace.

function foo() {
  bar();
}

function bar() {
  baz();
}

function baz() {
  printStackTrace(); // prints the stack trace to the console
}

foo();

Output:

Error
at baz (<anonymous>:7:3)
at bar (<anonymous>:4:3)
at foo (<anonymous>:1:3)
at <anonymous>:10:1

We can also pass an error object as an argument to printStackTrace() like:

function foo() {
  try {
  bar();
 } catch (err) {
  printStackTrace(err); // prints the stack trace for the caught error to the console
 }
}

function bar() {
  throw new Error('oops');
}

foo();

Output:

Error: oops
at bar (<anonymous>:8:9)
at foo (<anonymous>:3:5)
at <anonymous>:11:1

In addition to printing the stack trace to the console, printStackTrace() also returns an array of stack frames, which you can use in your code if needed.

3. Error().stack

In this method, we can create an Error object manually and access its stack property to print a stack trace.

function foo() {
  throw new Error('oops');
}

function bar() {
  foo();
}

try {
  bar();
} catch (err) {
  console.log(err.stack);
}

Output:

Error: oops
at foo (<anonymous>:2:9)
at bar (<anonymous>:6:3)
at <anonymous>:9:3

In the above code, we defined the foo() function. And it throws an error with the message “oops” using the throw statement. Then we define the bar() function and it calls foo(). A try-catch block is use to catch any errors that occur in the code that’s execute within the try block. Within the try block, bar() is called.

When bar() is called, it in turn calls foo(). When foo() is called, it throws an error with the message “oops”. The error that was thrown in foo() propagates up the call stack to bar(). Which in turn propagates it up to the try-catch block. The catch block is executed, and the error object that was thrown is caught and assigned to the ‘err’ variable The console.log() statement is executed, which logs the stack trace of the error to the console.

Conclusion

So, Printing stack traces in JavaScript can be a powerful tool for debugging and identifying issues in your code. By using the methods, you can easily retrieve detailed information about the function calls.