To get as much as possible from my errors, I want to capture stack trace to display in the browser console and also to send it to an external logger service.
The first case works fine, when I console.error(myError) the source map file is interpreted correctly by the browser and the stack trace display relevant file names.
However, when I try to get the stack trace as a string with (new Error()).stack, the filenames are not relevant:
My Error
at applicationError (http://localhost:3000/static/js/main.chunk.js:29259:
at http://localhost:3000/static/js/main.chunk.js:1624:
at onError (http://localhost:3000/static/js/0.chunk.js:82415:3)
at apiCall (http://localhost:3000/static/js/0.chunk.js:82449:12)
at async http://localhost:3000/static/js/main.chunk.js:26165:21
at async App.componentWillMount (http://localhost:3000/static/js/main.chunk.js:246:5)
How can I get the "parsed" stack trace so I can send the relevant information to my logger?
I have seen these SO questions but, while the question seems relevant at first sight, none answer my question:
Javascript: debug stack trace with source maps
How to use source map on the JS stacktrace?
Related
I just got some big project and with error in console. there are many more than scripts used at that page but error shows very little information. there are 25 scripts loading at page. To give you an idea how many scripts they are you can see. :(
I have error in console but i can't find which original file, line number causing it. the error showing are in library. but i know it's not library bug it's caused by some other script. but this stack trace is very small. is there any tool or any other way where i can originally find from where it is originating.
let me know if further information is required.
If you click on link "amstock.js" you will be redirect to that file and directly in the line that was causing the error. Always the upper file is which causes the problem, but some times because of a previous one.
In adition, the error maybe cause by an asynchronous call that leaves your variable in null and fill it after the line of the error was call, or just you are trying to access a wrong variable. Check that line.
When catching an error, I want to get with the stack trace the actual code of the line that triggered the error.
Given that I have the path to the file and the line number throwing the error, what's the best way to also get the actual code of that line?
Beyond the obvious of "looking it up in the file", there are a few things you can do to get it automatically. Checkout the Tracekit project on GitHub. For errors it captures, it will do an AJAX request for the script and find the relevant lines in the text.
Alternatively, if you're looking for a way to handle this automatically, you should consider a service like TrackJS that will capture all the relevant scripts and apply sourcemaps for you. I am one of the original developers and I've used it on many projects to fix bugs ridiculously fast :)
I am finding it difficult to locate where an error occurs in javascript on a client I have no access to. Currently I trap the error with onerror and send the arguments to a log on the server.
Unfortunately the line number is no help because numerous javascript files get included, causing the line number to not correspond to anything I have access to.
So if I get something like "n is not defined", and n occurs many times in the function, I have no way to locate where it happened.
I have been trying to reference the code on the line throwing the error say "x=n * 5 + 4", then I could search for that code, but have had no luck referencing the actual code on a line from within javascript.
So how does one locate the line that threw the error in this situation?
client uses firefox only, if that matters.
I have no access to client
This is not one error I am stuck on, but working on how to track an error in this situation
Your best bet would be to use Firefox's debugger.
Open dev tools
Go to the debugger, select the .js file you want, and hit the little {} button in the bottom left (depending on version yours may be in a different location) -- this will prettify the JavaScript
Set breakpoints by clicking next to line numbers
From here on out you have to do this old-fashioned. Cast a breakpoint net around your trouble code, then keep narrowing down the lines until you find the occurrence that causes the error.
Of course, once you find the line it still won't be 1-to-1 with the original code, but hopefully the breakpoint exercise will at least reduce the scope of code/logic you have to dig through.
use your debugger to enable breaking on error. once you break, look at your locals for clues about your location. go up the stack and look at each frame.
you should be able to trace n up the stack and find out why it was null
the little {} that william suggested is also helpful
Within Google Chrome, I was wondering if stack traces will, in the future, provide mapping support. Currently, using source maps, throwing an error will provide the line number link to my TypeScript files, however... When calling the Error.stack, it gives me the JavaScript lines and files.
Here's a reference picture: http://puu.sh/4DTOG.png
As you'll notice, the actual line the error is on is linked to the TypeScript file, but the stack trace links to the JavaScript files.
This bug is fixed in chromium 42 :)
Cf https://code.google.com/p/chromium/issues/detail?id=357958 .
There is no inherent technical limitation. However I don't think it is planned. For reasons like, when the stack trace contains code that is not TypeScript (or lacks a sourcemap) etc.
I've built a custom logging utility which displays a Log Message and the DateTime. I would like to add the line number in the source code which called the function.
Is there a way to determine which line of the HTML source a particular javascript function was fired?
Having written a logging library (log4javascript) myself, I've considered this same problem and here are my thoughts:
The problem is that in order to get the information you want, you need an Error object that was created on the line in question. Creating an Error within your logging utility will only directly give you the filename and line number for the particular line in your logging utility code rather than for the line of code that made the logging call. The only way round this I can think of is parsing the stack property of the Error (or the message property in Opera), which has several problems:
the stack trace is only available in Mozilla, recent WebKit and Opera browsers
the stack trace is a string that varies from browser to browser, and may change format again without notice in future browsers, thus breaking the parsing code
throwing an Error and parsing its stack trace for every log call will add a significant performance overhead.
For the purposes of log4javascript, I decided it wasn't worth implementing, but for your own needs you may decide it's worthwhile.