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.
Related
Recently I started having Issues with the Google Tag Manager.
I can't track it to a Tag or a Trigger (activated and deactivated individually to check).
The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn't change the situation and since the code worked for a while (some 30minutes) I don't expect a direct relationship between the new tag and the error.
All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX
Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set("style",{ya:4});
The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the Wordpress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.
If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch
Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.
Thanks
Very interesting, and yes, you're right, the error in the minified code makes no sense:
Let's try something different. First, just export your GTM container (the workspace that is synced with prod/live) as a JSON file in Admin section.
Open the file, look for something like set("style" See if you can find that Wb. Well, don't expect it to be Wb. I guess GTM minifies the code. It may be some weird chat bot, or something like that. From there, you'll be able to find the tag or variable that causes the issue.
I didn't look too deep into it, but that part of code looks sophisticated enough to be a part of the core container code. Actually, we can check it right here, on SO cuz it uses GTM too, let's do that.
Yes, SO has identical code. Looks like it's indeed core GTM. Well, there's a tiny probability that when you built the prod library last time, GTM had an issue and it deployed an artefact.
Try making a new workspace, make a nonsensical change in it and publish it to production. See if it lets you publish. Then see if that fixes the issue.
Now, if it doesn't then the next thing I'd try is trying to re-importing the exported JSON, forcing GTM compare the import to what's there and find differences.
Now if that shows no issues, then I would make a brand new container, load the config in it and try replacing the gtm loading script to see if the error still happens. It sounds like you can do that. If you can't, look a plugin like redirector to redirect the request to a different container.
Still the error with the new container? How about if you load a completely empty container? Got any errors?
There's a very slim chance that your front-end deploys one of a few vars GTM uses too, thus conflicting with your GTM. But it's very unlikely. Why would you use something like google_tag_manager or google_tag_data in the global scope...
If nothing helps and only the empty container doesn't give errors, then... well, then make a list of all tags firing along that error and start disabling them one by one. Or use breakpoints to narrow it down to the tag/library that causes it.
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.
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
I just launched a website that uses version 2.2 of the FlexSlider library. If you go to that page, you'll see a Javascript error with an unhelpful message:
TypeError: 'undefined' is not a function (near '...Animate(t,true)}}}})(jQuery)...')
or if you're in Firefox:
TypeError: (intermediate value)(...) is not a function
...{u=""},3e3)}};r.flexAnimate=function(t,n,o,u,a){if(p&&r.pagingCount===1)r.direct...
The thing is, if I put FlexSlider in debug mode — that is, use the unminified version of the script — the error doesn't occur.
I've run the minifed version through javascriptlint.com, and it doesn't point out anything too bad.
I've gotten a prettified version of the minified script in Sublime Text; its matching-brace-highlighting fails to match several sets of braces, some of which are siblings of each other, but I can't find any syntax errors by sight in their vicinity.
I've deleted whole sections out of the file until the brace matching worked again to try to narrow down where the error is, but there's not just one section or small identifiable combination of sections I can delete (except for the one that constitutes most of the file) that makes it work.
The thing is, even with this error, that script works. It works completely; it just throws an error. But if I turn on my CMS's Javascript aggregation feature as I should, it makes every script after this one fail.
I know a one-off answer of where my syntax error is isn't very helpful to the wider community, but are there any techniques or services or programs I can use to help me narrow down what's actually going wrong here?
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.