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.

Prevent React JS from overriding scripts

I'm not that experienced with JavaScript, however, I am familiar enough to navigate and write my own code.
I've been spending a lot of time trying to figure out an issue I'm getting with HTTP requests, only to recently realize that it's likely a specific script other that might causing this.
It looks as though it may be React JS.
I'm not familiar with this.
(I did look it up, and searched a lot for any no-conflict options)
Basically, from the moment I execute "XMLHttpRequest.prototype.open" to monitor incoming HTTP requests, all of my scripts appear to be passing through a React JS file.
I assume this, because I'm logging the steps and results of my script in the browser's console, and they are all being attributed to "commons-##########.js" from the moment I run that XMLHttpRequest.prototype.
I see this in the header of the commons-##########.js file:
/** #license React v16.4.1
* react-dom.production.min.js
*
* Copyright (c) 2013-present, Facebook, Inc.
The problem is that it appears to be affecting my own scripts from functioning properly.
Does anyone know why this might happen, and how it could be fixed?
I'd like my JS scripts to run without interference from React JS.
(It's not my own website, but a website I regularly use for business. The modifications are to assist me, nothing malicious.)
Thank you.
Please note that I'm aware that the commented portion I highlighted will not affect my code. I only put that to explain why I believe it's a React JS script that is causing the problem.
This is what the actual error looks like in the console (a portion of it):
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
a # commons-9702d5b….js:34
XMLHttpRequest.send (async)
XMLHttpRequest.send # VM14804:70
(anonymous) # commons-9702d5b….js:34
(anonymous) # commons-9702d5b….js:34
I've tried many methods, and I don't see any issue with why I cannot JSON parse the response, or do many other things.
Something about that code is interfering with my own.
The JS script is a long, minified file, so it would be difficult to pin down a lone offending portion of code.

I'm 99.99% sure the problem isn't with React. The commons-#.js file is the result of your scripts being bundled with any 3rd party libraries you're using (like React) into one file for efficient loading from a web server - it's standard practice, and very unlikely to cause any issues. The /** #license React v16.4.1 comment you're seeing at the top of the file is simply because the bundling process has been configured to retain license information in the output.

The problem is caused by JSON response that was received in wrong form from a server or was incorrectly transformed.
Unexpected token o in JSON at position 1
error means that [object ...] string (the result of coercion of an object to a string) was passed to JSON.parse. It's unknown where this error originates from. XHR requests can be checked in devtools Network tab to identify whether the problem was caused by wrong response, so it could be reported to API owner.
The problem isn't caused by React. React itself can't do anything like that, it's UI library. It doesn't use XMLHttpRequest in any way. The error is caused by some piece of code that uses both React and XHR. It likely can be debugged in this part of a stack:
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
The problem needs to be fixed by a party this code belongs to - website owner, another browser extension, third-party components you're using, etc.

debugging javascript console error

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.

PICARD_BRIDGE_CALLBACK variable javascript errors

When javascript errors are occuring on a client of my website, the error will be sent to the server and will be saved into a logfile.
Going through the file there are some cryptic errors, which I can't figure out at all:
Line: 1 ReferenceError: Can't find variable: ____PICARD_BRIDGE_ASYNC_CALLBACK____08597307465970516
Sometimes (but much more rarely) I also got:
Line: 1 ReferenceError: Can't find variable: ____PICARD_BRIDGE_EVENT_CALLBACK____08992069498635828
I am using: Jquery Mobile 1.4.5, Jquery 2.1.4 and the nativedroid 1 library.
On the server I am using Play Framework 2.4
Anybody got an idea what is going on?

I have seen this "cryptic" name PICARD_BRIDGE_ASYNC_CALLBACK as a default name for callback functions in kik.js. You can see examples of this file here and here
This javascript file is probably used in your client. It's used with Kid Cards.

Want to get a Javascript stacktrace/callstack when unhandled exception occurs

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.