Every now and then I have users (who send screenshots) of our Meteor app’s CSS going crazy in production. It will jumble together several different templates/pages of our single page app and show all the modals in a huge mess. It seems as though it’s not processing one or more of the CSS files correctly (or not at all).
It only seems to happen for a few users and also when the server is very busy. The weird thing is our app’s production JS bundle is configured with caching using AWS Cloud Front and I assume the CSS files all load the same way.
It’s hard to test though to see if it’s perhaps the Bootstrap CSS file going missing, our app’s main CSS file, another one… anyone else ever seen this?
Do you include CSS via rel Tags? Maybe it’s a (relative) path issue then. Can you reproduce the bug using --production flag? Last alternative If not, can you build the app and extract it locally, install and run the app as node app? There must be a way to reproduce this issue.
The problem is it works fine 99% of the time. And always works 100% of the time in development. It’s only some production users who see the issue, and very intermittently. I’m wondering if it could be an Internet issue. Or a CDN issue delivering the CSS file.
I believe those few users would need to be on a first visit or first visit after a bundle update or you don’t cache the bundle files on the client side.
I wrote an example of PWA implementation with file cacheing which you might want to give a try in case you don’t already cache the Meteor bundle files. This keeps track of bundle versions. Meteor-PWA-Explained/3_Service_workers.md at master · activitree/Meteor-PWA-Explained · GitHub
Would you mind replying whether in Production you get bundle.js and bundle.css from browser cache or you have no-cache set?!
I’m not sure if I’m using the browser cache. And if I’m not sure, I assume I don’t use the browser cache. How do I go about doing that - can you point me to any resources you know of that are good?
Turns out it is Bootstrap’s CSS file failing to load for certain users. Usually in countries like Malaysia. Sometimes in England. I add Bootstrap 3.4.1 via npm, which assumably grabs the CSS files via their CDN.
I had a user send over their console and it shows:
ERR_CONNECTION_TIMED_OUT for maxcdn.bootstrapcdn....bootstrap.min.css
I’m thinking it’s likely users working from home and/or some network that has weird firewall settings. The weird thing is, for one or two users experiencing the issue, it works in Safari for some users but not in Chrome.
We had multiple users in Malaysia (of all places) report the same issue.
We updated the Bootstrap CSS URL to the newer CDN and format on Bootstrap’s website (after asking a user in Malaysia to test it first in their browser) to https://cdn.jsdelivr.net/npm/bootstrap@3.3.6/dist/css/bootstrap.min.css. It loaded fine and now all users no longer have a problem.
We never got to the root of looking through all their browser extensions, but it seems strange that multiple different users couldn’t access the same URL in the same country. Yet, on Safari it would work (for at least one user apparently, perhaps they were mistaken).
