CSS Going Wacky In Production App

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.

Have you tried cache busting?

I’d bet on an intermittent CDN delivery issue.

1 Like

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?!

2 Likes

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?

Was following up on this, I’ve never used the appcache package in my app. Should I be? Is it deprecated now?