Skip to content

fix: recover stale dynamic imports after frontend releases - #1802

Open
jekabs-karklins with Copilot wants to merge 8 commits into
developfrom
copilot/swap-5749-auto-reload-on-stale-import-fail
Open

jekabs-karklins with Copilot wants to merge 8 commits into
developfrom
copilot/swap-5749-auto-reload-on-stale-import-fail

Conversation

Copilot AI commented Sep 15, 2026 •

Copy link
Copy Markdown
Contributor

Description

This pull request addresses the issue of stale dynamic imports after frontend releases.

Motivation and Context

Our users experienced broken functionality after the new release of the frontend was made.
With this fix, upon the error of reading dynamic module it will check if the build number has changed. If yes it will immediatelly reload the window.
image

Otherwise the snackbar with error will be displayed
image

Changes

  • Added "no-cache" headers to index.html and build-version.txt in the server configuration to prevent caching of these files.
  • Implemented a new DynamicImportErrorSnackbar component to show a snackbar with a retry button when a dynamic import error occurs.
  • Added a global event listener for 'vite:preloadError' events. If the build version has changed, the page is reloaded. Otherwise, a 'dynamic-import-error' event is dispatched.
  • Replaced the standard React lazy function with a custom implementation that retries loading a component when an error occurs. This ensures that if a dynamic import fails because the file is not found (due to a new release), the import is retried until it succeeds.

How Has This Been Tested?

Fixes Jira Issue

https://jira.ess.eu//browse/swap-5749

Depends On

Tests included/Docs Updated?

  • I have added tests to cover my changes.
  • All relevant doc has been updated

Co-authored-by: jekabs-karklins <58165815+jekabs-karklins@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix auto-reload for stale dynamic import failures after release Recover stale dynamic imports after frontend releases Sep 15, 2026
@jekabs-karklins jekabs-karklins changed the title Recover stale dynamic imports after frontend releases fix: recover stale dynamic imports after frontend releases Sep 15, 2026
@jekabs-karklins
jekabs-karklins marked this pull request as ready for review September 15, 2026 12:15
@jekabs-karklins
jekabs-karklins requested a review from a team as a code owner September 15, 2026 12:15
@jekabs-karklins
jekabs-karklins requested review from ellen-wright and removed request for a team September 15, 2026 12:15

@Scott-James-Hurley Scott-James-Hurley left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to test this locally?

Comment thread apps/frontend/src/components/App.tsx Outdated
const { enqueueSnackbar } = useSnackbar();

useEffect(() => {
const showError = () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be called showPageLoadError or something more descriptive?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Comment thread apps/frontend/src/index.tsx Outdated
import * as serviceWorker from './serviceWorker';
import './i18n';

const DYNAMIC_IMPORT_ERROR_EVENT = 'dynamic-import-error';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already declared in App.tsx. Is there a way to declare it just once?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

Comment thread apps/frontend/src/index.tsx Outdated
.then((version) => {
buildVersion = version;
})
.catch(() => {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This catch statement doesn't do anything. It could be useful to log that an error happened whilst trying to fetch the build version.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea 👍

@jekabs-karklins
jekabs-karklins removed their request for review October 1, 2026 14:39

@joeshannon joeshannon left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a nice change

return response.text();
};

let buildVersion: string | undefined;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to check I understand this is it the case that this value is cached in the user's browser?

Does this not run every time the user opens the application? If that is the case would it actually be possible for a stale version number to be in this variable?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: auto-reload once when a stale dynamic import fails after a new release

4 participants