We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".
Related
Due to the safety rules of the same-origin policy (SOP), i am unable to load certain local files when opening an index HTML-file directly with a browser. Using a "live-server"-plugin works fine, as all the files in that case are "on the same server". I need to distribute the website as a client-side only app - A folder and html file to be opened with your browser. Solutions to the problem always seem to require setting up a server. Is there any way to avoid that, and keep everything on the client?
I am making a mathematics e-book, that i want to distribute as a website people can download. I want it to be client-only and a download, since if it were to become popular, then i wouldn't be able to afford running the server (as i would be studying at that time). I have chosen html and javascript over EPUB, as they are much more powerful, and allow for tons of interactivity (and much more efficient development).
So far i have a browser.html file, that loads individual pages with JQuery .load(). This browser.html file has both html, and javascript. The CSS is in an external file. The individual pages have many pictures, that are also stored locally on the server. As the pages are contained in subfolders, the picture URL's go out into their parent folder, and into the assets folder, like: ../../../Assets/Chapter1/Talopgaver og intuition/Misc\F\solsystem.png. I use custom-elements (shadow-DOM) to handle various complex aspects such as questions, answers, along with certain other things too. Other than JQuery, i also make use of Math-Jax, and a "polymer" library that helps with cross-browser support of custom-elements. All the pages in a certain chapter are loaded in the start, and then put into a array (this makes it fast to scroll through pages as you often do in books). They (as strings) are each modified slightly to automate certain tedious parts of development.
I have tried to open the browser.html file on chrome, firefox, internet-explorer, and edge. They all load the html that browser.html inherently contains (properly styled even), but none of them load any external pages. Interestingly, one of the images used in the browser.html file still works (i would think that would be a local file too, not?). If have tried turning off calls to ajax or external CSS, but nothing changed. I have searched for other people with similair problems, but all the answers just reccomended setting up a server.
When loading the page with a live-server plugin, the result looks something like this:
browser.html page opened with "live-server" visual studio code plugin by Dey, Ritwick
When opening the browser.html page directly using chrome, it looks like this:
browser.html page opened directly with chrome
The error i get (after having removed an ajax .get() call) isn't particularily descriptive: simply "Failed to load resource: net::ERR_FILE_NOT_FOUND" from "platform.js:1". Even if turn off the call to start loading pages, it gives me excaclty the same error messages.
Looking at the network reports, with live server it looks very ordinary. without it's pretty weird. It says it takes hours to load browser.html, even though that clearly isn't the case. It fails loading platform.js, after using 22 seconds trying. The networks report looks a bit more healthy when turning off the call to load pages. It gives up loading platform.js faster (8 seconds), yet still supposedly takes hours to load browser.html.
Though it shouldn't ultimately be neccesary, i have linked the entire browser.html document below, along with an example of a page it might load (the example in the first picture above).
browser.html. Too big for a stackexchange code-block embed
Page in previous picture (page 37)
Any help is appreciated!
EDIT: Main problem seems to be the loading of pages using JQuery.load(). Even on a simple testing website that operation is just not possible without running on a server.
I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2
I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too
I have a few JS files which I need on every page in my admin panel, like: functions.js, login.js, ...
I combine all those files (and minify them) into one file using gulp: admin.js
Two days ago, I have made a new function called "changeTicketStatus", but there's one problem: cache.
Whenever someone visits my website, the new function does not work yet.
When they visit http://website/js/admin.js manually in the browser, they do see the new function.
When they check via sources (in chrome dev tools), they do not see the function.
Since we are using CloudFlare for caching, I thought this might be the problem, but we already purged all cache on CF and it is still not working.
The people who are trying to visit my website have already cleared their cache too. It does work in private mode (incognito), so I guess it should be something cache related... I just think it's really weird that even after clearing their cache, the function's still not appearing in dev tools.
I would really appreciate it if someone could help me. I'm out of ideas, I really don't know how to fix this.
Kenny
Can you add a random querystring to end of include script
for example:
instead of <script src="app.js"></script>
use this <script src="app.js?v234123"></script>
This will solve your problem about caching.
We're having a strange problem that we can't seem to find a cause for. What seems to happen is the javascript and css bundles no longer load on the page.
When we initially navigate to the page everything seems to be working fine. After two page refreshes the page loads without any css and the javascript files are loaded incorrectly. Navigating to the javascript file in the browswer shows it loaded like this:
‹������ì}{·Ñàÿú°£÷È)JNÚk„ö#[ÊEï9–Î’›·§ªéŠ\I›P\–»´¬Ôêg¿™Á¯,vIÊŽÓ÷ëéÓ˜`�ƒù…Áöç6ÔçêYQTe5OgêÍ—ý/ûPÝ«ªš
¶·/³êÜ–õGÅu‚µŸ³Ûy~yU©/v?Þ‚ÿû£:¹É«*›÷ÔÁtÔÇJ/òQ6-³±ZLÇÙ\ýpp¢–5¯®ço»º9/·]Ûç“â|û:-Ôö‹ƒçû/÷±ËíüBu«ÛYV\¨ŸÿÏ"›ßªáp¨:ý"ŸfãN¢þ¹¡Tu5/nÔ4»Qûóy1ïvÜÔþÚ)Õ¦oÒãÑ<ŸUjžýc‘ϳÒ#ë$w.ÓQ•SÕÝÔð:‹2SÐ>Uoà÷›t®ÞdóëÕfÿbÚÿù Î&yÕí¨Nrºsfõ®R8ö®i…ê[õ…úÿÃÂ9}Œ¾NÔ»wŠ×‚é=ªÁ§¯ù§/°åãDõþ“w3zÜÿºÿXsuË›Íiðww]]-ùfccûsÄûù„7PðÿÓ2Gä÷.
b•JÜþ¦SÒt¶?ómKlò!Gøñ‰ýƒ
ŸöÍRš†ÛÛêùñ±:yµûòøàäàð¥:~}ttø
fq|U,*øßÀ®ÃÍÍMÿº€YNó_ç4«DCx/D7L¿˜ûÓq×Ò6n¼l{n\Œ×Ù´êæYZeû“u;¯#µ®Á0ûo ÎËôH~h�õcvþK^¸îÔ#un‚oжÓ3õ(~e•áêûÁf¬æ¡¬G5Tñ–UаÞU¼ÓS¼€ÚÅyNajŸF書é"Ê&ý²ºd§ØàL=�"qÔ×TÀ ªÅ|ªþ© ÇAªigÜñA™¶éÈ#{¼p”W4Ú<ûJu•êÿÔ×¼EÓŽ¡-Ø—ýt’½½NG£ô†¨kT–[b{k¦›]/&°ú§CODÝñbžâ¿8ýŒÒÉ$£j86÷y“誺ÊKú´ÙÅ&}#7PUÐë#{Õ|‘©»DôužŽ~ƒÂ¸t³ú‚Γ>ìÅËËlÞÝì—‹Ù¬˜W}Æ
a ƒá2«Nòëöc×Âï)7SŽ}3BðfWŒ#O2ÒÍBì=½ 4âXƒÄô¶a#fHpôe£<ôÔ±wžOÇ'p–TÓ„ívg“ì×y¥ÚWét
The entire page is like that.
My best guess is that somehow the files are being compressing twice and the browser is only decompressing once. I don't understand why on initial page load everything is working correctly.
Notes
We've tried setting debug = true and debug = false in the config, which has not seemed to work.
Our dev and local environments seem to work fine but prod and staging environments do not work.
The web config files are identical between environments except for connection strings.
It would be great if someone could help us out. Even better if it's just something easy and stupid to fix.
Thanks in advance
So I got something working, it appeared that somehow one of the javascript bundles had duplicated (kind of a weird process as we have internal nuget packages containing bundles along with the web application also containing budles...). I'm not sure why this was causing the strangeness in the files being delivered, but once I removed the duplicated bundle it appears there is no longer an issue.