87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
// Global chunk loading error handler
|
|
export function setupChunkErrorHandler() {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
// Handle chunk loading errors
|
|
window.addEventListener('error', (event) => {
|
|
const error = event.error;
|
|
|
|
// Check if it's a chunk loading error
|
|
if (
|
|
error?.name === 'ChunkLoadError' ||
|
|
error?.message?.includes('Loading chunk') ||
|
|
error?.message?.includes('Failed to fetch')
|
|
) {
|
|
console.warn('Chunk loading error detected:', error);
|
|
|
|
// Prevent the error from being logged to console
|
|
event.preventDefault();
|
|
|
|
// Show a user-friendly message
|
|
const message = document.createElement('div');
|
|
message.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: #dc2626;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
z-index: 9999;
|
|
max-width: 300px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
`;
|
|
message.innerHTML = `
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span>⚠️</span>
|
|
<span>Application update detected. Please refresh the page.</span>
|
|
</div>
|
|
<button onclick="window.location.reload()" style="
|
|
margin-top: 8px;
|
|
background: #dc2626;
|
|
color: white;
|
|
border: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
">Refresh</button>
|
|
`;
|
|
|
|
document.body.appendChild(message);
|
|
|
|
// Auto-remove after 10 seconds
|
|
setTimeout(() => {
|
|
if (message.parentNode) {
|
|
message.parentNode.removeChild(message);
|
|
}
|
|
}, 10000);
|
|
}
|
|
});
|
|
|
|
// Handle unhandled promise rejections (which might include chunk loading errors)
|
|
window.addEventListener('unhandledrejection', (event) => {
|
|
const error = event.reason;
|
|
|
|
if (
|
|
error?.name === 'ChunkLoadError' ||
|
|
error?.message?.includes('Loading chunk') ||
|
|
error?.message?.includes('Failed to fetch')
|
|
) {
|
|
console.warn('Unhandled chunk loading rejection:', error);
|
|
event.preventDefault();
|
|
|
|
// Reload the page after a short delay
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auto-setup when this module is imported
|
|
if (typeof window !== 'undefined') {
|
|
setupChunkErrorHandler();
|
|
}
|