web-dev-qa-db-fra.com

Comment attraper des erreurs de serveur dans NUXT.JS afin qu'il ne planche pas la page de page? (Vue)

Contexte

Cette question est liée à mon autre question, Comment gérer les erreurs d'Apollo Client Crashing Render dans NUXT? , mais je vais essayer de garder cela isolé depuis que j'aimerais que cette question soit concentrée uniquement sur NUXT ( moins apollo). Cependant, j'ai décidé de demander à ce séjour car je recherche une réponse/solution entièrement différente.

Le problème

Je maintient actuellement une application de production NUXT/VUE qui utilise le @nuxt/apollo Module pour faire des demandes graphql.

Le problème, c'est que de temps en temps, le serveur graphql que nous comptons sur baisse et renvoie une page d'erreur HTML, qui bloque le client APOLLO. Mais parce que nous chargons Apollo en tant que module NUXT, il bloque également le pipeline de rendu de la page. Nous donner une page d'erreur de serveur générique qui ressemble à ceci;

page error

Erreur de serveur Une erreur s'est produite dans l'application et votre page n'a pas pu être signifiée. Si vous êtes le propriétaire de l'application, vérifiez vos journaux pour plus de détails.

Et la trace de pile suivante:

 ERROR  Network error: Unexpected token < in JSON at position 0                                                            08:11:04

  at new ApolloError (node_modules/apollo-client/bundle.umd.js:92:26)
  at node_modules/apollo-client/bundle.umd.js:1588:34
  at node_modules/apollo-client/bundle.umd.js:2008:15
  at Set.forEach (<anonymous>)
  at node_modules/apollo-client/bundle.umd.js:2006:26
  at Map.forEach (<anonymous>)
  at QueryManager.broadcastQueries (node_modules/apollo-client/bundle.umd.js:2004:20)
  at node_modules/apollo-client/bundle.umd.js:1483:29
  at processTicksAndRejections (node:internal/process/task_queues:94:5)

Cependant, aucune de ces traces de pile ne nous permet de voir où NUXT lance l'erreur, afin que nous puissions le gérer.

Ce que nous avons essayé

Nous avons épuisé toutes nos options à la recherche de cette question depuis quelques semaines. Nous avons d'abord essayé de le résoudre en manipulant directement l'erreur au niveau Apollo à l'aide des 3 solutions de traitement des erreurs de la bibliothèque APOLLO:

  • @nuxt/apollo module
  • vue-apollo
  • apollo-client

Si vous souhaitez lire davantage de cela (même si ce genre de pertinence de cette question), vous pouvez en savoir plus sur ma question initiale ici

Cependant, je préférerais maintenant savoir s'il y a un moyen d'en quelque sorte gérer ces erreurs de rendu de page par:

  • Rendre les erreurs échouent silencieusement, de sorte que la page rend toujours la normale
  • Nous permettant de rediriger vers une autre page.

Étant donné que le module Apollo Nuxt que nous utilisons n'est actuellement pas de fonctionner pour cela, j'aimerais savoir si NUXT prend en charge une sorte de moyen de gérer les erreurs.

Cela n'a pas beaucoup aidé que la documentation de NUXT est assez limitée en matière de traitement des erreurs. Au mieux, il contient des informations sur les pages d'erreur et comment rediriger les pages d'erreur à l'aide de context.error. Mais il n'a pas de page dédiée sur la manière d'attraper des erreurs courantes. J'ai le sentiment que les crochets NUXT pourraient être la réponse, mais la documentation sur eux est difficile à naviguer et aussi clairsemé.

La source d'information la plus complète que j'ai trouvée sur la manutention des erreurs de NUXT était cet article, Traitement des erreurs dans NUXTJS , dont rien suggéré n'a été travaillé pour nous.

Résumé

Notre application NUXT s'effondre lorsque le @nuxt/apollo Module NUXT Nous utilisons des accidents. Nous aimerions savoir s'il y a une sorte de manière standard NUXT de l'attraper, ou si la seule solution possible ne migre que toute notre application pour ne pas utiliser @nuxt/apollo Module et utiliser la syntaxe ES6 Promise et la charge apollo-client Manuellement dans l'application en tant que bibliothèque autonome qui n'est pas profondément intégrée au cycle de vie NUXT.

javascriptvue.jsnuxt.jsapollo
7
sgarcia.dev

Pour empêcher les pages de s'écraser, vous devez manipuler des erreurs et l'isoler afin qu'ils n'affectent pas le rendu d'autres composants. Cela peut être atteint avec le concept de traitement des erreurs de ErrorBoundry. Vous pouvez créer un composant commun pour réutiliser la logique ErrorBoundry. Il existe plusieurs autres avantages de cette approche.

  • Aide à garder les composants exempts de la logique de manutention des erreurs
  • Nous permet d'utiliser la composition de composant déclaratif au lieu de s'appuyer sur l'impératif Essayer/Catch
  • Nous pouvons être aussi granulaires que nous voulons avec elle - enveloppez des composants individuels ou des pièces d'application entières.

Voici l'exemple de la création de frontières d'erreur.

export default {
  name: 'ErrorBoundary',
  data: () => ({
    error: false
  }),
  errorCaptured (err, vm, info) {
    this.error = true
  },
  render (h) {
    return this.error ? h('p', 'Something went wrong') : this.$slots.default[0]
  }
}

Maintenant, vous pouvez envelopper n'importe quel composant à la limite d'erreur et isoler l'erreur comme indiqué,

<error-boundary>
  <counter />
</error-boundary>

Cavalités de ErrorBoundry composant

Il y a des mises en garde lors de l'utilisation du errorCaptured crochet. Actuellement, les erreurs ne sont capturées que dans:

  • render Fonctions
  • rappel de surveillance
  • crochets de cycle de vie
  • manutes d'événement des composants
1
Kiran Maniya