We have an application using React and lazy loading of components (with <Suspense>, lazy(() => import('...')), etc.).

So when a user is on the route /foo and navigates to /bar (which is lazy loaded), the browser downloads the resource of the related component, for example BarComponentPage-af4d5f00.js (the af4d5f00 is the hash of the file which changes on every build) to render the new page.

Now, imagine this scenario:

• The user is on the /foo page.
• On our side, we make a new release of the application and publishes it. Thus, the hashes of compiled files change.
• Now, the user navigates on /bar page. Naturally, the browser tries to download the corresponding resource – BarComponentPage-af4d5f00.js – but this file does not exists anymore (replaced by BarComponentPage-[some other hash].js), preventing the user to see the page (and see our ErrorBoundary instead).

How do you manage this kind of scenario?

We implemented something in our ErrorBoundary where we detect this kind of error (looking for an error with Failed to fetch dynamically imported module...).
If it is the case, we display a dedicated error message saying the version of the current user is outdated and provide a button to reload the page (so the browser fetches the new index.html, with the new released application and thus the good resources hashes).
It works, but it’s not really user friendly.

Thanks