How do I get more debug information out of i18next? - javascript

I have upgraded an app from using webpack-i18n for translations to using i18next (13.1.5). For the most part, everything worked, but on one particular page, none of the text from one of my ejs files is loading. The js file for that page makes a few calls to i18next.t under specific circumstances, and if I trigger them, the text for those Strings is successfully retrieved and displayed. The ejs file still appears to be getting processed, because the structure and the images are all correct.
I can't find any errors that explain what's happening and I'm not sure how to find out what's going on with i18next on this page. I have debug: true on for i18next, and I can see the entire config in the browser console. This includes the resources, with a complete listing of the translation key/value pairs. So it seems like i18next is finding all the Strings and loading them up. But any reference to them in this one ejs file is coming up with nothing.
We only have en translations, and in the i18next config, the lng and fallbackLng are both en. So I don't think it's possible that the app thinks it needs to use a different language for this one template file, and is looking for an alternate translation that doesn't exist. I would imagine that would also prompt it to error in some way.
There are no errors in the console. So, how do I find out more about what i18next thinks is going on in this situation? I can't tell if it is actually hitting and evaluating these calls in the ejs file and thinks that null is the correct response, or if it's somehow not evaluating any of these Strings at all, or if it's actually hitting some sort of an error and the errors just aren't reaching me.
It's more puzzling since the other pages work, and even the Strings from the js file for this page are working. I can't find anything different between the ejs files that work and the one that doesn't. It seems unlikely that an issue with one of the referenced Strings, or some of them, would cause all of the Strings in the file to fail, especially if it did so silently. Thoughts? I'm completely new to i18next and not great with Javascript in general, so I'm at a loss how to debug further.

Related

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.

Opencart - cant change js files. adding kind of reddots at the end

firstly very sorry, I cant find out what the real problem is.
I ll try to explain.
My client given code which is developed using opencart and nitropack.
he includes common.js in header, it is basic js file with some ajax calls, UI events etc which has 1297 lines(no formating in code, lots of blank spaces, blank lines etc).
my real problem is, when I made any changes in this file,
the browser console is throwing error invalid or unexpected token.
I checked the common.js file in browser console, seeing that some kind of reddots added at last of the file. I just added a alert() at the begining of file. nothing else.
very sorry, dont know how to explain more detaily.
This is the first time I have seen this kind of issue.
when I removed the alert(), the error gone.

Telling if a requested file is Javascript

I have a program that logs every GET/POST request made by a website during the page load process. I want to go through these requests one by one, execute them, and then determine if the file that was returned is a Javascript. Given that it won't have a .js ending (because of scripts like this, yanked from google.com a minute ago), how can I parse the file gotten from the request and identify if it is a Javascript file?
Thanks!
EDIT:
It is better to get a false positive than a false negative. That is, I would rather have some non-JS included in the JS-list than cut some real JS from the list.
The javascript link that you referred does not have a content type, nor does it have the js extension.
Any text file can be considered javascript if it can get executed which can make detection from scratch very difficult. There are two methods that come to mind.
Run a linter on the file contents. If the error is a syntax error or a Parsing error, it is not javascript. If there are no syntax error or parsing error, it should be considered javascript
Parse the AST (Abstract syntax tree) for the file contents. A javascript file would parse without errors. There should be a number of AST libraries available. I haven't worked with JS AST, so can't recommend any one of them but a quick search should give you some options.
I am not sure but probably a linter would also run AST before doing syntax checks. In this case, running AST seems like a lighter option.
The easiest way would be to check if there was anything identifying javascript files by their URI, because the alternatives are a lot heavier. But since you said this isn't an option, you can always check the syntax of the contents of each file using some heuristic tool. You can also check the response headers for its content-type.

jQuery blatantly ignoring the path I give to .getScript()

I have a script, TemplateLoader.js which loads 2 Mustache templates, and renders them on the page (or at least that's the goal).
My directory structure:
COMP266
Unit 4
scripts
mustache.min.js
TemplateLoader.js
PageUsingTemplateLoader.html
Inside of TemplateLoader (the object), I have the following chunk to load Mustache, and render the templates:
$.getScript("./scripts/mustache.min.js", function() {
$('head').html( Mustache.render(headTemplate, data) );
$('body').html( Mustache.render(bodyTemplate, data, uniqueBodyTemplate) );
});
This however, yields the following error in the developer console:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR): GET - http://localhost:63342/COMP266/Unit%204/mustache.min.js?_=1450903391318
Oddly, it seems to have dropped the script folder completely from the path.
I decided to play around, so I changed the fetch path to (duplicating the script folder):
./scripts/scripts/mustache.min.js
But this yields:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR): GET - http://localhost:63342/COMP266/Unit%204/scripts/scripts/mustache.min.js?_=1450903743022
Now it's listening! Unfortunately, this is obviously the wrong path.
I have no idea how to go about debugging this. It seems like jQuery is selectively dropping the scripts folder. That seems ridiculous, but just to make sure, I searched through the jQuery source, and couldn't find anything that would be doing the observed filtering of the path.
It's currently local, not hosted.
Can anyone give me a hint about what's going on here?
It turns out the issue was caused by me forgetting that my template added the mustache script (from a previous test), resulting in it being added twice.
I don't understand how this affected it though. It's not like the jQuery addition was succeeding while the template addition was causing the error, since changing the jQuery fetch path caused a direct change in the error message.
Sure enough though, when I removed the script import from the template, it worked.
I really don't understand how this caused a specific folder to be dropped from the path though.

Socket.io failed to load websocket.js

I tried to use socket.io in an simple app.
When it is calling the following js file:
node_modules\socket.io\lib\transports\websocket.js
The following line failed to load (It didn't really fail. It actually returned some empty result and failed some later codes using protocolVersions):
var protocolVersions = require('./websocket');
I debugged a little bit and it seems that the intention of this line is to load the following js file:
node_modules\socket.io\lib\transports\websocket\index.js
However because there is also a "websocket.js" (the file being run) under the "transports" folder, the require functions always tries to load "websocket.js" instead, and return some unexpected results.
I changed the folder name to "websockets" and call "require('./websockets')" instead, and it fixed the problem. However this is a shared library I am not feeling comfortable messing up its codes.
I am trying to understand why this problem happened this way and what should be the best way to work around it. I am sure this piece of codes has been well tested before released.
You probably already noticed that I am using backslash '\' to separate the path. Yes I am running it on Windows! Will that create any difference?
Thanks!

Categories

Resources