Home News Steps To Fix JavaScript Error Stack Trace Issue

Steps To Fix JavaScript Error Stack Trace Issue



In this blog post, we’re going to identify some of the possible causes that can lead to batch tracing of JavaScript errors, and then point out some possible fixes that you can try to fix the problem.



The custom stack property of Error objects keeps track of which functions are called in which order, from which line, and from which file, and with what arguments. The stack chain goes from the last call to the previous calls and reverts to the original call to the global scope.


This function is non-standard and does not appear on the standard track. Don’t use it on web-facing production sites – it won’t work for all users. There may also be serious incompatibilities between implementations, and behavior may change in the future.

Each step is separated by a new line, the first part of the line is the name of the function (if it is not a call to the global scope), and then the location of the file with at (@) (unless the function is a constructor error when the error is run), a colon, and, if file location exists, line number. (Note that the Error object also has the fileName , lineNumber , and columnNumber properties to remove them from the failed recovery. errors (but only errors,and not her trace).

Please note that this is the format used by Firefox. There is no standard formatting. However, Safari 6 and Opera 12 use a very similar format. On the other hand, browsers that use the JavaScript V8 engine (e.g. Chrome, Opera 15 , Android Browser) and IE10 use a different format (see zipped MSDN docs error.stack).

Composite argument values. Before Firefox 14, function names were followed by argument values, which were converted to strings immediately before the at ( @ ) character in square brackets. When an object (or array, etc.) is rendered in the transformed form "[object object]" and therefore cannot be re-evaluated in real objects, scalar values ​​can be obtained (although) it might even be easier to use arguments.callee.caller.arguments in Firefox 14, just as the function name can be obtained from argements.callee. caller.arguments ). "undefined" is displayed as "(void 0)" . Note that string arguments with values ​​such as "@" , "(" , ")" (or in filenames) are not can be easily transmitted, relying on the fact that liniya will be broken into components. This is a lesser issue in Firefox 14 and up.

Different browsers set this value at different times. For example, Firefox sets it when the Error object is created, whereas PhantomJS only sets it when Error is run, and the zipped MSDN docs also appear to match the PhantomJS implementation.

The following HTML markup demonstrates the use of the stack property.

   Sample Batch Tracking  

Assuming the above markup is stored in the Windows file system named C: example.html , an alert window will be generated with the following text:

From Firefox 30 and up with column number:

 trace @ file: /// C: /example.html: 9:17b @ file: /// C: /example.html: 16:13file @: /// C: /example.html: 19:[email protected] file: /// C: /example.html: 21: 9 

Firefox 14 to Firefox 29:

 trace @ file: /// C: /example.html: 9b @ file: /// C: / example.html: 16a @ file: /// C: /example.html: [email protected] file: /// C: /example.html: 21 

Firefox 13 and earlier will display the following text:

 Error ("myError") @: 0trace () @ file: /// C: /example.html: 9b (3,4, " n  n", (void 0), [object-object]) @file: /// C: /example.html: 16a ("first call, first argument") @file: /// C: /example.html: [email protected]: /// C: /example.html: 21 

Starting with Firefox 30, the code error stack is displayed in Function () and eval Calls () < / code> now generate packages with more detailed information about the line and column numbers of these calls. Function calls are displayed using "> Function" , and evaluation calls are displayed using "> eval" .

  try {  new function ('throw new error ()') ();} catch (e) {  console.log (e.stack);}}Try {  eval ("eval ('FAIL')");} catch (x) {  console.log (x.stack);}} 

You can also use the // # sourceURL directive to name the revocation source. See also "Debug Assessment Sources" in the debugger documentation and this blog post.

What Is Batch Tracking?

As always, let's start by defining the stack trace.

A stack trace is a list of functions that lead to a specific point in a program.

A stack trace is essentially a breadcrumbs for your software. You can easily see the stack trace in JavaScript by including the following in your code:

javascript error stacktrace

 console.trace (); 

And you get a batch trace.

But what does batch tracking actually look like? Let's take a look at this now.


Method required but not implemented.