Open In App

Losing a Backtrace in the catch block in JavaScript

Last Updated : 08 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see that “JavaScript is losing a backtrace in the catch block”. A backtrace means, losing something because of your past events.

A stack is maintained, by JavaScript to keep track of the invoked functions, which are not returned yet. A try-catch block was introduced by JavaScript, so that, if an error occurs, in the JS code, the app should not crash, despite, the catch block being used, to resolve the error, where the argument of the catch block, is that error. 

Syntax:

try {
    // Do something
}
catch (err) {
    // Do something
}

Let us understand, the problem statement, with an example in detail. 

Example 1: Consider, there are a total of 3 functions, in the below code i.e. gfgMain(), gfg1(), and gfgAPI().

HTML




<!DOCTYPE html>
<html lang="en">
 
<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>Geeks for Geeks resolving errors.</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <h3>Losing backtrace</h3>
 
    <script>
        function API_Call(arg) {
            throw new Error(
                'this GeeksforGeeks API returns an error')
        }
 
        function ErrorDetector() {
            try {
                API_Call()
            }
            catch (err) {
                console.log(
                    'ErrorDetector() function enters '
                    + 'in the catch block, as API_Call()'
                    + ' returns an Error')
            }
        }
 
        function Main() {
            try {
                ErrorDetector()
                return 'ErrorDetector() returned successfully'
            }
            catch (err) {
                console.log('ErrorDetector() gives an error', err)
                return 'ErrorDetector() does not returned successfully'
            }
        }
 
        Main();
    </script>
</body>
 
</html>


Output: 

 

Explanation: In the above example, three functions have been used:

Main(): The Main() function contains a try-catch block. Inside the try block, the Main() function calls ErrorDetector() function. The catch block will run, if the ErrorDetector() function, throws an error. 

ErrorDetector(): The ErrorDetector() function also contains a try-catch block. Inside the try block, the ErrorDetector() function, calls API_Call() function. The catch block will run, if the API_Call() function, throws an error. 

API_Call(): The API_Call() function returns an error with the message, ‘this GeeksforGeeks API returns an error’.

Now, dry-running the code, the Main() function is invoked, and the Main() function invokes ErrorDetector() function, inside the try block. Now, ErrorDetector() function runs API_Call() function, which throws an error. Due, to this error, the catch block of ErrorDetector() will be executed, and a console statement is printed inside the console. 

Now, in general, as the API_Call() function gives an error, so should ErrorDetector(), and hence Main() should also reproduce an error. But, that’s not the case, the Main() is returned successfully.

Solution: You can observe the problem that, Main() should return an error, but returned successfully. This is a very dangerous problem, which could lead to the hiding of internal errors, and hence, leading to loss of backtrace, in the catch block. This happened because, the catch block inside the ErrorDetector(), was executed, without throwing any error, which leads to the misguidance of the Main() function.

To resolve this error, simply throw an error inside the catch block, inside the ErrorDetector() function.

Example 2: Consider the same example, as above just add “throw err” in the catch block, inside the ErrorDetector() function. Now, the Main() function, will throw an error, and execute the catch block. 

HTML




<!DOCTYPE html>
<html lang="en">
 
<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>Geeks for Geeks resolving errors.</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <h3>Losing backtrace</h3>
     
    <script>
        function API_Call(arg) {
            throw new Error(
                'this GeeksforGeeks API returns an error')
        }
 
        function ErrorDetector() {
            try {
                API_Call()
            }
            catch (err) {
                console.log(
                    'ErrorDetector() function enters in the '
                    + 'catch block, as API_Call() returns an Error')
                throw err
            }
        }
 
        function Main() {
            try {
                ErrorDetector()
                return 'ErrorDetector() returned successfully'
            }
            catch (err) {
                console.log('ErrorDetector() gives an error', err)
                return 'ErrorDetector() does not returned successfully'
            }
        }
 
        Main();
    </script>
</body>
 
</html>


Output: 

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads