CDN asset caching problem after deployment

Hello, I’ve been getting reports from some users that they are seeing a blank white screen when loading our site after a recent deployment on https://www.humio.com, until they refresh or clear their browser cache.

I’ve checked and made sure our headers are set to public, max-age=0, must-revalidate. I also went back and cleared the build cache and redeployed, but after reading through some previous posts on this, it seems that will only clear the build cache alone, and not invalidate the CDN cache?

What else can I do to invalidate our site’s previous assets on the CDN after our recent deployment, as well as ensuring this does not happen for future deployments?

Not sure if it helps, but here is x-nf-request-id that I currently see in my headers:
x-nf-request-id: f4e5bfd8-0744-479c-8a8e-39b5e6a84712-65889

Thanks!

Hmm, the headers are only for serving content - they have no effect on the build environment. You can definitely get bad assets in cache, but that is a pretty rare situation unless you’ve been swapping hostnames between sites.

Looking at that specific request_id, it seemed a normal enough serve:

  • returned HTTP 200 status,
  • seems to have been sent in full,
  • matches in size with most sends for that same content around the same time.

…so I guess…something happened in the browser to prevent it from loading anything else?

Hard to say in that case, since all we have is the server side logs. Probably best to try to (get an affected user to…) get a HAR file instead of just the request id if possible: https://toolbox.googleapps.com/apps/har_analyzer/

…though even that might not show exactly WHY the browser failed to load some subsidiary asset, it also might - so is the best starting place I can think to suggest.

Thanks for the response and looking into this. I checked back with someone on my team that was able to reproduce this and he gave me the HAR capture. It’s a large file - he said it failed 10 times in a row with refreshes, until he cleared his site data and got a successful load.

I loaded it in G Suite’s HAR Analyzer but wasn’t quite sure what to look for. Here it is on a shared link:

I’ve now got more reports of users experiencing a white blank screen when loading our page until clearing their cache. One of them provided this to help troubleshoot:

The FetchEvent for "https://static.ads-twitter.com/uwt.js" resulted in a network error response: the promise was rejected.
workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://static.ads-twitter.com/uwt.js","error":{}}]
    at o.makeRequest (https://www.humio.com/workbox-v4.3.1/workbox-strategies.prod.js:1:3983)
DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Node cannot be found in the current page.
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/workbox-v4.3.1/workbox-core.prod.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/workbox-v4.3.1/workbox-precaching.prod.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/workbox-v4.3.1/workbox-strategies.prod.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/workbox-v4.3.1/workbox-sw.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
webpack-runtime-1a68363287de6fbd3346.js:1 GET https://www.humio.com/component---src-templates-general-page-entry-js-12af072187f64ae0714d.js net::ERR_ABORTED 404
(anonymous) @ webpack-runtime-1a68363287de6fbd3346.js:1
component---src-templates-general-page-entry-js @ app-640d6d483740b8504ffb.js:1
(anonymous) @ app-640d6d483740b8504ffb.js:1
(anonymous) @ app-640d6d483740b8504ffb.js:1
Promise.then (async)
(anonymous) @ app-640d6d483740b8504ffb.js:1
loadPage @ app-640d6d483740b8504ffb.js:1
(anonymous) @ app-640d6d483740b8504ffb.js:1
Promise.then (async)
UxWs @ app-640d6d483740b8504ffb.js:1
s @ webpack-runtime-1a68363287de6fbd3346.js:1
n @ webpack-runtime-1a68363287de6fbd3346.js:1
t @ webpack-runtime-1a68363287de6fbd3346.js:1
(anonymous) @ commons-023c646a03bb863e736c.js:1
webpack-runtime-1a68363287de6fbd3346.js:1 Uncaught (in promise) ChunkLoadError: Loading chunk 17 failed.
(error: https://www.humio.com/component---src-templates-general-page-entry-js-12af072187f64ae0714d.js)
    at Function.e (https://www.humio.com/webpack-runtime-1a68363287de6fbd3346.js:1:3357)
    at Object.component---src-templates-general-page-entry-js (https://www.humio.com/app-640d6d483740b8504ffb.js:1:109898)
    at r.loadComponent (https://www.humio.com/app-640d6d483740b8504ffb.js:1:99030)
    at https://www.humio.com/app-640d6d483740b8504ffb.js:1:96942
(anonymous) @ webpack-runtime-1a68363287de6fbd3346.js:1
component---src-templates-general-page-entry-js @ app-640d6d483740b8504ffb.js:1
(anonymous) @ app-640d6d483740b8504ffb.js:1
(anonymous) @ app-640d6d483740b8504ffb.js:1
Promise.then (async)
(anonymous) @ app-640d6d483740b8504ffb.js:1
Promise.then (async)
UxWs @ app-640d6d483740b8504ffb.js:1
s @ webpack-runtime-1a68363287de6fbd3346.js:1
n @ webpack-runtime-1a68363287de6fbd3346.js:1
t @ webpack-runtime-1a68363287de6fbd3346.js:1
(anonymous) @ commons-023c646a03bb863e736c.js:1
The FetchEvent for "https://static.ads-twitter.com/uwt.js" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ workbox-routing.prod.js:1
workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://static.ads-twitter.com/uwt.js","error":{}}]
    at o.makeRequest (https://www.humio.com/workbox-v4.3.1/workbox-strategies.prod.js:1:3983)
n @ workbox-core.prod.js:1
makeRequest @ workbox-strategies.prod.js:1
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/workbox-v4.3.1/workbox-routing.prod.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
gtm.js?id=GTM-TG9DK94:537 GET https://static.ads-twitter.com/uwt.js net::ERR_FAILED
Re @ gtm.js?id=GTM-TG9DK94:537
$l @ gtm.js?id=GTM-TG9DK94:616
(anonymous) @ gtm.js?id=GTM-TG9DK94:536
db.i @ gtm.js?id=GTM-TG9DK94:494
gb @ gtm.js?id=GTM-TG9DK94:495
hb @ gtm.js?id=GTM-TG9DK94:495
(anonymous) @ gtm.js?id=GTM-TG9DK94:502
db.i @ gtm.js?id=GTM-TG9DK94:494
gb @ gtm.js?id=GTM-TG9DK94:495
c.a @ gtm.js?id=GTM-TG9DK94:494
Eb @ gtm.js?id=GTM-TG9DK94:513
db.i @ gtm.js?id=GTM-TG9DK94:494
gb @ gtm.js?id=GTM-TG9DK94:495
hb @ gtm.js?id=GTM-TG9DK94:495
(anonymous) @ gtm.js?id=GTM-TG9DK94:502
db.i @ gtm.js?id=GTM-TG9DK94:494
gb @ gtm.js?id=GTM-TG9DK94:495
sb @ gtm.js?id=GTM-TG9DK94:503
tb.o @ gtm.js?id=GTM-TG9DK94:504
Dc @ gtm.js?id=GTM-TG9DK94:523
cd @ gtm.js?id=GTM-TG9DK94:625
nd @ gtm.js?id=GTM-TG9DK94:525
e @ gtm.js?id=GTM-TG9DK94:596
(anonymous) @ gtm.js?id=GTM-TG9DK94:493
(anonymous) @ gtm.js?id=GTM-TG9DK94:597
(anonymous) @ gtm.js?id=GTM-TG9DK94:596
Xj @ gtm.js?id=GTM-TG9DK94:597
Zj @ gtm.js?id=GTM-TG9DK94:599
ln @ gtm.js?id=GTM-TG9DK94:632
kn @ gtm.js?id=GTM-TG9DK94:631
mn @ gtm.js?id=GTM-TG9DK94:634
a.push @ gtm.js?id=GTM-TG9DK94:636
Zj.a.push @ js?id=AW-778999307:203
Ge.updateGtmMacros @ otBannerSdk.js:7
ht.Init @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
o @ otBannerSdk.js:7
Promise.then (async)
r @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
l @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
Promise.then (async)
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
l @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
(anonymous) @ otBannerSdk.js:7
Show 9 more frames
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/app-640d6d483740b8504ffb.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/component---node-modules-gatsby-plugin-offline-app-shell-js-c1d1163580b94df298ae.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/webpack-runtime-1a68363287de6fbd3346.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/commons-023c646a03bb863e736c.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.humio.com/styles-aba36db7ed96e8b89245.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

I’m also noticing some of the files that users have said were getting 404’s have different cache-control settings then the one I specified in my netlify.toml. For example in the linked HAR, you can see this file with a different cache-control setting:

*Edit - humio.com files also have a longer age than I noticed on other headers. Some as high as 64067

I also found this post that is making me think this has something to do with service workers. I disabled my ‘gatsby-plugin-offline’ last week thinking it had something to do with this issue, but I didn’t realize there was further config needed to actually remove the service worker (I guess it was still lingering around after I disabled the plugin).

I’m trying this now to see if it will resolve it - will likely deploy in a bit this afternoon.

Hmm, that HAR file seems to be broken in some way - I can’t really browse it in the normal way using the har analyzer tool (same page I linked). Sorry but I don’t understand the format well enough to know what is wrong, but perhaps you could email us one in the helpdesk since I know you’re a customer with access via support@netlify.com - or even ping me as @fool in our shared slack (not sure what it is called on your side, but we are large customers of yours and folks on your team like mgr and grant are active in the channel) - and we can talk a bit more about it there?

However, from the messages you shared, I see several 404’s for files that are indeed missing:

https://www.humio.com/component---src-templates-general-page-entry-js-12af072187f64ae0714d.js net::ERR_ABORTED 404

this looks like maybe a problem when there is a weird situation in the local cache (which matches up well with the symptoms you share), written up in detail here: [Support Guide] Why do I see “Uncaught SyntaxError: Unexpected token <” errors? How can I use chunking or versioning for my assets at Netlify?

Are you doing any of the techniques mentioned there to prevent users with old sessions from trying to load old assets (or recovering gracefully if they do)?

Sorry - I missed a few of the messages you’d sent in succession! Let me know how deregistering the service worker goes - that does seem like a likely culprit.

Re: the HTTP response headers you mentioned:

cache-control public,max-age=31536000,immutable
age 6768

that seems odd since we’d not set that header.

Ah, I see that you do in your custom headers definitions. We strongly recommend not changing our default caching, as explained here: https://www.netlify.com/blog/2017/02/23/better-living-through-caching/ .

Thanks for all of the help @fool! I’m trying to get some feedback from affected users since I deployed the update that removed the service worker for gatsby’s offline plugin. They are in a different timezone and not likely to respond before tomorrow morning though.

Regarding the HAR file - I did link a redacted version, maybe that’s causing issues. I’ll email the support team with a reference to this post and the original file, as you suggested.

Regarding the custom caching header definitions - I believe I did have some last week, but removed them Friday after finding that same post you linked. Now I’m only adjusting our headers to improve our Mozilla Observatory scores with the following:
Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"

Hi @fool - I emailed the support team as you suggested but got a canned response saying it will be auto-deleted thinking I’m on the free plan (I don’t think I am…).

Hi there! Thanks for contacting Netlify support.

It looks like you are a member of a team on a free Netlify plan. For free plan customers, we provide support inside our community forums where you can ask just about any question.

(This ticket will be automatically closed.)

I also looked for you in our shared Slack channel MeetHumio (searched for @fool), but didn’t find you there. In case it helps, here is another link to a smaller HAR file (an alternate test he ran) that will hopefully work:

Okay, sorry for all the posts in succession, but I wanted to share an update that I think resolved the issue. It looks like I had a badly formatted netlify.toml for my header directives. Once I fixed that I now see the appropriate age, cache control, and csp policies I set:

Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"
X-Frame-Options = "ALLOW-FROM https://app.storyblok.com"
cache-control = "public, max-age=0, must-revalidate"
content-security-policy = "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'; img-src https: data:"

I’m guessing that I can probably remove the cache-control and allow Netlify’s default to take over?

The service-worker may have also contributed to the issue, not sure there - but I’m hoping this issue is now resolved. Thanks again for your help @fool.

Hi, @jsjophlin, I didn’t find any tickets (open or closed) in our helpdesk which match the email address used for this community account. If you use the same email address for the helpdesk that you use to log into Netlify that should prevent the auto-close from occurring.

If you want to private message that to one of our support staff we’d be happy to find out why the auto-close occurred.

I also suspect the service worker may have been part of the issue. When I visited the site just now a previously installed service worker for this domain name was disabled/deleted.

It’s great to learn the issue is resolved and if there are any questions, please let us know.

Last but not least, Humio is an amazing service and I personally want to thank your team for creating such intelligent, useful software. Humio still wows me and I’ve been using it for over a year now. :+1:

1 Like

You’re right, I just realized I have a different email for my github account which logs me into Netlify. Thats likely the reason for the ticket issue. Thanks for checking, and sorry for the trouble on that one.

I’m glad y’all are able to make such good use of Humio! I shared your feedback with the team :slight_smile:

2 Likes