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:
+19
-1
@@ -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');
|
||||
|
||||
|
||||
+12
-1
@@ -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),
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user