Propriété app.config.errorHandler de Vue3

Vue3 API globale

app.config.errorHandlerC'est une propriété très pratique qui permet aux développeurs de capturer et de gérer globalement les erreurs dans les applications.

1. Qu'est-ce que app.config.errorHandler ?

app.config.errorHandlerest une option de configuration globale dans Vue3, utilisée pour capturer et gérer les erreurs non interceptées dans les applications. Qu'il s'agisse d'erreurs levées dans les hooks de cycle de vie des composants, les gestionnaires d'événements ou les opérations asynchrones, elles peuvent toutes êtreapp.config.errorHandlercapturées et gérées.

2. Comment utiliser app.config.errorHandler ?

Pour l'utiliserapp.config.errorHandlertout d'abord, vous devez créer une instance Vue et définir laerrorHandlerpropriété. Voici un exemple simple :

Exemple

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.errorHandler = (err, vm, info) => {
  console.error('Caught a global error:', err)
  console.error('The component instance where the error occurred:', vm)
  console.error('Error message:', info)
}

app.mount('#app')

Dans cet exemple, nous avons créé une application Vue et définierrorHandlerLorsqu'une erreur non interceptée se produit dans l'application,errorHandlerla fonction sera appelée, et le message d'erreur, l'instance du composant où l'erreur s'est produite, ainsi que le message d'erreur seront transmis à la fonction.

Description du paramètre :

  • err: L'objet d'erreur, qui contient des informations détaillées sur l'erreur.
  • vm: L'instance du composant où l'erreur s'est produite.
  • info: Une chaîne représentant la source de l'erreur, telle queLifecycle hooks、Event handleretc.

3. Scénarios d'application pratiques

app.config.errorHandlerIl existe de nombreux scénarios d'application dans le développement réel. Voici quelques utilisations courantes :

3.1 Enregistrement des journaux d'erreurs

Dans les environnements de production, la capture et l'enregistrement des journaux d'erreurs sont très importants. Grâce àapp.config.errorHandler, nous pouvons envoyer les informations d'erreur au serveur pour le stockage et l'analyse.

Exemple

app.config.errorHandler = (err, vm, info) => {
  // Envoyer les informations d'erreur au serveur
  fetch('/log-error', {
    method: 'POST',
    body: JSON.stringify({ err, vm, info })
  })
  console.error('Caught a global error:', err)
}

3.2 Invites conviviales

Lorsqu’une erreur se produit dans l’application, nous pouvons utiliserapp.config.errorHandlerpour afficher des messages d’invite conviviaux au lieu de laisser les utilisateurs voir des piles d’erreurs complexes.

Exemple

app.config.errorHandler = (err, vm, info) => {
  alert('Désolé, l’application a rencontré un problème. Veuillez réessayer plus tard.')
  console.error('Caught a global error:', err)
}

3.3 Récupération après erreur

Dans certains cas, nous pouvons essayer deapp.config.errorHandlerrécupérer de l’erreur qui s’y produit pour éviter que l’application ne plante.

Exemple

app.config.errorHandler = (err, vm, info) => {
  console.error('Caught a global error:', err)
  // Essayer de restaurer l’état de l’application
  vm.$forceUpdate()
}

4. Remarques

  • Propagation des erreurs：app.config.errorHandlern’empêche pas la propagation des erreurs. Si une erreur n’est pas interceptée, elle sera quand même interceptée par le navigateur et affichée dans la console.
  • Erreurs asynchrones：app.config.errorHandlerpeuvent capturer les erreurs dans les opérations asynchrones, mais il faut tenir compte des mécanismes de gestion des erreurs du code asynchrone.

Vue3 API globale

Autres extensions