What is the use of .stack property in JavaScript?

Javascript Web Development Front End Technology

The Stack property in JavaScript is used to store and keep track of the errors and saves the information such as the type of the error, where the error is raised and the reason of the error. The path of the origin of the error is also stored in the stacks in JavaScript.

Stack is the error class property in JavaScript, which is also used to store the functions that are called, the order of the functions called too. The format of the error shown is as first, in the first line the type of the error will be displayed and then the colon is printed and then the reason why the error raised will be printed. In the second line the location of the raised error will be shown.

Format of an Error

This is the format displayed when the Reference Error is raised.

Uncaught ReferenceError ReferenceError: showStack is not defined //type:reason
at onclick (c:\Users\abdur\Desktop\demo2\aaa.html:31:35) // location of error

Example 1

Following is an example which demonstrates the usage of the stack property.


function demo() {
   throw new Error("error");
}
try{
   demo()
}
catch(e) {
   console.log(e.stack)
}
demo();

Note − Stack is a non-standard property and may not be available in all environments.

Example 2

Following example creates and throws a user defined error, retrieves and displays the stack property of the generated error (object) −


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Stack Property - Error class</title>
</head>
<body>
   <script>
   function showStack() {
      var value = document.getElementById("input").value;
      try {
         if (isNaN(value)) throw new Error('This is not a number');
      }
      catch (e) {
         document.getElementById('a').innerHTML = e.stack;
      }
   }
   </script>
   <h3>
      Shows error if input is given wrong.
   </h3>
   <h5>Enter a integer</h5>
   <input type="text" id="input">
   <button type="submit" value="Click"
      onclick="showStack()"
      style="width:60px;height:30px">
      Press
   </button>
   <p id="a"></p>
</body>
</html>

On execution the above program displays a text box and a button saying “Press”.

If you enter a non-numerical value and click on the button an error is generated and the contents of the stack of the generated error (class) will be displayed.

In the above example, the input is required to be an integer. But if the user enters a input which is not a number then, the stack property will store the error and prints all the errors which are in the program with the location as well as the type of the error.

Example 3

Now, let’s retrieve and print the contents of a predefined error.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Predefined Error</title>
   <script>
      function showStack() {
         try {
            writeFC();
         }
         catch (e) {
         document.getElementById('a').innerHTML = e.stack ;
      }
   }
   function rightFC() {
      document.getElementById('a').innerHTML = e.stack ;
   }
   </script>
</head>
<body>
   <center>
      <h3>TUTORIALS POINT</h3>
      <p>Predefined error in JavaScript</p>
      <button onclick="showStack()">Press</button>
      <div id="erRes"></div>
      <p id="a"></p>
   </center>
</body>
</html>

In the above example, an error is raised and printed as the contents of the stack. In this example when the wrong function is called then the above output is displayed. Instead of rightFC() function, writeFC() function is called which is not defined in the program.