JavaScript Error.prototype.stack Property

Last Updated : 15 Feb, 2023

To handle any error which occurs while execution, the methods of error handling are used.

In these methods, the type of error where it is raised and reasons are given in a definite order or sequence. Stack Structures are used to store these sequences. In JavaScript, all errors and their details are stored in stacks along with the path from where they originated and where they are shown with an error.

Error.prototype.stack is a property of error class in JavaScript which represents a non-standard stack that is used to keep records for the functions that are called, its order, and so on.

When an error occurs, the content of this stack is printed as an output, enabling the programmers to trace the function calls in a backward direction and figure out from where the error has been originated. It also tells the file name and the line number where the error occurred for some specific reasons. It’s better used for debugging purposes.

Example 1: The following code creates a function that checks whether the entered value is a number or not. If not found a number then it throws an error whose stack contents is printed in an alert box as shown.

Stack is traced to find an error, from the output it’s clear that first the name of the file is shown where an error occurred and then the line along with the reason for the error occurrence. We can also log this error into our console.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Error.prototype.stack</title> 
      
    <script> 
        function check() { 
            var val = document.getElementById("inputID").value; 
            try { 
                if (isNaN(val)) throw new Error('Not a number!'); 
            } 
            catch (e) { 
                alert(e.stack); 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <h2> 
        This is a form where if wrong input is 
        given then error is thrown with details. 
    </h2> 
  
    <br /> 
    <h4> Please enter an integer:</h4> 
    <input type="text" id="inputID"> 
  
    <button type="submit" value="Click"
        onclick="check()"
        style="width:50px;height:25px"> 
        Click 
    </button> 
    <br /> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Error.prototype.stack</title> 
      
    <script> 
        function check() { 
            var val = document.getElementById("inputID").value; 
            try { 
                if (isNaN(val)) throw new Error('Not a number!'); 
            } 
            catch (e) { 
                alert(e.stack); 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <h2> 
        This is a form where if wrong input is  
        given then error is thrown with details. 
    </h2> 
  
    <br /> 
    <h4> Please enter an integer:</h4> 
    <input type="text" id="inputID"> 
  
    <button type="submit" value="Click" 
        onclick="check()" 
        style="width:50px;height:25px"> 
        Click 
    </button> 
    <br /> 
</body> 
  
</html> 

Output:

Example 2: We are trying to take a method where the error is raised by the system and not by the user.

We can see how Error.prototype.Stack works for all types of errors whether it is user-defined or not. We can also use other properties of the error class to investigate more about them, their name, messages, and many more.

HTML

<script> 
    function check() { 
      
        try { 
            chec2(); 
            // Calling a wrong function name by mistake 
            // it will raise error in runtime 
        } 
        catch (e) { 
            document.getElementById("gfg").innerHTML = e.stack; 
      
        } 
    } 
    function check2() { 
        document.getElementById("gfg").innerHTML ="Correct Function called"; 
    } 
</script> 
  
<h1 style="color:green">GeeksforGeeks</h1> 
  
<b>This is predefined error type of JavaScript</b> 
<br /><br /> 
<button onclick="check()">Click</button><br /> 
<div id="gfg"></div>