web-dev-qa-db-fra.com

Comment implémenter la gestion globale des erreurs dans Vue

Je souhaite une gestion globale des erreurs dans Vue.JS, comme le système de gestion des erreurs sous Angular 2+. J'ai tellement essayé mais je n'ai pas trouvé de bonne approche pour mettre en œuvre ce traitement.

Imaginez que vous avez plusieurs méthodes de service et que ces méthodes doivent s’exercer les unes après les autres (je veux dire les unes dans les autres); écrire à l’aide de la méthode catch dans le service prevoius est tellement laide et sale, et je cherche maintenant un moyen propre façon. J'espère que tu comprends ce que je veux dire.

vue.jserror-handlingvuejs2
3
hamid hasani

Comme @Badgy l'a mentionné, vous pouvez installer un gestionnaire d'erreurs Vue pour intercepter les erreurs rencontrées. Cela peut être fait comme suit:

 Vue.config.errorHandler = function (err, vm, info) {
   // handle error
   // `info` is a Vue-specific error info, e.g. which lifecycle hook
   // the error was found in. Only available in 2.2.0+
 }

Le code ci-dessus peut être localisé n'importe où dans votre javascript. Je localise le code juste avant de créer mon instance de vue. c'est-à-dire avant mon code var app = new Vue({...});. Parce qu’il s’agit d’un gestionnaire d’erreur global de vue, il gérera les erreurs de toutes les instances de vue ainsi que de ses composants. Je trouve que dans la pratique, il détecte principalement les erreurs qui surviennent dans les méthodes de rendu de vue.

Vous pouvez en savoir plus à ce sujet dans la documentation officielle ici: https://vuejs.org/v2/api/#errorHandler

Pour les erreurs javascript plus générales (non liées à la vue), vous avez toujours besoin d'un gestionnaire d'erreurs global comme ceci:

 window.onerror = function (msg, url, line, col, error) {
     //code to handle or report error goes here
 }

Encore une fois, ce code peut être placé partout où le javascript est autorisé, mais vous voudrez généralement le placer plus tôt dans votre pile javascript. Vous pouvez en savoir plus à ce sujet ici: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

2
Ron C

J'espère avoir bien compris votre question, mais c'est peut-être ce que vous recherchez.

Type: (err: Error, vm: Component, info: string) =>? Boolean

Détails: Appelé lorsqu'une erreur d'un composant descendant est capturé. Le hook reçoit trois arguments: l'erreur, le composant instance qui a déclenché l'erreur, et une chaîne contenant des informations sur l'endroit où l'erreur a été capturée. Le hook peut retourner false pour arrêter le erreur de propagation plus loin.

Voici plus d'informations en profondeur à ce sujet. Faites attention à sa Vue 2.5.0+

0
Badgy