Fix Vite stale chunk lazy loading error. (#12984)

This PR fixes a bug that happens when a user tries to load an app chunk
that is not available anymore, because a new build happened between the
moment the user loaded its page and the moment he's requesting a chunk.

Example : 
- The user loads the settings profile page
- He leaves his computer for a few minutes
- The CI triggers a new front build
- The user comes back and tries to navigate to the accounts settings
page
- The page he has loaded only knows the chunk of the previous build and
tries to request it
- Since the server that serves the front chunks has the new chunks it
sends an error
- The code that lazy loads the chunk throws a `TypeError: Failed to
fetch dynamically imported module`

The fix is to trigger a `window.location.reload()` if this error is
thrown. While this is a temporary and imperfect fix it should at least
provide a better UX for the user.

See follow-up issue : https://github.com/twentyhq/twenty/issues/12987

After : 


https://github.com/user-attachments/assets/edd7eda0-cdfa-4584-92bd-2eec9f866ab3

Fixes https://github.com/twentyhq/twenty/issues/12851

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Lucas Bordeau
2025-07-01 15:02:03 +02:00
committed by GitHub
parent 9fbff82bf1
commit e832a3a609
2 changed files with 11 additions and 0 deletions

View File

@ -1,5 +1,6 @@
import { AppErrorBoundaryEffect } from '@/error-handler/components/internal/AppErrorBoundaryEffect';
import { CustomError } from '@/error-handler/CustomError';
import { checkIfItsAViteStaleChunkLazyLoadingError } from '@/error-handler/utils/checkIfItsAViteStaleChunkLazyLoadingError';
import { ErrorInfo, ReactNode } from 'react';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
import { isDefined } from 'twenty-shared/utils';
@ -36,6 +37,13 @@ export const AppErrorBoundary = ({
// eslint-disable-next-line no-console
console.error('Failed to capture exception with Sentry:', sentryError);
}
const isViteStaleChunkLazyLoadingError =
checkIfItsAViteStaleChunkLazyLoadingError(error);
if (isViteStaleChunkLazyLoadingError) {
window.location.reload();
}
};
const handleReset = () => {

View File

@ -0,0 +1,3 @@
export const checkIfItsAViteStaleChunkLazyLoadingError = (error: Error) => {
return error.message.includes('Failed to fetch dynamically imported module');
};