Develop Reference

Issue with Google Tag Manager implementation. "Uncaught TypeError: Wb.set is not a function"

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.

Getting more information from “SyntaxError: Parse error” message in PhantomJS/CasperJS

I have a long CasperJS script. When I run it I get:
phantomjs file.js
SyntaxError: Parse error
Is there a way to get some more information about the error.
At least a line number? or any hint at all?

Try run the file.js with node, so for your example:
node file.js

It's not possible to determine this in PhantomJS itself. The documentation on phantom.onError says:
This is the closest it gets to having a global error handler in PhantomJS
And this doesn't catch the syntax error. If you try to run it with the --debug=true option, you will see a lot of debug messages, but the final error has still the same amount of information.
Another thing that I tried was to use a second PhantomJS script which reads the original script and tries to eval it. The phantom.onError event is triggered in this case, but the trace argument is empty.
The good thing is that PhantomJS/CasperJS scripts are just JavaScript, so you can paste them to http://jslint.com/ or run a dedicated jslinter on them to see where the problem lies. There are some options that you have to mark on the site or otherwise you will get a lot of errors:
add phantom to the global variables box,
enable node.js mode and
tolerate "everything" (or those things that you actually want to tolerate)

I spent a whole 8hrs on this to find a trick for this problem. The trick is to run "phantomjs" and type 'require "path_to_js_file"'. I used 2.1.1 version of phantomjs. Likely 2.2 also works.
Then there will be a stack trace that shows which line is the offender. You won't see this in testem output.
In my case, if you define a property twice for an object, it will work for chrome, firefox etc, but not phantomjs. Lint might help but there are >5K lint errors for the project I work on and it is practically impossible to see what's wrong. Also the particular problem is likely hidden under the same bucket of "javascript strict mode violation". Nodejs didn't complain this either.

Catch JavaScript errors from compressed files

I catch JS errors by subscribing to window.onerror event, so if someone catches 'undefined variable' error, I send it to server for debugging purposes.
As you know this event return 'message of error', 'url' and 'line' where error occurred.
The problem are in compressed files.
If file is compressed, all the code goes in one line and it's big problem to determine the exact place of error.
Is there any solution for this problem?

JavaScript compressors usually do two things:
Remove all unneccessary white-space (“unneccessary” in terms of syntactical validaty).
shorten variable names, if possible. This applies to local variables, i.e. those which are not in the global scope or members of an object.
There are some other optimizations, such as function inlining, but these are usually not so problematic.
As for the first point, you can run the code through one of the many JavaScript source formatters. This should give you a pretty readable JavaScript file.
As for the second point, the obfuscation is usually not reversible. If “speaking” variable names like width, height or whatever have been changed to a or b, you cannot know what they were meant to express in the first place.
If this problem applies to an open source product, you can usually download the sources and try to reconstruct the problem with them.
If it's closed source, and only “beautifying” the code doesn't help, you have to write a bug report to the vendor.

No. There is no way to "unminify" a JavaScript include for the purposes of error logging.
Your best bet is probably to log the Error Type in the hope that this will help you debug the problem.
If you really want to get to the specific line number you would have to remove the minimization and rely on browser caching to attain performance.

I think you could use source maps...
Its a file that can be generated when minifying, and can be used to map the line/character of the minified file to the original source.
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

The best answer regarding this question I found here
Malyw suggests yo use Uglify with max-line-len option and sourcemaps.
That's probably the best solution to identify exact place in code

Is it possible to compile WebDriverJS without minimizing the code by Google Closure Compiler?

I need to modify WebDriverJS for my purposes. The compiled source is giving me a hard time debugging, though. Describing function names and comments would help me out big time! So I was wondering whether it is possible to compile WebDriverJS without minimizing it's content.
The build.desc for the JavaScript compilation is using js_binary which is using Google Closure Compiler. Anyone of you know how to compile it and preserve functionnames and comments? This would rather be a merge of all sources then a compilation.

Thanks to Chads Post in "Potential differences between compiled and uncompiled Javascript" I've taken a deeper look at the flags of closure compiler.
--compilation_level=WHITESPACE_ONLY preserves function and variable names
--formatting=PRETTY_PRINT doesn't remove linebreaks
--formatting=PRINT_INPUT_DELIMETER gives me a better overview in which file to search for the source
Unfortunately I still couldn't figure out how to save the comments, but thats just a small problem since I can look them up in the source code.
Update:
Seems like the compilation_level doesn't remove the goog.required-calls. I've got to remove them somehow, because the script doesn't work with them.
Update 2:
I've removed all goog.require($mod) and goog.provide($mod) calls and defined Objects where needed (typically to find right after the // Input $int comments). It's working now.

Javascript/Appcelerator function used before defined warning

I'm getting errors like this using Appcelerator/Javascript:
[WARN] JavaScript compiler reported "'getDefaultServerFromDatabase' was used before it was defined." at includes/server.js:36
I honestly didn't know that was an issue with Javascript. Will it cause problems or is it just good practice? I much prefer to have the main function first in the file then the functions it calls after that. Should I switch this around?

It has not caused any differences in behavior in our application.
The only issue it causes us is to fill up the build screen with those warnings so we may miss important warnings or have to scroll to find compile errors.