What is the source of this intermittent Webpack ChunkLoadError in Firefox?

user_53537 0
Viewed 243

I work on a website that has an Angular front end that lazy loads js chunks via webpack (via angular-cli).

Some of our users on Firefox (and only Firefox) have intermittently run into an issue where one of the js chunks will not load, leading to a ChunkLoadError. When they clear their Firefox cache and try again, Firefox will (correctly) load the previously unloadable js chunk. I've obtained HAR files from multiple affected users, and seen the pattern for myself. For example, in the screenshot I've shared, the single file shows -1 Bytes transferred, status code 0. It seems as if Firefox didn't even try to send a request, but that may be an artifact of caching. enter image description here

And here is a similar but slightly different HAR from another user. The bug manifests the same. Notice that in this case, there is a response, but still -1 Bytes transfered. enter image description here

I've seen other similar issues on StackOverflow (and other places) that talk about chunks vanishing due to deployment of new code, but that is not the issue here--the filename is the same before the clearing of cache and after, and these problems are not occurring after a deploy.

I have suspected extension or add-on (maybe some sort of js or ad blocker), but some affected users swear that they see the problem even when all of their extensions are disabled. Now, my best guess is some sort of issue with the caching system in Firefox itself, but really, that is just a random guess.

I know that this is not enough information to debug this issue, but I hope that maybe this will ring a bell for someone, and they can point me in the right direction. Of course, I've had zero luck reproducing this myself.

Here are two discussions (on our site) where users have been reporting the issue, including with some technical details:

https://boardgamegeek.com/thread/2800974/cant-open-forum-threads-firefox https://boardgamegeek.com/thread/2788693/specific-videos-page-immediately-redirects-me-empt

Some relevant technical details: We're on Angular 13.2.1, and Angular-CLI is using webpack 5.67.0. The chunks themselves are being stored on S3 and served via Amazon CloudFront. Firefox version vary by user, but the issue is happening in Firefox versions at least as recently as 96.

angular-cli angular webpack firefox
1 Answers

This is intriguing. A few things to check and confirm.

  1. So the app is broken on FF? And latest FFDeveloper?
  2. Any hacking of Webpack going on, or only Angular.json customizations?
  3. webpack-bundle-analyzer will show you visually where common.js is used and this module should be used in most, if not all, modules. Is every page attempting to load this and failing or just one?

I can see you've built a new bundle and it's loading fine... https://cf.geekdo-static.com/frontend/common.16f86e69f4e853a9.js where common.350630aacb80280c.js was the issue.

Seems to be resolved?

user_14402400
Related