I have observed a rather strange anomaly in a web application.
Tech stack:
Front-End: ReactJS
Back-End: .NET Core application + Kestrel
Behavior
The root HTML page of the application loads several key JS files required for creating the web app.
For some reason its possible that a given file of, say, 500 KB loads about halfway and is then executed.
An error can be seen in the console that an exception occurred on line so and so, indicating that the file has not loaded completely and is therefore corrupt.
Also, if this happens once for a user, on page refresh the browser will reuse the incomplete file from cache.
I know it would be extremely helpful if I could provide additional logs/network call headers etc but I do not have access to such at the moment.
I am guessing that the files are being served in some strange way as I would assume a browser should be aware of the total file size of the resource its requesting for, so it should be able to know when it does not load completely.
Related
Everytime I deploy an update to our web application customers ring in with issues where their browser hasnt picked up that index.html has changed and since the name of the .js file has changed they run into errors. Presumably because their index.html still points to the old javascript file which no longer exists.
What is the correct way to ensure that users always get the latest version when the system is updated.
We have a HTML5 + AngularJS web application. It uses WebPack to bundle the vendor and app javascript into two js files. The files contain a hashname to ensure they are different once released.
Some other information
I can never replicate this issue locally (and by that I mean in debug, on our staging site or our production site)
We use CloudFlare but purge the entire cache after release
We have a mechanism in JS that checks on page load or every 5 minutes to see if the version of our API has changed, and if so show up a "Please refresh your browser" message. Clicking this runs window.location.reload(true);
Our backend is IIS
If you need users to pick up the latest index.html when they load your site immediately after you've updated the file, make index.html non-cacheable. That will mean the browser, CloudFlare, and any intermediate proxies aren't allowed to cache it, and that one file will always be served from your canonical server.
Naturally, that has a traffic and latency impact (for you and them), but if that's really your requirement, I don't see any other option.
There are spins on this. It might not be index.html itself that isn't cacheable, you could insert another resource (a tiny JavaScript file that writes out the correct script tags) if index.html is really big and it's important to cache it, etc. But if you need the change picked up immediately, you'll need a non-cacheable resource that identifies the change.
I see this strange behavior (or may be I am missing something).
I have WebSphere 8.5. Deployed a EAR. Its working fine.
Instead of repacking and deploying every time for small change, I just copy the js and CSS files directly to the Websphere exploded folder and overwrite the existing files. I see the changes are getting reflected.
I just updated a JS file and added a couple jQuery functions and copied the file like above. Now when I refresh the page, I see the updated code (which is somewhere in the middle of the file). however the js file is not loading fully in all 3 browsers (IE8, Chrome and FF latest). It's getting cut off in the last 10 lines are so.
The file has 1784 lines. Not sure if there is a size limit on the browser side or WebSphere is tinkering with it or something else is going on. Any idea?
I did check the js file I copied to Exploded WebSphere folder. It has complete code.
Note that the page has a few more JS files (jQuery and other files) in addition to this one.
Edit:
I think WebSphere is keeping the size of the file somewhere (maybe?) and sending only that size every time, unless there is clean deploy or restart (?).
I removed a few lines of updated code. Now the browser loads, exactly that many number of additional lines of code. Once I remove my code completely, it loads the full file. (This is not an issue with the code though).
Is there a caching that I need to clear in WebSphere?
Check this page it Hot deployment and dynamic reloading. In general it says that you may need to restart the application.
Also check, if application reloading is enabled, however I'm not sure if it is relevant for static files.
If reloading of classes is enabled and the polling interval is greater
than zero (0), the application files are reloaded after the
application is updated. For JavaServer Pages (JSP) files in a web
module, a web container reloads JSP files only when the IBM extension
jspReloadingEnabled in the jspAttributes of the ibm-web-ext.xml file
is set to true. You can set jspReloadingEnabled to true when editing
your web module's extended deployment descriptors in an assembly tool.
You can restart app from console as provided in comments or via wsadmin script.
<div id='calendar'></div>
Is the html tag that the fullcalendar uses to insert a calendar and do its magic. It's a great tool, but something weird is happening.
My calendar is created with events from the DB and all that stuff works well. Here's the issue...
Calendar on 2 pages - both work great on dev workstation.
Deployment - works on one page, but not on the other. The calendar div gets populated with some complex tables etc for rendering. Except this doesn't happen - ONLY on one page, ONLY on the production server - same browser. All the db stuff is there, pages coming back are identical other than the table stuff that gets inserted on my dev machine, but not when server from production. But again, the same control works just fine from prod on another page - stumped! Web server is IIS 7
Any thoughts or even wild speculations most welcome!!
Just to make it an official answer...
Commonly when something doesn't render in either a development or production settings but does in the other environment you're experiencing an absent resource. This is usually something along the lines of requiring the following:
<script type="text/javascript" src="..path/to/script.js"></script>
Since one location has the file in that location and the other doesn't, you can run in to scenarios where it works in one spot but not the other.
Easiest method to confirm this is to open the debugger in your favorite browser and use the "networking" section to determine if all the resources are loading correctly (and are resolved). Otherwise, chances are the page that's not working is getting a 404 (or other error) when trying to retrieve the file it needs and thus the page fails to operate.
I'm trying to fix a tricky JavaScript issue in a Liferay portlet (that also happens to run a large Flex app) and every time I make a change, I have to go back to the prompt and do an "ant deploy" on the portlet, then wait for it to deploy, then reload the page, then wait for the Flex app to load. Every time I try any minor change it takes 3-4 minutes for this whole process.
Is there a configuration or setting that will uncompress the JavaScript and allow me to directly edit the JS files on the server without re-deploying every time? I've read up some on "Developer Mode" but it doesn't seem to be working, and all the Liferay docs seem specific to Tomcat whereas I'm using JBoss.
If you are deploying a war file, just explode it in place (in the jboss deploy directory), so rather than having one compressed file called FlexPort.war, you would have a directory called FlexPort.war which would have all the exploded content from the original WAR file.
If you update JavaScript files, you might need to clear your cache in the browser, but otherwise it should take effect right away. If you update classes, you can cause a fast re-deploy by touch-ing the WAR/web-inf/web.xml file.
===========================================================
Not sure why you're not seeing the JS update, but try reproducing this sequence. It helps to have some browser tool like Firebug or Fiddler installed so you can see the response headers.
Retrieve the JS file directly into your browser. e.g. http://localhost:8080/js/admin/jquery-ui-1.8.12.custom.min.js
Make note of the Last-Modified response header.
Modify the JS file and save. (Make sure the filesystem timestamp of the file has changed)
Retrieve the JS file again. The Last-Modified response header should be incremented to the same value as the timestamp as the filesystem timestamp.
Make sure the HTTP response code is 200 and not 304 (Not Modified).
If you are still seeing the same timestamp after the file modification:
It could be browser caching (See 304 comment above)
I suppose Liferay might be caching all the content, so changes on the file system will not take effect until you redeploy the WAR. If this is the case, try *touch*ing the myportlet.war/WEB-INF/web.xml file which will cause the WAR to be redeployed. Not as efficient, but hopefully faster than reissuing the ant command.
A quickie google revealed this link about Liferay Static Content Caching. It seems Liferay may indeed be caching all this stuff in ehcache. If this is the case with your portlet app, you have 2 choices:
Turn off caching (in dev only, of course) by setting this property in your portal-ext.properties: com.liferay.portal.servlet.filters.cache.CacheFilter=false
If Liferay registers the JMX interfaces for ehcache, you may be able to surgically remove the target items from cache through JMX-Console or twiddle. With either one, once you figure out the exact operation, you can create a batch file to execute it on demand on the command line.
Exploding the war file didn't work out for me. I get around this problem by using a node.js script(an http static file server). What I do is when editing the JS I copy this script to the javascript folder inside the portlet project and fire up the server(You need to install node.js on your dev machine). Then I change the references of my JS scripts in the portlet to point to static server urls.
Eg:- In your liferay-portlet.xml,
<footer-portlet-javascript>/js/app.js</footer-portlet-javascript>
Changes to,
<footer-portlet-javascript>http://localhost:8888/app.js</footer-portlet-javascript>
After that I can just edit the files and view changes in the browser right away.
(You also have to set Access-Control-Allow-Origin header in the static file server)
I'm making an ASP.NET web forms web app. I've just started with the client side scripts. I'm planning to put quite a lot of JavaScript code in a file that will be loaded on each page. I want to know some general guidelines about when to start worrying about the size of the file, in consideration of the users and their page loading times.
The users will mostly be using Internet Explorer 7 and 8, but I suppose the script still will be cached after the first visit? If not, is there any way to make IE cache the file?
They'll be cached, like you suppose, after the first visit, so you don't need to worry unless it actually becomes an issue.