fix: handle Firefox dynamic import error message in stale chunk detection

https://sonarly.com/issue/16162?type=bug

The stale chunk lazy-loading error handler only detects Chrome's error message format ("Failed to fetch dynamically imported module") but not Firefox's ("error loading dynamically imported module"), causing Firefox users to see a broken page instead of an automatic reload after deployments.

Fix: **Fix:** Extended `checkIfItsAViteStaleChunkLazyLoadingError` to detect dynamic import errors from all major browsers, not just Chrome.

The function previously only checked for Chrome's `"Failed to fetch dynamically imported module"` message. Firefox uses `"error loading dynamically imported module"` and Safari uses `"Importing a module script failed"`. Added both to a `DYNAMIC_IMPORT_ERROR_MESSAGES` array and use `.some()` to check all patterns.

Updated the test file with dedicated test cases for each browser's error message format.

**Files changed:**
- `checkIfItsAViteStaleChunkLazyLoadingError.ts` — Added Firefox and Safari error message patterns
- `checkIfItsAViteStaleChunkLazyLoadingError.test.ts` — Added test cases for Firefox and Safari error messages
This commit is contained in:
Sonarly Claude Code
2026-03-18 23:31:03 +00:00
parent 2f095c8903
commit 29b407d829
2 changed files with 31 additions and 2 deletions
@@ -1,7 +1,7 @@
import { checkIfItsAViteStaleChunkLazyLoadingError } from '@/error-handler/utils/checkIfItsAViteStaleChunkLazyLoadingError';
describe('checkIfItsAViteStaleChunkLazyLoadingError', () => {
it('should return true when error message contains the Vite stale chunk error text', () => {
it('should return true for Chrome dynamic import error', () => {
const error = new Error(
'Failed to fetch dynamically imported module: /some/module.js',
);
@@ -11,6 +11,24 @@ describe('checkIfItsAViteStaleChunkLazyLoadingError', () => {
expect(result).toBe(true);
});
it('should return true for Firefox dynamic import error', () => {
const error = new Error(
'error loading dynamically imported module: https://app.twenty.com/assets/chunk-abc123.js',
);
const result = checkIfItsAViteStaleChunkLazyLoadingError(error);
expect(result).toBe(true);
});
it('should return true for Safari dynamic import error', () => {
const error = new Error('Importing a module script failed.');
const result = checkIfItsAViteStaleChunkLazyLoadingError(error);
expect(result).toBe(true);
});
it('should return false when error message does not contain the Vite stale chunk error text', () => {
const error = new Error('Some other error message');
@@ -1,3 +1,14 @@
// Chrome: "Failed to fetch dynamically imported module: ..."
// Firefox: "error loading dynamically imported module: ..."
// Safari: "Importing a module script failed."
const DYNAMIC_IMPORT_ERROR_MESSAGES = [
'Failed to fetch dynamically imported module',
'error loading dynamically imported module',
'Importing a module script failed',
];
export const checkIfItsAViteStaleChunkLazyLoadingError = (error: Error) => {
return error.message.includes('Failed to fetch dynamically imported module');
return DYNAMIC_IMPORT_ERROR_MESSAGES.some((message) =>
error.message.includes(message),
);
};