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> {
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement;
try {
// Update UI
if (mainStatus) {
@ -583,7 +583,7 @@ async function handleMainPairing(): Promise<void> {
} catch (error) {
console.error('Pairing failed:', error);
if (mainStatus) {
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 async function navigate(path: string) {
console.log('🧭 Navigate called with path:', path);
cleanSubscriptions();
cleanPage();
path = path.replace(/^\//, '');
@ -31,30 +32,41 @@ export async function navigate(path: string) {
path = 'home';
}
}
console.log('🧭 Final path after processing:', path);
await handleLocation(path);
console.log('🧭 handleLocation completed for path:', path);
}
async function handleLocation(path: string) {
console.log('📍 handleLocation called with path:', path);
const parsedPath = path.split('/');
if (path.includes('/')) {
path = parsedPath[0];
}
currentRoute = path;
const routeHtml = routes[path] || routes['home'];
console.log('📍 Current route set to:', currentRoute);
console.log('📍 Route HTML:', routeHtml);
const content = document.getElementById('containerId');
console.log('📍 Container element found:', !!content);
if (content) {
if (path === 'home') {
console.log('🏠 Processing home route...');
// Use LoginComponent
const loginComponent = LoginComponent;
const container = document.querySelector('#containerId');
console.log('🏠 Container for home:', !!container);
const accountComponent = document.createElement('login-4nk-component');
accountComponent.setAttribute(
'style',
'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
console.log('🏠 Initializing home page...');
@ -66,6 +78,7 @@ async function handleLocation(path: string) {
console.error('❌ Failed to initialize home page:', error);
}
} else {
console.log('📍 Processing other route:', path);
const html = await fetch(routeHtml).then(data => data.text());
content.innerHTML = html;
}
@ -186,9 +199,11 @@ export async function init(): Promise<void> {
if (isPaired) {
console.log('✅ Device is paired, navigating to account page...');
await navigate('account');
console.log('✅ Navigation to account completed');
} else {
console.log('⚠️ Device not paired, navigating to home page...');
await navigate('home');
console.log('✅ Navigation to home completed');
}
console.log('✅ Application initialization completed successfully');