RequireJS Load timeout for modules: error detail - javascript

I need to expose better error detail from requireJS "load timeout for modules" errors so I can actually debug to find out what is causing the load timeout.
I'm unable to get the error to appear on my development machine, but roughly 10% of our daily visitors are experiencing this error in the production environment (track.js is being used to gather these errors for visibility).
The error is being thrown for my main.js file ("load timeout for modules: main") - the application entry point. I've added the errback callback to try to log the error detail here but this error doesn't seem to hit this callback so it seems as though everything main.js is requiring is fine.
I've added a global override for requirejs.onError and all I get here is the module name (main.js) and an error code of timeout.
I've used madge and have verified that there are no circular dependencies.
I have optimized the build using r.js optimizer.
I have set waitSeconds: 0 in require config (by my understanding should disable the timeout completely)
How can I find out what module that is being required somewhere down the line is actually causing the timeout? Anything further to go on would be very helpful - I'm finding this incredibly hard to track down. Thanks.

you can set waitSeconds in config of requireJS. By default it's 7 seconds. I do not know the exact answer to your question but this can be a temporary solution. Probably someone from users has a very slow internet. and it is not enough 7 seconds.
You can test in in Chrome devTools -> Network tab -> Throtling selector. And select for example "2G regular 450 kb/c". I assume that you will see this error. Also, this error sometimes occurred when I used CDN.

from James Burke himself. .....However if the difficulty is that your "main" is taking a long time to load, that script holds the requirejs.config() call with waitSeconds, and it was loaded via data-main, then the requirejs.config() call may not be called in time for it to be useful. For that issue, you can pass waitSeconds using "requirejs as initial config".
<script>var requirejs = { waitSeconds: 0 };</script>
<script src="require.js" data-main="main"></script>
This worked perfectly.

Related

TestCafe: ReferenceError: Cannot access 'ModuleName' before initialization

Im using testcafe for testing our page for now bout 1 year.
On the latest version of our page, the devs used preloading and critical CSS for performance optimizations.
Since then i get an error on page startup:
ReferenceError: Cannot access 'ModuleName' before initialization
Is there a problem with TestCafe if a a page uses rel="modulepreload" to import js?
The DOM shows, that this module is part of a js-file that is preloaded like this.
<link href="//cdn.test.local/version1/dist/script/something.static.js" rel="modulepreload">
-> link wont work since the page is on a local site.
Content of js-file:
import{ModuleName}from'./classes/something.class.ajax.js';export const someAjaxPlugin=new ModuleName;
This Error does only occur if i run the page in testcafe... is that a bug?
Any one an idea what i can do so my tests will run again?

Did Puppeteer get an update recently? Because it's been breaking a lot

I do some stuff on repl.it and recently I've been getting error involving chrome r594312 and a failed download, and I resolved it by just starting a new repl and copying the code (I often don't care about the reasoning, just if it works at the end).
ERROR: Failed to set up Chromium r818858! Set
"PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.
Something along the lines of this with a couple more errors. Now I thought this was just a me problem until I found out the puppeteer demo was broken too. https://try-puppeteer.appspot.com/ I mean, I fixed the issue temporarily for myself but I'm kinda curious what the reasoning for it is. this is no longer the case, but the error on the demo was
Error running your code. TimeoutError: Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r594312

Is Components.utils.unload asynchronous in Firefox bootstrapped extensions?

I noticed an occasional error logged on disabling the bootstrapped addon.
function shutdown:
function shutdown(data, reason) {
forEachOpenWindow(unloadFromWindow);
Services.wm.removeListener(WindowListener);
Components.utils.unload('chrome://myaddon/content/main.jsm');
}
Sometimes, it came up with an error on disabling the addon:
NotFoundError: Node was not found main.jsm:112
Is it that the Components.utils.unload() is asynchronous?
1- Is that the case or is it due to some other issue?
2- If that is the case, how should it be dealt with?
3- Can the Components.utils.unload() be added to (processed in) the JSM that it is removing (removing itself)?
4- Any other suggestions?
Update:
Next test:
Disable -- no error
Enable/Disable -- 1 error (above)
Enable/Disable -- 2 error (above)
Enable/Disable -- 3 error (above)
Enable/Disable -- 4 error (above)
Enable/Disable -- 5 error (above)
Now that is strange ....
Update 2:
I found the problem.... typo/error in one of the listeners so it was NOT removed on shutdown() and with every subsequent enable/disable one more listeners was added...that was why the number of errors increased each time :)
Is Components.utils.unload asynchronous in Firefox bootstrapped extensions?
Cu.unload is not asynchronous. But also, it might not do what you expect.
It will just instruct the module loader to forget about it. Any references to the module instance from other code will still work, i.e. the module instance will be alive until all other references to it are gone and it can be garbage collected.
In that regard it can seem like unload is kinda asynchronous.
3- Can the Components.utils.unload() be added to (processed in) the JSM that it is removing (removing itself)?
Yes, the module can Cu.unload on itself. Code after Cu.unload will still work (see also the first part of my answer).

Is there any way to detect 404 erros in AMD loaders?

I'm working on a framework-like structure that uses curl.js as script loader. Modules can be located in either the App or Core directory, which allows me to override Core modules easily from the app. I had a server-side script to search these directories and return the first found file but then I decided that the client-side should be able to work without any help from backend, so now I have a function that tries listed directories until one of them has a file.
After a while I realized that I don't have any way to differentiate between 404 errors and syntax errors. I want the loader to fail if there is an actual error in code but in case of 404 it should just look for the next file and finally fail if no file can be found.
So, is it possible to detect if a script failed(in curl.js, AMD or generally in js) due to 404 and not because of errors in the loaded code?
Because of security concerns, browsers don't provide much information when scripts fail. In fact, IE refuses to even call the "load" event at all. The only information an AMD loader has is whether the define() was called or not.
There might be a way to detect some types of script errors, if you place your own global function call at the beginning of the script file. You can check if that function has been called. You can't detect SyntaxErrors that prevent parsing of the script, but you can detect other types of errors.
It might be possible to return the exact error to the errback function ( curl([]).then(callback, errback)) when the error happens while executing the factory function. Have you verified if this works or not?

Multiple Different Javascript Errors Can't Duplicate

I am using a window.onerror=function(msg, url, linenumber) to send myself an email when a javascript error occurs. When I use my webpages (IE, FF, CHRM, ect) I do not receive any errors. However I am getting all kinds of errors emailed to me from other users that I cannot duplicate. I am probably getting an error happening on 1% of the users visiting the website so 1/100 page loads I get an error. Here are some:
Syntax error: http://www.google-analytics.com/ga.js
Error loading script: http://www.google-analytics.com/ga.js
Error loading script: https://seal.thawte.com/getthawteseal?host_name=XXX&size=M&lang=en
$("input.datepicker").datepicker is not a function
Uncaught SyntaxError: Unexpected token
Object doesn't support this property or method
Uncaught TypeError: Object [object Object] has no method 'dialog'
Syntax error: http://seal-cencal.bbb.org/logo/XXX
Error: Permission denied to access property 'toString'
What I don't understand is the website 99% of the time is running without any errors and I can't seem to get an error to happen for me on any browser I use. I am also tracking what browsers the users are using who send these errors and it's random, all sorts of browsers and they are all newer FF, IE versions mainly.
How do you stop syntax errors on external code (but they work most of the time)...?
How come google and thawte scripts fail to load some people so often but never happens to me, is there a way to have a fallback to this?
The datepicker one, I can only assume its error out because jquery UI failed to load because jquery loads (otherwise it wouldn't get called inside a document ready call) but I even have a localhost jquery UI script fallback include and it still happens..
Does anyone have a suggestion for me to help me further debug/fix these problems. The thing is, the website gets a lot of hits I am getting about 1 error emailed to me every minute (and it's not the same user causing each error). If you have any suggestions let me know (remember the code and website work fine 99% of the time so I don't think its a syntax problem on my end anywhere).
Thanks for your time.
How do you stop syntax errors on external code (but they work most of the time)...?
You can't really. Without a more detailed message investigation is quite impossible. Notice that sysntax errors might be caused by something else as well, their origin might not be in the external script. I doubt Google Analyticts serves invalid scripts.
How come google and thawte scripts fail to load some people so often but never happens to me
They might use adblockers or similiar against those. Not everyone wants his web usage logged by google. Also, some proxies might ignore/block them, like intranet firewalls.
is there a way to have a fallback to this?
You could try serving them from your own domain as a proxy. Or just ignore them, I don't think your app really needs a fallback for those.
The datepicker one, I can only assume its error out because jquery UI failed to load as jquery still loads
Yes, that sounds likely. Or it just didn't load before it was called.
but I even have a localhost jquery UI script fallback include and it still happens..
Localhost? I guess you mean a copy on your server. Still, it depends on the details how the script and its fallback version are loaded.
Does anyone have a suggestion for me to help me further debug/fix these problems.
A stack trace would help a lot to locate the user's action that caused the error.
Most of the errors on the list are caused by errors in browser extensions.
If you really want to log JavaScript errors, it is best you also log the stack trace if available. I also log details about functions that execute and the arguments sent to it. When the error is caught I cut X amount of stuff from the stack I built and send that up as well.

Categories