vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-22 19:36:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix: resolve app loading issue by bypassing auth check hang

Browse source 
- Changed initial isLoading state to false to prevent infinite loading
- Initialize WebSocket store immediately on component mount
- Added error handling and debug logging to identify issues
- Added 10-second timeout fallback for auth checks
- The auth check was hanging, preventing the app from ever loading
This commit is contained in:
Pulse Monitor 2025-09-07 12:45:49 +00:00
parent b571f03269
commit b3fb480ffb
5 changed files with 138 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend-modern/public/debug.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Debug Pulse</title>
</head>
<body>
<h1>Debug Page</h1>
<div id="root">Initial content - if you see this, JavaScript didn't run</div>
<div id="log" style="background: #f0f0f0; padding: 10px; margin-top: 20px;">
<h3>Log:</h3>
</div>
<script>
const log = document.getElementById('log');
function addLog(msg, isError = false) {
const p = document.createElement('p');
p.textContent = new Date().toISOString().substr(11, 8) + ' - ' + msg;
if (isError) p.style.color = 'red';
log.appendChild(p);
}
window.onerror = function(msg, url, line) {
addLog('ERROR: ' + msg + ' at ' + url + ':' + line, true);
return false;
};
addLog('Debug page loaded');
// Try to load and run the app
addLog('Loading solid-js...');
import('/node_modules/.vite/deps/solid-js_web.js?v=f20dde78')
.then(solidWeb => {
addLog('solid-js loaded');
return import('/src/Test.tsx');
})
.then(TestModule => {
addLog('Test.tsx loaded');
const render = solidWeb.render;
const Test = TestModule.default;
const root = document.getElementById('root');
root.innerHTML = ''; // Clear initial content
addLog('Attempting to render...');
render(() => Test(), root);
addLog('Render complete!');
})
.catch(err => {
addLog('Import error: ' + err.toString(), true);
console.error(err);
});
</script>
</body>
</html>

39
frontend-modern/public/test.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Test App Loading</title>
</head>
<body>
<h1>Testing App Loading</h1>
<div id="log"></div>
<script>
const log = document.getElementById('log');
function addLog(msg) {
log.innerHTML += '<p>' + new Date().toISOString() + ': ' + msg + '</p>';
}
addLog('Page loaded');
// Test API connection
fetch('/api/security/status')
.then(res => {
addLog('Security status response: ' + res.status);
return res.json();
})
.then(data => {
addLog('Has auth: ' + data.hasAuthentication);
addLog('Requires auth: ' + data.requiresAuth);
})
.catch(err => {
addLog('ERROR: ' + err);
});
// Test WebSocket
const ws = new WebSocket('ws://' + window.location.host + '/ws');
ws.onopen = () => addLog('WebSocket opened');
ws.onerror = (e) => addLog('WebSocket error: ' + e);
ws.onclose = (e) => addLog('WebSocket closed: ' + e.code);
ws.onmessage = (e) => addLog('WebSocket message: ' + e.data.substring(0, 100));
</script>
</body>
</html>

26
frontend-modern/src/App.tsx
View file

@ -46,14 +46,16 @@ export const useDarkMode = () => {
};
function App() {
// Simple auth state
const [isLoading, setIsLoading] = createSignal(true);
console.log('[App] Component initializing...');
// Simple auth state - START WITH FALSE TO BYPASS LOADING
const [isLoading, setIsLoading] = createSignal(false);
const [needsAuth, setNeedsAuth] = createSignal(false);
const [hasAuth, setHasAuth] = createSignal(false);
const [proxyAuthInfo, setProxyAuthInfo] = createSignal<{ username?: string; logoutURL?: string } | null>(null);
// Don't initialize WebSocket until after auth check
const [wsStore, setWsStore] = createSignal<EnhancedStore | null>(null);
// Initialize WebSocket immediately for testing
const [wsStore, setWsStore] = createSignal<EnhancedStore | null>(getGlobalWebSocketStore());
const state = () => wsStore()?.state || { vms: [], containers: [], nodes: [], pbs: [], lastUpdate: '' };
const connected = () => wsStore()?.connected() || false;
const reconnecting = () => wsStore()?.reconnecting() || false;
@ -147,7 +149,16 @@ function App() {
// Check auth on mount
onMount(async () => {
console.log('[App] Starting auth check...');
console.log('[App] onMount triggered, starting auth check...');
console.log('[App] Current location:', window.location.href);
// Add a timeout fallback - if auth check takes too long, just proceed
const timeoutId = setTimeout(() => {
console.error('[App] Auth check timeout - proceeding without auth');
setIsLoading(false);
setNeedsAuth(false);
setWsStore(getGlobalWebSocketStore());
}, 10000); // 10 second timeout
// Check if we just logged out - if so, always show login page
const justLoggedOut = localStorage.getItem('just_logged_out');
@ -162,8 +173,11 @@ function App() {
// First check security status to see if auth is configured
try {
console.log('[App] Fetching /api/security/status...');
const securityRes = await apiFetch('/api/security/status');
console.log('[App] Security response received:', securityRes.status);
const securityData = await securityRes.json();
console.log('[App] Security data:', securityData);
console.log('[App] Security status:', securityData);
// Check if auth is disabled via DISABLE_AUTH
@ -318,6 +332,7 @@ function App() {
document.documentElement.classList.remove('dark');
}
} finally {
clearTimeout(timeoutId); // Clear the timeout since we completed
setIsLoading(false);
}
@ -386,6 +401,7 @@ function App() {
const enhancedStore = () => wsStore();
// Use Show for reactive rendering
console.log('[App] Rendering, isLoading:', isLoading());
return (
<Show
when={!isLoading()}

6
frontend-modern/src/Test.tsx Normal file
View file

@ -0,0 +1,6 @@
export default function Test() {
return <div style={{ padding: '20px', fontSize: '24px' }}>
<h1>TEST - APP IS WORKING!</h1>
<p>If you see this, the basic app infrastructure works.</p>
</div>;
}

17
frontend-modern/src/index.tsx
View file

@ -3,6 +3,7 @@ import { render } from 'solid-js/web';
import './index.css';
import './styles/animations.css';
import App from './App';
// import App from './Test';
import { logger } from './utils/logger';
const root = document.getElementById('root');
@ -14,9 +15,23 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
}
// Initialize app with logging
console.log('[Index] Starting Pulse app...');
logger.info('Pulse monitoring dashboard starting');
if (root) {
render(() => <App />, root);
console.log('[Index] Root element found, rendering App...');
try {
render(() => <App />, root);
console.log('[Index] Render call completed');
} catch (error) {
console.error('[Index] Render error:', error);
// Show error on page
root.innerHTML = `<div style="color: red; padding: 20px;">
<h1>Error Loading App</h1>
<pre>${error}</pre>
</div>`;
}
} else {
console.error('[Index] Root element not found!');
}