Losing a Backtrace in the catch block in JavaScript
Last Updated :
08 Dec, 2022
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:
Similar Reads
Unhandle promise rejection in a basic catch block In this article, we will try to analyze the case where promise rejection is left unhandled in the basic catch block itself with the output which will receive later on its execution, and further, we will try to analyze its solution through an example. Let us first try to analyze the syntaxes which we
3 min read
Scoping & Hoisting in JavaScript Prerequisite: Understanding Javascript Scoping, Javascript Hoisting In JavaScript, there are two types of scopes Global Scope: Scope outside the outermost function attached to the window.Local Scope: Inside the function being executed. Hoisting: It is a concept that enables us to extract values of v
11 min read
Why we cannot catch error outside of function in JavaScript ? In this article, we will try to understand why and how we wouldn't be able to catch an error outside of the function, and later we will try to resolve this issue with the help of an example in JavaScript. First, we will try to understand our problem statement more clearly with the help of an example
4 min read
How to escape try/catch hell in JavaScript ? In this article, we will try to understand how we may escape from multiple try/catch hell (that is multiple sequences of occurrences of try/catch blocks) in JavaScript. Let us first quickly visualize how we may create a try/catch block in JavaScript using the following illustrated syntax: Syntax: Fo
4 min read
How to create a global Promise Rejection Handler in JavaScript ? In this article, we will try to understand firstly how we create a Rejected Promise, and later we will see how we may create a Global Promise Rejection Handler which will try to handle (somehow) that Rejected Promise created earlier in JavaScript. Let us first try to understand how we create a Promi
2 min read