‫Conférencier : Bonjour.
‫Rendons maintenant quelques pages d'erreur intéressantes à nos utilisateurs.
‫Et donc pour commencer, créons d'abord une erreur.
‫Ouvrons donc cette visite ici.
‫Non, je ne veux pas traduire.
‫Et maintenant, ajoutons simplement quelque chose à ce journal ici, et alors,
‫bien sûr, cela ne sera pas trouvé.
‫Exact, et voici à quoi ressemble une erreur à
‫ce stade.
‫Donc, tout simplement, tout ce
‫JSON ici, exactement comme cela ressemblerait à Postman.
‫Nous avons donc déjà vu ce genre d'erreur ici.
‫Et donc, réparons maintenant cela.
‫Mais nous devons d'abord corriger cette erreur particulière.
‫Donc, pour le moment,
‫nous ne pouvons pas lire le nom de propriété de null dans getTour.
‫D'accord.
‫Et c'est donc ici dans notre contrôleur de vues, getTour.
‫Et donc ici, nous n'avons aucune gestion d'erreur au
‫cas où il n'y aurait pas de tournée, n'est-ce pas ?
‫Nous l'avons donc dans tous nos autres gestionnaires de routes,
‫mais dans celui-ci, nous ne l'avons pas encore.
‫Ajoutons donc cela.
‫Donc, s'il n'y a pas de visite, revenez et
‫passez au middleware suivant avec une nouvelle erreur d'application.
‫Et ce n'est probablement pas encore là.
‫Et non en effet, ce n'est pas le cas.
‫Donc const.
‫AppError est égal.
‫Bien.
‫Erreur ici bien sûr.
‫Et puis disons qu'il
‫n'y a pas de tournée avec ce nom.
‫Et puis c'est un 404 pour introuvable.
‫D'accord?
‫Essayons donc à nouveau.
‫Et maintenant, nous devrions obtenir une erreur beaucoup plus agréable.
‫Et en effet, nous en obtenons un.
‫Donc 404.
‫Et gardez à l'esprit que celui-ci est maintenant une erreur opérationnelle.
‫Donc une erreur que nous savons que nous avons créée nous-mêmes fondamentalement.
‫Et comme avant, cela va être important pour notre
‫stratégie de gestion des erreurs.
‫Alors, parlons-en en fait.
‫Et voilà, nous avons terminé.
‫Et maintenant, dans notre contrôleur
‫d'erreurs, nous avons, rappelons-le, deux fonctions qui renvoient
‫les erreurs au client.
‫Nous avons donc celui-ci ici pour le
‫développement et celui-ci pour la production.
‫Puis en production, on
‫distingue les erreurs opérationnelles des autres erreurs inconnues.
‫À droite?
‫Et c'est en fait ce dont nous venons de parler avant.
‫Donc, pour les erreurs que
‫nous connaissons, nous renvoyons le vrai message d'erreur parce
‫que nous pouvons être sûrs qu'il ne
‫s'agira pas d'une
‫erreur étrange provenant d'express ou d'une note ou
‫quelque chose comme ça.
‫Tandis que, d'un autre côté, lorsqu'il s'agit d'une erreur inconnue, eh
‫bien, nous ne voulons pas divulguer les détails de l'erreur.
‫Et maintenant, dans ce cas, avec le site
‫Web rendu, nous utiliserons en fait la même stratégie.
‫Maintenant, ce que je
‫vais faire, c'est simplement ajouter le rendu d'une page
‫d'erreur à chacune de ces fonctions.
‫Et en gros, ce que je
‫vais faire, c'est tester si l'URL commence par l'API slash.
‫Et donc dans ce cas, nous envoyons ce genre d'erreur, n'est-ce pas.
‫Mais si l'URL ne commence pas par l'API, eh bien dans ce cas, cela
‫signifie que nous voulons afficher une page d'erreur en
‫tant que site Web rendu, d'accord ?
‫Donc, tout comme nous l'avons fait dans cette section.
‫Quoi qu'il en soit, implémentons maintenant cela.
‫Et ainsi, nous pouvons utiliser l'URL d'origine du point de demande.
‫Et nous l'avons probablement déjà utilisé.
‫Bien?
‫L'URL d'origine est donc essentiellement l'URL entière mais pas
‫celle de l'hôte.
‫Il ressemble donc exactement à l'itinéraire.
‫Et encore une fois, lorsque nous atteignons
‫notre URL, eh bien, cette route commence par l'API slash.
‫Et maintenant, nous pouvons tester cela.
‫Nous pouvons donc utiliser une fonction JavaScript appelée startWith.
‫Donc une fonction qui est disponible pour les chaînes.
‫Et puis testez s'il commence par l'API slash.
‫À droite?
‫Et si c'est le cas, alors c'est ce que nous voulons faire.
‫Donc, envoyez simplement l'erreur en tant que JSON.
‫Mais sinon, eh bien, nous voulons en fait générer une erreur.
‫Donc c'est toujours res. statut.
‫Et à statusCode aussi.
‫Mais ici, il s'agit en fait de rendu.
‫Ensuite, nous obtenons le nom du
‫modèle, et nous allons créer ce modèle dans une
‫seconde, mais il s'appellera error.
‫Et puis les données que nous voulons y envoyer
‫ne sont pour l'instant que le titre.
‫Et j'ajouterai d'autres éléments
‫une fois le modèle terminé.
‫Donc quelque chose s'est mal passé va être le titre
‫de cette page d'erreur.
‫Bien?
‫Oh, en fait, nous n'avons pas
‫accès à la variable de requête ici.
‫Et sa fonction.
‫Et donc rajoutons ça.
‫Demandez ici.
‫Et nous allons aussi en avoir besoin ici.
‫Celui-là.
‫Et ajoutons donc cela ici aussi.
‫Alors juste ici.
‫D'accord.
‫Nous devons donc maintenant créer cette page, ou
‫ce modèle, appelé error.
‫Et encore une fois, j'ai déjà un modèle simple pour ça.
‫C'est donc dans dev-data, templates et errorTemplate.
‫D'accord?
‫Alors copions ceci.
‫Et puis créez une vue pour cela.
‫Erreur. carlin.
‫D'accord.
‫Et donc ici, nous avons un simple h2 qui dit, euh oh,
‫quelque chose s'est mal passé.
‫Puis (rires) quelques emojis amusants là-bas.
‫Ils ne sont pas vraiment amusants.
‫Et puis ici on veut pouvoir aussi faire passer un message.
‫Bien?
‫Ajoutons donc ceci égal à msg, juste un raccourci pour message.
‫Bien?
‫Et c'est en fait ça.
‫Alors terminons cela et passons ce message.
‫Donc, msg est alors défini.
‫Et définissons-le vraiment sur le message de point d'erreur.
‫D'accord?
‫Et nous faisons ici parce que nous sommes en développement.
‫Alors garde cela en tête.
‫Ajoutons également quelques commentaires ici.
‫API.
‫Mettons ça ici.
‫Le site Web rendu.
‫Nous le faisons donc comme ça, avec un message d'erreur, encore une
‫fois parce qu'en développement, cela
‫n'a pas vraiment d'importance si nous divulguons tous les détails de l'erreur
‫sur notre page, n'est-ce pas ?
‫Parce que personne ne va vraiment le voir puisque, oui,
‫nous sommes en développement.
‫Cela devrait donc fonctionner maintenant.
‫Il ne nous reste plus qu'à recharger cette page.
‫Mais maintenant, quelque chose ne va pas ici.
‫Il dit donc qu'il n'a envoyé aucune donnée.
‫Alors revenons ici.
‫Eh bien, comme premier problème que je
‫vois ici, je devrais avoir le code de statut et pas seulement le statut.
‫C'est tout pour vérifier si nous avons une erreur ici.
‫Oh oui.
‫En fait, il y a des erreurs.
‫Donc, c'était en fait le code d'état invalide.
‫Donc ici, il devrait s'agir de code.
‫Donnons-en une autre sauvegarde.
‫Rechargez-le.
‫Et maintenant, nous obtenons une page d'erreur ici.
‫Eh bien, ce n'est pas vraiment formaté.
‫Mais encore, il a le titre et plus important
‫encore, il a ce message que nous venons de faire passer.
‫Il n'y a donc pas de tournée avec ce nom.
‫Et donc cela vient exactement de notre contrôleur de vues.
‫Donc à partir d'ici.
‫Alors rappelez-vous cette logique où nous créons une erreur ici qui
‫est ensuite transmise à notre erreur globale
‫et au middleware Lint.
‫À droite?
‫Et c'est donc lui qui ramassera
‫ces erreurs et les enverra au client.
‫Maintenant, dans notre cas, nous obtenons cette
‫erreur car ici dans notre modèle, nous avons encore oublié
‫de faire quelque chose.
‫Ce qui est simplement pour étendre, bien sûr, notre modèle principal.
‫À droite?
‫Nous devons donc dire étendre au modèle de base.
‫Et puis, comme toujours, créez ce bloc ici.
‫Alors bloquez le contenu.
‫Et puis tout cela doit être là-dedans.
‫Et donc fondamentalement, ici, nous faisons
‫exactement la même chose que nous avons fait dans tous les autres modèles.
‫Donc, en gros, injectez ce contenu ici
‫dans le blog de contenu dans le modèle de base.
‫Donc, si nous rechargeons cela maintenant, cela semble enfin comme prévu.
‫Bien?
‫Et maintenant, si nous avons réellement eu une erreur dans notre
‫code, et donc disons à nouveau
‫que nous n'avons pas cette gestion d'erreur ici,
‫alors bien sûr l'erreur entière est divulguée au client.
‫Impossible donc de lire le nom de propriété de null.
‫Et bien sûr, nous ne voulons pas que les visiteurs de
‫notre site Web reçoivent ce genre d'erreur, n'est-ce pas ?
‫Personne ne comprendrait vraiment ce que cela signifie.
‫Et donc dans notre gestionnaire d'erreurs de production,
‫occupons-nous maintenant de cela.
‫Donc ici dans notre contrôleur d'erreur, appliquons
‫maintenant la même logique que celle que nous avons ici.
‫Testez donc si nous gérons actuellement l'API ou non.
‫Et bien sûr, il pourrait y avoir des façons plus élégantes
‫de le faire.
‫Par exemple, vous pourriez avoir un middleware de
‫gestion des erreurs complètement séparé juste pour l'API et
‫un pour le site Web rendu, n'est-ce pas ?
‫Mais encore une fois, je veux juste rester un peu simple ici.
‫D'accord?
‫Donc dans ce cas, c'est vraiment mon objectif principal.
‫Bien.
‫Sélectionnons tout cela.
‫Oh, que s'est-il passé là-bas ?
‫Ah, on y va.
‫D'accord.
‫Voilà pour l'API.
‫Et maintenant, nous aurons en fait quelque chose de très similaire.
‫Donc, celui-ci est, encore une fois, pour le site Web rendu.
‫Appelons-le B ici et A pour celui-ci.
‫Donc juste pour le séparer un peu mieux.
‫Donc nous avons et puis B ici.
‫Quoi qu'il en soit, cela ressemblera un peu à celui-ci.
‫Et donc, si nous avons une erreur opérationnelle, alors la page
‫d'erreur devrait ressembler
‫à celle que nous avions ici auparavant.
‫Mais au cas où il s'agirait d'une erreur de programmation ou
‫d'une erreur inconnue, alors nous ne voulons pas le message complet,
‫mais juste un message très générique.
‫Donc quelque chose comme s'il vous plaît réessayez plus tard.
‫Bien?
‫Voyons maintenant quel type d'erreur nous obtenons ici.
‫Et apparemment, nous obtenons ici quelque chose
‫appelé une déclaration solitaire si.
‫À droite.
‫Alors oui, Lint ne veut pas
‫vraiment que nous ayons seulement un if à l'intérieur d'un bloc else.
‫Et je suis d'accord que ce
‫n'est pas une belle pratique de codage.
‫Et donc en fait, corrigeons cela en
‫nous débarrassant de cela d'autre ici.
‫Donnez-lui une sauvegarde.
‫Et puis cette erreur a disparu.
‫Mais maintenant, nous devons nous assurer que cela termine
‫vraiment le cycle de réponse à la demande.
‫Et donc nous devons revenir ici et ici aussi.
‫Bien.
‫Maintenant, une autre erreur ESLint, inutile d'autre après un retour.
‫Et effectivement, c'est vrai aussi.
‫Et j'ai en fait suivi cette règle
‫tout au long du cours parce que je l'aime moi-même en tant
‫que pratique de codage.
‫Et donc, ouais, débarrassons-nous de ça d'autre ici alors.
‫Je crois vraiment, et je le crois depuis longtemps,
‫que cela semble beaucoup plus agréable sans ces instructions if else,
‫mais uniquement avec un if, comme celui-ci ici, puis incluez
‫le else en dehors de cela.
‫D'accord, c'est ce que nous avons ici maintenant.
‫Mettons aussi A et B ici.
‫B.
‫Et en fait, faisons exactement la même chose ici.
‫Alors reviens.
‫Renvoyez celui-ci également.
‫Alors ici, A et B aussi.
‫Donc, en fait, cela me semble plus propre.
‫Maintenant, nous avons A ici et A
‫à nouveau, mais bon, peu importe à ce stade.
‫Bien.
‫Alors revenez ici.
‫Revenez ici.
‫Et avant qu'il ne me crie dessus, supprimons ça.
‫Et donc c'est encore mieux.
‫Alors mettez ça ici.
‫Et ça devrait être ça en fait.
‫Bien?
‫Par souci
‫d'exhaustivité, copions également ce commentaire ici.
‫Et puis appelez celui-ci à nouveau B.
‫Bien.
‫Parfait.
‫En fait, copions celui-ci ici aussi dans
‫la fonction de développement.
‫Parce qu'à l'heure actuelle, une fois que nous avons
‫renvoyé cette erreur, nous n'avons vraiment aucun moyen de voir l'erreur complète.
‫D'accord, alors débarrassez-vous de cela pour le rendre plus visible.
‫Et maintenant c'est beau.
‫D'accord.
‫Alors quittons-le ici maintenant
‫afin que nous puissions démarrer notre application de production.
‫Donc, en gros, l'exécute maintenant en production.
‫Et nous avons un script
‫pour ce qui s'appelle npm run start production.
‫D'accord?
‫Donc, si nous testons cela maintenant, nous
‫ne devrions plus voir cette chaîne ici, vous vous souvenez ?
‫Parce qu'à ce stade, nous n'avons aucune gestion d'erreur
‫pour un nom de tournée invalide comme celui-ci.
‫D'accord?
‫À droite?
‫Puisque nous sommes
‫en production et que ce n'est pas une erreur
‫opérationnelle, eh bien, nous ne voulons pas voir cela.
‫Et c'est donc ce que nous venons de coder avant.
‫Et donc en effet, c'est le message d'erreur plus générique.
‫À droite?
‫Mais si nous le remettons ensuite ici dans le contrôleur de vues,
‫donc si nous remettons cette gestion
‫d'erreur, alors bien sûr, puisque ce sera
‫maintenant une erreur opérationnelle, alors nous obtiendrons bien sûr
‫cette chaîne d'erreur.
‫Parce qu'il est toujours
‫agréable de montrer un message amical à l'utilisateur.
‫Mais comme vous l'avez vu, cela ne s'est pas réellement produit.
‫Alors pourquoi est-ce?
‫Eh bien, nous sommes dans l'erreur de production.
‫Nous sommes sur le site rendu.
‫Et effectivement, nous avons une erreur opérationnelle.
‫Et donc ...
‫Nous avons cela en place.
‫Et donc en effet, cela devrait fonctionner comme nous l'espérions.
‫Eh bien, essayons simplement de connecter à la console
‫le message de point
‫d'erreur juste pour voir si nous l'avons réellement obtenu à ce stade.
‫Bien.
‫Rechargez ce gars.
‫Et donc il y a l'erreur.
‫Mais quand même, c'est très bizarre.
‫C'est donc bien enregistré toute l'erreur.
‫Très étrange.
‫Parce que pour une raison quelconque, le message n'est pas non plus là.
‫Reprenons donc le développement.
‫Alors npm commence.
‫Bien.
‫Et ici, pour une raison quelconque, il a accès à ce message.
‫Cela signifie donc que dans notre contrôleur de
‫vues, nous définissons correctement ce message.
‫Exécutez-le à nouveau en production.
‫C'est donc le genre de trucs qu'on n'aime pas, non ?
‫Voyons donc où notre erreur de production
‫est réellement créée.
‫Et c'est ici.
‫Donc, cet objet d'erreur que nous utilisons ici en production
‫est une copie de cette erreur, n'est-ce pas ?
‫Donc celui qui entre dans ce middleware.
‫Et donc jetons un coup d'œil aux deux dans
‫la console.
‫Donc message de point d'erreur.
‫Et puis aussi le message de point d'erreur.
‫Alors recommencez.
‫D'accord.
‫Nous voyons donc cette
‫erreur, donc celle qui vient directement dans notre fonction
‫middleware, a effectivement le message.
‫Mais alors celui que nous copions, donc erreur, pour une raison
‫quelconque, ne le fait pas.
‫Et donc cette astuce que nous faisons ici,
‫pour une raison quelconque, ne copie pas le message avec,
‫d'accord ?
‫Et donc faisons une solution rapide à cela.
‫Et disons que le message de point d'erreur est égal au message de point d'erreur.
‫Bien?
‫Et cela devrait alors résoudre le problème, espérons-le.
‫Ah, d'accord.
‫Nous y voilà.
‫À droite.
‫Alors maintenant, vous voyez qu'ils sont en effet les mêmes.
‫Et donc c'était ça le problème.
‫Bien?
‫Donc, sans cela,
‫toutes les erreurs ne fonctionneraient pas correctement.
‫Donc, si nous mettons cela ici et
‫essayons de nous connecter par exemple, alors admin@natours. io.
‫Donc, vous voyez, nous obtenons également une erreur indéfinie ici.
‫Bien.
‫Et c'est encore parce que nous sommes
‫en production et que notre objet d'erreur n'a pas correctement copié le message.
‫Je ne sais pas pourquoi je n'ai pas compris celui-ci alors
‫que nous étions en train de le mettre en œuvre.
‫Mais peut-être que je ne l'ai pas testé de manière suffisamment approfondie.
‫D'accord?
‫Et de toute façon, si nous
‫essayons cela maintenant, nous obtenons alors le message d'erreur correct
‫que nous attendons.
‫Bien.
‫Super.
‫Donc c'est résolu.
‫Et donc cela conclut réellement cette vidéo.
‫Donc, juste en
‫conclusion, nous avons maintenant une stratégie
‫de gestion des erreurs qui fonctionne pour le développement, comme avant, et
‫aussi pour la production.
‫Et puis dans chacun d'eux, nous avons essentiellement deux branches.
‫L'un envoie le message d'erreur pour l'API, ce
‫qui est exactement ce que nous
‫avions auparavant, puis nous avons également maintenant une sorte de gestionnaire
‫pour le site Web rendu.
‫Et donc dans ce cas, nous rendons notre modèle d'erreur.
‫Ensuite, en production, nous distinguons
‫également le site Web rendu et l'API.
‫Et puis comme
‫précédemment, à l'intérieur de chacune de
‫ces branches, on distingue alors aussi
‫les erreurs d'opération et les erreurs inconnues.
‫Donc opérationnel et inconnu.
‫Et puis à l'intérieur rendu, également opérationnel et inconnu.
‫Et donc pour le site Web
‫rendu, si nous avons une erreur opérationnelle, donc une erreur de
‫confiance, alors nous envoyons notre message d'erreur de confiance.
‫Mais dans le cas où nous ne faisons
‫pas confiance à l'erreur,
‫donc lorsque nous ne la connaissons pas, nous renvoyons simplement ce message générique à l'utilisateur.
‫Tellement bon.
‫Arrêtons cela ici et retournons au développement
‫et terminons cette conférence.
‫Alors à bientôt pour le prochain.