Add debug logs to router navigation

**Motivations :**
- Application initializes but doesn't display anything after service initialization
- Need to identify where navigation fails in the router flow

**Modifications :**
- Added debug logs to navigate() function to track path processing
- Added debug logs to handleLocation() function to track route handling
- Added debug logs to home route processing to track component creation
- Added debug logs to navigation completion in init() function

**Pages affectées :**
- src/router.ts
This commit is contained in:
NicolasCantu 2025-10-23 21:13:53 +02:00
parent 3260ea9695
commit 06df2ff6c1
2 changed files with 18 additions and 3 deletions

View File

@ -533,7 +533,7 @@ export function setupMainPairing(): void {
async function handleMainPairing(): Promise<void> { async function handleMainPairing(): Promise<void> {
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement; const mainStatus = container.querySelector('#main-status') as HTMLElement;
try { try {
// Update UI // Update UI
if (mainStatus) { if (mainStatus) {
@ -583,7 +583,7 @@ async function handleMainPairing(): Promise<void> {
} catch (error) { } catch (error) {
console.error('Pairing failed:', error); console.error('Pairing failed:', error);
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>'; mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
} }

View File

@ -22,6 +22,7 @@ const routes: { [key: string]: string } = {
export let currentRoute = ''; export let currentRoute = '';
export async function navigate(path: string) { export async function navigate(path: string) {
console.log('🧭 Navigate called with path:', path);
cleanSubscriptions(); cleanSubscriptions();
cleanPage(); cleanPage();
path = path.replace(/^\//, ''); path = path.replace(/^\//, '');
@ -31,30 +32,41 @@ export async function navigate(path: string) {
path = 'home'; path = 'home';
} }
} }
console.log('🧭 Final path after processing:', path);
await handleLocation(path); await handleLocation(path);
console.log('🧭 handleLocation completed for path:', path);
} }
async function handleLocation(path: string) { async function handleLocation(path: string) {
console.log('📍 handleLocation called with path:', path);
const parsedPath = path.split('/'); const parsedPath = path.split('/');
if (path.includes('/')) { if (path.includes('/')) {
path = parsedPath[0]; path = parsedPath[0];
} }
currentRoute = path; currentRoute = path;
const routeHtml = routes[path] || routes['home']; const routeHtml = routes[path] || routes['home'];
console.log('📍 Current route set to:', currentRoute);
console.log('📍 Route HTML:', routeHtml);
const content = document.getElementById('containerId'); const content = document.getElementById('containerId');
console.log('📍 Container element found:', !!content);
if (content) { if (content) {
if (path === 'home') { if (path === 'home') {
console.log('🏠 Processing home route...');
// Use LoginComponent // Use LoginComponent
const loginComponent = LoginComponent; const loginComponent = LoginComponent;
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
console.log('🏠 Container for home:', !!container);
const accountComponent = document.createElement('login-4nk-component'); const accountComponent = document.createElement('login-4nk-component');
accountComponent.setAttribute( accountComponent.setAttribute(
'style', 'style',
'width: 100vw; height: 100vh; position: relative; grid-row: 2;' 'width: 100vw; height: 100vh; position: relative; grid-row: 2;'
); );
if (container) container.appendChild(accountComponent); if (container) {
container.appendChild(accountComponent);
console.log('🏠 Component appended to container');
}
// Initialize the home page after component is added to DOM // Initialize the home page after component is added to DOM
console.log('🏠 Initializing home page...'); console.log('🏠 Initializing home page...');
@ -66,6 +78,7 @@ async function handleLocation(path: string) {
console.error('❌ Failed to initialize home page:', error); console.error('❌ Failed to initialize home page:', error);
} }
} else { } else {
console.log('📍 Processing other route:', path);
const html = await fetch(routeHtml).then(data => data.text()); const html = await fetch(routeHtml).then(data => data.text());
content.innerHTML = html; content.innerHTML = html;
} }
@ -186,9 +199,11 @@ export async function init(): Promise<void> {
if (isPaired) { if (isPaired) {
console.log('✅ Device is paired, navigating to account page...'); console.log('✅ Device is paired, navigating to account page...');
await navigate('account'); await navigate('account');
console.log('✅ Navigation to account completed');
} else { } else {
console.log('⚠️ Device not paired, navigating to home page...'); console.log('⚠️ Device not paired, navigating to home page...');
await navigate('home'); await navigate('home');
console.log('✅ Navigation to home completed');
} }
console.log('✅ Application initialization completed successfully'); console.log('✅ Application initialization completed successfully');