Que fait vue-debug-guides ?
Débogage et gestion des erreurs Vue 3 pour les erreurs d'exécution, avertissements, échecs asynchrones et problèmes SSR/hydratation. Utilisez-le pour diagnostiquer ou corriger des problèmes Vue.
Erreurs d'exécution
TypeError / ReferenceError
Les erreurs d'exécution courantes surviennent souvent lors de l'accès à des propriétés non définies ou de l'appel de méthodes inexistantes. Utilisez app.config.errorHandler pour capturer globalement ces erreurs :
import { createApp } from 'vue'
const app = createApp(App)
app.config.errorHandler = (err, instance, info) => {
console.error('Erreur capturée :', err)
console.log('Composant :', instance)
console.log('Info :', info)
}
Avertissements Vue
Avertissements de développement
Pendant le développement, Vue émet des avertissements pour des problèmes comme l'utilisation incorrecte de v-model ou des clés manquantes dans v-for. Activez le mode strict pour les afficher dans la console :
app.config.warnHandler = (msg, instance, trace) => {
console.warn(`Avertissement Vue : ${msg}`)
console.log('Composant :', instance)
console.log('Trace :', trace)
}
Échecs asynchrones
Gestion des promesses rejetées
Les composants asynchrones ou les appels API peuvent échouer silencieusement. Utilisez onErrorCaptured dans un composant parent pour intercepter ces erreurs :
import { onErrorCaptured } from 'vue'
export default {
setup() {
onErrorCaptured((err, instance, info) => {
console.error('Erreur asynchrone capturée :', err)
// Retourner false pour empêcher la propagation
return false
})
}
}
Problèmes SSR et hydratation
Incohérences d'hydratation
Lorsque le rendu côté serveur ne correspond pas à la sortie côté client, Vue émet une erreur d'hydratation. Identifiez les différences en utilisant app.config.isCustomElement pour ignorer certains éléments :
app.config.isCustomElement = (tag) => {
return tag.startsWith('custom-')
}
Pour déboquer plus profondément, activez le mode hydratation verbose :
# Dans le script du client
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ || {}
Bonnes pratiques
Gestion des erreurs dans la Composition API
Utilisez watchEffect avec une fonction de nettoyage pour éviter les fuites mémoire lors des erreurs :
import { watchEffect, ref } from 'vue'
const data = ref(null)
watchEffect(async (cleanup) => {
try {
const response = await fetch('/api/data')
data.value = await response.json()
} catch (err) {
console.error('Erreur de chargement :', err)
}
cleanup(() => {
console.log('Nettoyage effectué')
})
})
Réactivité et erreurs silencieuses
Les propriétés réactives qui sont undefined ou null peuvent causer des erreurs silencieuses. Vérifiez toujours avant d'accéder :
import { computed } from 'vue'
const user = ref(null)
const fullName = computed(() => {
if (!user.value) {
return 'Utilisateur inconnu'
}
return `${user.value.firstName} ${user.value.lastName}`
})