javascriptwebpackconsole.logcode-splitting

Webpack code splitting: ChunkLoadError - Loading chunk X failed, but the chunk exists

I've integrated Sentry with my website a few days ago and I noticed that sometimes users receive this error in their console:

ChunkLoadError: Loading chunk <CHUNK_NAME> failed.
(error: <WEBSITE_PATH>/<CHUNK_NAME>-<CHUNK_HASH>.js)

So I investigated the issue around the web and discovered some similar cases, but related to missing chunks caused by release updates during a session or caching issues.

The main difference between these cases and mine is that the failed chunks are actually reachable from the browser, so the loading error does not depend on the after-release refresh of the chunk hashes but (I guess), from some network related issue. This assumption is reinforced by this stat: around 90% of the devices involved are mobile.

Finally, I come to the question: Should I manage the issue in some way (e. g. retrying the chunk loading if failed) or it's better to simply ignore it and let the user refresh manually?

2021.09.28 edit:

A month later, the issue is still occurring but I have not received any report from users, also I'm constantly recording user sessions with Hotjar but nothing relevant has been noticed so far.

I recently had a chat with Sentry support that helped me excluding the network related hypotesis:

Our React SDK does not have offline cache by default, when an error is captured it will be sent at that point. If the app is not able to connect to Sentry to send the event, it will be discarded and the SDK will no try to send it again.

Rodolfo from Sentry

I can confirm that the issue is quite unusual, I share with you another interesting stat: the user affected since the first occurrence are 882 out of 332.227 unique visitors (~0,26%), but I noticed that the 90% of the occurrences are from iOS (not generic mobile devices as I noticed a month ago), so if I calculate the same proportion with iOS users (794 (90% of 882) out of 128.444) we are near to a 0,62%. Still small but definitely more relevant on iOS.

Solution
  • TLDR:

    Why is it happening? Cache
    Can you solve it completely? No
    Can you solve it partially? Yes
    Should/Must you solve it? Not really

    This happens most of the time because the browser caches the index.html (and a few other css and js) file of the webapp. Try turning off caching for the file by adding these to the nginx config:

    location ~* \.html?$ {
  expires -1;
  add_header Pragma "no-cache";
  add_header Cache-Control "no-store, must-revalidate";
}

    If you want to trigger a reload on the client side for this kind of errors, try this on your frontend app's router:

    router.onError(error => {
  if (/loading chunk \d* failed./i.test(error.message)) {
    window.location.reload()
  }
})

    Caution: possibility of infinite reload if reload does not resolve the issue

    Credit: Read more technical steps here on this article that already explains a lot more than I planned to write. Learn more about different chunk errors here.

    Facts

    My assumption on OPs description: