Improve application loading robustness and error handling on Chrome
Add a timeout to detect and handle Chrome loading issues, implement preloading attributes, and improve error reporting for failed React app mounts. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
This commit is contained in:
sebastjanartic
parent
725fb58385
commit
c3f50f869a
@ -101,13 +101,34 @@
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<script type="module" src="/src/main.tsx" defer></script>
|
||||
<link rel="preload" href="/src/main.tsx" as="script" crossorigin>
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
||||
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
|
||||
<!-- Replit script removed - caused scrolling issues -->
|
||||
|
||||
<!-- Debug script for deployment issues -->
|
||||
<script>
|
||||
console.log('🚀 go4.video loading...');
|
||||
|
||||
// Set timeout to detect hanging in Chrome
|
||||
let appLoadTimeout = setTimeout(function() {
|
||||
console.warn('⚠️ App taking too long to load in Chrome, forcing refresh...');
|
||||
const preloader = document.getElementById('app-preloader');
|
||||
if (preloader) {
|
||||
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading timeout</h2><p>Refreshing automatically...</p></div>';
|
||||
}
|
||||
setTimeout(function() {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
}, 8000); // 8 second timeout for Chrome
|
||||
|
||||
// Global callback for when app loads successfully
|
||||
window.appLoaded = function() {
|
||||
clearTimeout(appLoadTimeout);
|
||||
console.log('⏱️ App load timeout cleared');
|
||||
};
|
||||
|
||||
// Clear any cached service workers
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||||
@ -122,16 +143,17 @@
|
||||
console.log('✅ Window loaded');
|
||||
setTimeout(function() {
|
||||
const root = document.getElementById('root');
|
||||
if (root && root.innerHTML.trim() === '') {
|
||||
console.error('❌ React app failed to mount - root div is empty');
|
||||
root.innerHTML = '<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;"><div><h1>Error: React app failed to load</h1><p>Refreshing page automatically...</p></div></div>';
|
||||
const preloader = document.getElementById('app-preloader');
|
||||
if (preloader && preloader.style.opacity !== '0') {
|
||||
console.error('❌ React app failed to mount - preloader still visible');
|
||||
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading failed</h2><p>Refreshing automatically...</p></div>';
|
||||
|
||||
// Auto-refresh after 3 seconds
|
||||
setTimeout(function() {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
}, 2000);
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
window.addEventListener('error', function(e) {
|
||||
|
||||
@ -2,8 +2,20 @@ import { createRoot } from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
// Type declaration for global callback
|
||||
declare global {
|
||||
interface Window {
|
||||
appLoaded?: () => void;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('🎬 main.tsx starting...');
|
||||
|
||||
// Force immediate execution - no waiting for DOM
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('📄 DOM Content Loaded');
|
||||
});
|
||||
|
||||
// Disable Service Worker for now - can cause caching issues
|
||||
// if ('serviceWorker' in navigator) {
|
||||
// window.addEventListener('load', () => {
|
||||
@ -17,48 +29,70 @@ console.log('🎬 main.tsx starting...');
|
||||
// });
|
||||
// }
|
||||
|
||||
try {
|
||||
const rootElement = document.getElementById("root");
|
||||
console.log('🎯 Root element found:', rootElement);
|
||||
|
||||
if (!rootElement) {
|
||||
throw new Error('Root element not found');
|
||||
}
|
||||
|
||||
console.log('🚀 Creating React root...');
|
||||
const root = createRoot(rootElement);
|
||||
|
||||
console.log('🎭 Rendering App component...');
|
||||
root.render(<App />);
|
||||
|
||||
console.log('✅ React app mounted successfully');
|
||||
|
||||
// Remove preloader once React app has mounted
|
||||
setTimeout(() => {
|
||||
const preloader = document.getElementById('app-preloader');
|
||||
if (preloader) {
|
||||
preloader.style.opacity = '0';
|
||||
preloader.style.transition = 'opacity 0.5s ease-out';
|
||||
setTimeout(() => {
|
||||
preloader.remove();
|
||||
console.log('🎨 Preloader removed');
|
||||
}, 500);
|
||||
// Force immediate execution function
|
||||
function initApp() {
|
||||
try {
|
||||
const rootElement = document.getElementById("root");
|
||||
console.log('🎯 Root element found:', rootElement);
|
||||
|
||||
if (!rootElement) {
|
||||
throw new Error('Root element not found');
|
||||
}
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to mount React app:', error);
|
||||
|
||||
// Fallback error display
|
||||
const rootElement = document.getElementById("root");
|
||||
if (rootElement) {
|
||||
rootElement.innerHTML = `
|
||||
<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;">
|
||||
<div>
|
||||
<h1>Critical Error: React app failed to start</h1>
|
||||
<p>Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
|
||||
<p>Check browser console for details</p>
|
||||
|
||||
console.log('🚀 Creating React root...');
|
||||
const root = createRoot(rootElement);
|
||||
|
||||
console.log('🎭 Rendering App component...');
|
||||
root.render(<App />);
|
||||
|
||||
console.log('✅ React app mounted successfully');
|
||||
|
||||
// Call global callback to clear timeout
|
||||
if (window.appLoaded) {
|
||||
window.appLoaded();
|
||||
}
|
||||
|
||||
// Remove preloader once React app has mounted
|
||||
setTimeout(() => {
|
||||
const preloader = document.getElementById('app-preloader');
|
||||
if (preloader) {
|
||||
preloader.style.opacity = '0';
|
||||
preloader.style.transition = 'opacity 0.5s ease-out';
|
||||
setTimeout(() => {
|
||||
preloader.remove();
|
||||
console.log('🎨 Preloader removed');
|
||||
}, 500);
|
||||
}
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to mount React app:', error);
|
||||
|
||||
// Fallback error display
|
||||
const rootElement = document.getElementById("root");
|
||||
if (rootElement) {
|
||||
rootElement.innerHTML = `
|
||||
<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;">
|
||||
<div>
|
||||
<h1>Critical Error: React app failed to start</h1>
|
||||
<p>Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
|
||||
<p>Refreshing automatically in 3 seconds...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
// Auto-refresh on error
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Try to initialize immediately
|
||||
if (document.readyState === 'loading') {
|
||||
// DOM still loading
|
||||
document.addEventListener('DOMContentLoaded', initApp);
|
||||
} else {
|
||||
// DOM already loaded
|
||||
initApp();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user