How To Get The Stack Trace From An Error In JavaScript

Posted on by Cora Lopez
Get the Stack Trace from an Error in JavaScript

“Get the stack trace from an error in JavaScript” means tracking the order in which your code executes when your program crashes, making it easy to understand the flow of your code and fix bugs. Before going into the main content, let’s find out the concept of stack trace in JS.

What is stack trace in JavaScript?

The stack trace or backtrace is a list of stack frames. Each stack frame represents a program segment to be executed. They contain information about a method and the method that calls them.

As a JS programmer, you probably see the stack trace very often because it appears in every JS error message.

For example:

Uncaught ReferenceError: learn is not defined
    at makeLearn (gg.js:2:3)
    at combine (gg.js:10:10)
    at gg.js:13:13

The stack trace is the three lines that appear below the Uncaught ReferenceError error message.

Get the stack trace from an error in JavaScript

Here are four methods to help you get the stack trace quickly:

Using console.trace() method

Syntax:

console.trace(trace)

Parameter:

  • trace: A label to name or describe the stack trace.

The console object gives us a method called console.trace(), which will give you a trace on the console every time it is called. We can understand this by observing the example below:

function makeLearn() {
	// Using console.trace()
	console.trace("this is the trace to the makeLearn method");
	return "learn";
}

function makeShare() {
	return "share";
}

function combine(a, b) {
	return a() + b() + "IT";
}

console.log(combine(makeLearn, makeShare));

Output:

this is the trace to the makeLearn method
    makeLearn @ gg.js:2
    combine @ gg.js:11
    (anonymous) @ gg.js:14
learnshareIT

Using the error object

The error object provides us with a beneficial property to get the stack trace that is the stack property. We need to new an error object at any function definition in the source code and call the stack property. Like this:

function makeLearn() {
	// Using stack property
	console.log(new Error("this is the trace to the makeLearn method").stack);
	return "learn";
}

function makeShare() {
	return "share";
}

function combine(a, b) {
	return a() + b() + "IT";
}

console.log(combine(makeLearn, makeShare));

Output:

Error: this is the trace to the makeLearn method
    at makeLearn (gg.js:2:15)
    at combine (gg.js:11:10)
    at gg.js:14:13
learnshareIT

Using StackTrace.js

StackTrace.js is a library used to create and display JavaScript stack traces in all browsers. To use StackTrace.js, you can download or use CDN. Here we will guide you to use CDN.

Click here to go to the StackTrace.js CDN page and copy the CDN tag of the highest version (currently 2.0.2). Next, put it in the head tag of the HTML file. Like this:

<head>
    <meta charset="UTF-8" />
    <title>Natours | Exciting tours</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.min.js"      integrity="sha512-9fotp9F7mNA1AztobpB07lScgCKiN4i2JuRYTl8MxiHQVJs05EJqeUfPWt9OFAKD1QsIVZiNFQSdov9luOT8TA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
</head>

The installation is done. Now use the line of code:

StackTrace.get() anywhere you want to display the stack trace.

function makeLearn() {
	// Using StackTrace.js
	stackTrace = StackTrace.get();
	console.log(stackTrace);
	return "learn";
}

function makeShare() {
	return "share";
}

function combine(a, b) {
	return a() + b() + "IT";
}

console.log(combine(makeLearn, makeShare));

The results displayed on the console screen also look much more detailed. Like this:

Summary

That’s all for today. We hope the ways to get the stack trace from an error in JavaScript that we mentioned above are helpful to you. Thank you for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *