ObsiViewer/docs/SEARCH/SEARCH_DEBUG_GUIDE.md

Guide de Débogage de la Recherche Meilisearch

🔍 Problème Actuel

La recherche Meilisearch est activée mais les résultats ne s'affichent pas dans l'interface.

✅ Ce qui Fonctionne

Backend API

• ✅ Meilisearch est actif (port 7700)
• ✅ Backend Express est actif (port 4000)
• ✅ Index Meilisearch contient 642 documents
• ✅ API /api/search retourne des résultats valides

Test backend :

curl "http://localhost:4000/api/search?q=test&limit=2"
# Retourne: {"hits":[...], "estimatedTotalHits":..., "processingTimeMs":...}

Configuration

• ✅ USE_MEILI: true dans environment.ts
• ✅ Proxy Angular configuré (/api → localhost:4000)
• ✅ HttpClient configuré dans index.tsx

Autres Fonctionnalités

• ✅ Bookmarks : Utilise /api/vault/bookmarks (backend)
• ✅ Calendrier : Utilise /api/files/metadata (backend)
• ✅ Vault : Utilise /api/vault (backend)

🐛 Logs de Débogage Ajoutés

Frontend

1. SearchMeilisearchService

// src/core/search/search-meilisearch.service.ts
console.log('[SearchMeilisearchService] Sending request:', url);
console.log('[SearchMeilisearchService] Request completed');

2. SearchOrchestratorService

// src/core/search/search-orchestrator.service.ts
console.log('[SearchOrchestrator] Calling Meilisearch with query:', query);
console.log('[SearchOrchestrator] Raw Meilisearch response:', response);
console.log('[SearchOrchestrator] Transformed hit:', { id, matchCount, result });

3. SearchPanelComponent

// src/components/search-panel/search-panel.component.ts
console.log('[SearchPanel] Results received:', arr);
console.error('[SearchPanel] Search error:', e);

🧪 Tests à Effectuer

1. Vérifier les Logs Console

1. Ouvrir DevTools (F12)
2. Aller dans Console
3. Taper une recherche (ex: "test")
4. Observer les logs dans l'ordre :

[SearchOrchestrator] Calling Meilisearch with query: test
[SearchMeilisearchService] Sending request: /api/search?q=test&limit=20&highlight=true
[SearchMeilisearchService] Request completed
[SearchOrchestrator] Raw Meilisearch response: {hits: [...], ...}
[SearchOrchestrator] Transformed hit: {id: "...", matchCount: 1, result: {...}}
[SearchPanel] Results received: [{noteId: "...", matches: [...], ...}]

2. Vérifier l'Onglet Network

1. Ouvrir DevTools → Network
2. Filtrer : search
3. Taper une recherche
4. Vérifier :
   • ✅ Requête GET /api/search?q=...
   • ✅ Status: 200 OK
   • ✅ Response contient hits avec des données

3. Vérifier les Résultats Transformés

Dans la console, après une recherche :

// Inspecter le signal results
// (nécessite Angular DevTools ou breakpoint)

🔧 Points de Vérification

1. Proxy Angular

Fichier : proxy.conf.json

{
  "/api": {
    "target": "http://localhost:4000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "warn"
  }
}

Vérifier :

# Depuis le navigateur (port 3000)
curl http://localhost:3000/api/search?q=test

# Doit retourner les mêmes résultats que :
curl http://localhost:4000/api/search?q=test

2. Transformation des Résultats

Code : src/core/search/search-orchestrator.service.ts

Le mapping Meilisearch → SearchResult doit produire :

{
  noteId: string,      // ID du document
  matches: [           // Au moins 1 match
    {
      type: 'content',
      text: string,
      context: string,  // Contenu avec <mark> ou texte brut
      ranges: []
    }
  ],
  score: 100,
  allRanges: []
}

Problème potentiel : Si matches est vide, rien ne s'affiche.

Solution : Le code a été modifié pour toujours créer au moins un match avec excerpt ou content.

3. Affichage des Résultats

Composant : SearchResultsComponent

Vérifier dans le template :

@if (sortedGroups().length === 0) {
  <!-- Message "No results" -->
} @else {
  <!-- Liste des résultats -->
  @for (group of sortedGroups(); track group.noteId) {
    <!-- Affichage du groupe -->
  }
}

Signal à inspecter :

• results() : Doit contenir les SearchResult[]
• sortedGroups() : Doit contenir les ResultGroup[]

🚨 Problèmes Possibles

Problème 1 : Requête HTTP ne part pas

Symptômes :

• Aucun log [SearchMeilisearchService] Sending request
• Aucune requête dans Network tab

Causes possibles :

• USE_MEILI n'est pas à true
• Service non injecté correctement
• Observable non souscrit

Solution :

// Vérifier dans environment.ts
export const environment = {
  USE_MEILI: true, // ← Doit être true
  // ...
};

Problème 2 : Requête part mais pas de réponse

Symptômes :

• Log [SearchMeilisearchService] Sending request présent
• Pas de log Request completed
• Erreur dans Network tab

Causes possibles :

• Backend non démarré
• Proxy mal configuré
• CORS

Solution :

# Vérifier backend
curl http://localhost:4000/api/search?q=test

# Vérifier proxy
# Redémarrer ng serve si nécessaire

Problème 3 : Réponse reçue mais pas de résultats

Symptômes :

• Log [SearchOrchestrator] Raw Meilisearch response présent
• hits.length > 0
• Mais matches.length === 0 dans transformed hit

Causes possibles :

• _formatted absent dans la réponse Meilisearch
• excerpt absent
• Mapping incorrect

Solution : Le code a été modifié pour créer un match de fallback avec excerpt ou un extrait de content.

Problème 4 : Résultats transformés mais pas affichés

Symptômes :

• Log [SearchPanel] Results received avec arr.length > 0
• Mais rien ne s'affiche dans l'UI

Causes possibles :

• Signal results non mis à jour
• Composant SearchResults ne reçoit pas les données
• Change detection non déclenchée

Solution :

// Vérifier que results.set() est appelé
this.results.set(arr);
this.hasSearched.set(true);

Problème 5 : Highlighting ne fonctionne pas

Symptômes :

• Résultats affichés
• Mais pas de surlignage (balises <mark>)

Causes possibles :

• _formatted absent
• HTML échappé
• Balises <mark> non rendues

Solution : Le code a été modifié pour :

1. Détecter les balises <mark> dans match.context
2. Retourner le HTML tel quel (sans échappement) si présent
3. Sinon, utiliser le highlighter local

📋 Checklist de Débogage

• Backend démarré (node server/index.mjs)
• Frontend démarré (npm run dev)
• Meilisearch actif (docker ps | grep meilisearch)
• USE_MEILI: true dans environment.ts
• Hard refresh du navigateur (Ctrl+Shift+R)
• DevTools Console ouverte
• DevTools Network tab ouverte
• Taper une recherche (2+ caractères)
• Vérifier logs console (ordre attendu)
• Vérifier requête HTTP dans Network
• Vérifier réponse JSON (hits présents)
• Vérifier transformation (matches non vide)
• Vérifier affichage (liste de résultats visible)

🔄 Workflow de Test Complet

# 1. Vérifier Meilisearch
docker ps | grep meilisearch
curl http://127.0.0.1:7700/health

# 2. Vérifier Backend
curl "http://localhost:4000/api/search?q=test&limit=1"
# Doit retourner JSON avec hits

# 3. Démarrer Frontend (si pas déjà fait)
npm run dev

# 4. Ouvrir navigateur
# http://localhost:3000

# 5. Ouvrir DevTools (F12)
# - Console tab
# - Network tab

# 6. Taper recherche
# - Minimum 2 caractères
# - Observer logs console
# - Observer requête Network

# 7. Vérifier affichage
# - Liste de résultats doit apparaître
# - Cliquer sur un groupe pour voir les matches
# - Vérifier highlighting (balises <mark>)

🆘 Si Rien Ne Fonctionne

Étape 1 : Vérifier Backend Isolé

curl -v "http://localhost:4000/api/search?q=test&limit=1"

Attendu :

• Status: 200 OK
• Content-Type: application/json
• Body: {"hits":[...], ...}

Étape 2 : Vérifier Proxy

# Depuis un autre terminal
curl "http://localhost:3000/api/search?q=test&limit=1"

Attendu : Même réponse que backend direct

Étape 3 : Vérifier Logs Backend

Dans le terminal où node server/index.mjs tourne :

[Meili] Search query: test
[Meili] Results: 1 hits in 15ms

Étape 4 : Vérifier Logs Frontend

Dans la console du navigateur :

[SearchOrchestrator] Calling Meilisearch with query: test
[SearchMeilisearchService] Sending request: /api/search?q=test&limit=20&highlight=true

Étape 5 : Breakpoint Debugging

1. Ouvrir DevTools → Sources
2. Trouver search-panel.component.ts
3. Mettre un breakpoint sur this.results.set(arr)
4. Taper une recherche
5. Inspecter arr quand le breakpoint est atteint

📊 Métriques de Performance

Une fois fonctionnel, vérifier :

• Temps de recherche : < 100ms (Meili + réseau)
• Nombre de résultats : Dépend de la requête
• Highlighting : Balises <mark> présentes
• Pas de gel UI : Interface reste réactive

🎯 Prochaines Étapes

Une fois la recherche fonctionnelle :

1. Retirer les console.log de débogage
2. Optimiser le mapping si nécessaire
3. Ajouter tests E2E
4. Documenter le comportement final