I have a script that uses Raphaël, a Javascript library to work with SVGs. In my code I am doing something wrong because of that I am getting a warning from the library.
That warning comes from some line in the library. It would be great to trace the stack from when that warning occur to know where in my code is the line that causes the warning.
Using console.trace doesn't help, so I ask, is there a way to trace a warning that comes from a Javascript Library?
(PS: I looked into modifying the library to print stack traces, but that is just too hard.)
Edit:
The warning itself is:
"Unexpected value NaN parsing width attribute."
I would like to trace the error to know where in my code am I sending a NaN to a Raphael function.
If I'm right, your warnings are probably something like "Invalid syntax M,0,0" when you're trying to create paths (more details would be welcome) ?
If it is, then you can't have a stack trace because it's an SVG error (the SVG engine is telling that a DOM SVG element is erroneous, but it won't tell you when this node has been created).
Check the input that you're feeding into the elements that you are creating with Raphael.
Related
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 :)
Trying to learn React.js right now but I'm having a lot of trouble with syntax errors. It is not clear to me how to debug JSX when writing react.js code. A typical JSX syntax error will look like this on my console:
"Line 15" does not appear to correspond to any actual code. In my IDE it's a blank line right before my <script> tag. Expanding the error simply shows a couple dozen references to JSXTransformer.js.
When I google this issue, everyone says to simple install the React debugger, which I did, but it is useless when it comes to JSX syntax and won't actually start:
Others have suggested using debugger; calls in my scripts to call the Chrome debugger, which is sensible, but the JSX error somehow halts the script no matter where I put the call.
React has significant trouble with identifying the offensive lines, it's very likely the one before, in your case line 14.
For those still looking for a quick fix to the broader question posed in the OPs title, consider an inline debug statement in your JSX.
<span>{ console.debug('test') }</span>
This should output a message in your console either before or after the existing error you are attempting to locate. Move the above code up or down in your JSX then refresh and check your console again to narrow down on the location of the error.
It's not ideal but it works. This method will display the word 'undefined' in your resulting HTML so make sure you remove your debug code when you are done.
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
After compiling my JavaScript source with KJSCompiler (https://github.com/knyga/kjscompiler) I get this weird function wrapped around my code. If I try to include it in my live source code I get this error in the console "Uncaught ReferenceError: JSCOMPILER_PRESERVE is not defined ".
I thought that this problem occurred because I didn't add the "wrapper" in the JSON file of kjscompiler. After trying that it still occurs.
Does anyone have an idea how to fix this?
I came across this when using Closure Compiler directly via the Java API.
It seems to be caused by running the compiler in checks-only mode but with protect hidden side effects enabled. The late pass to remove protection of hidden side effects is skipped in checks-only mode.
I'm not sure about KJSCompiler specifically, but it might help to look at changing the compilation level to SIMPLE or ADVANCED, and/or how you might be able to control what checks and optimisations run to KJSCompiler, e.g. turning off CompilerOptions.protectHiddenSideEffects.
See https://github.com/google/closure-compiler/issues/1875
In addition to Steve S's answer:
set protectHiddenSideEffects after setting optimization level, as options.setProtectHiddenSideEffects(false); didn't work for me for GCC version v20180204 if I set it before setting CompilationLevel.
CompilationLevel.ADVANCED_OPTIMIZATIONS.setOptionsForCompilationLevel(compilerOptions);
//To remove JSCOMPILER_PRESERVE error: https://github.com/google/closure-compiler/issues/1875
compilerOptions.setProtectHiddenSideEffects(false);
Sometimes I get an error or an unhandled exception in a line in the jQuery UI js file. I know the problem was an empty or null object or property was passed to jQuery. For example in Chrome I get a 'Uncaught TypeError" error.
Doing some manual work I can find the culprit and I can do better error handling. This could take some time.
However I am looking for a fast automatic way to find the culprit by looking at the stacktrace when the exception occurred. Is there a modern browser which has this feature built in?
Or some JavaScript error handler which works across all the loaded js files in a global level?
I looked at this article but it seems I have to sprinkle printStackTrace() in all the targetted functions. I don't like this idea much if my code has many functions.
in webkit (what chrome or safari uses) debug tools, click the Scripts section on the top. then look for hexagon like icon on the bottom with the two vertical lines. clicking that will cause javascript execution to pause on an error. At the right you will see the callstack, where you can trace through everything.