Comment gérer les erreurs avec Remix (ErrorBoundary)

00:00 Que tu as déjà géré des erreurs dans ton application Linux Si tu ne l'as pas encore fait, je vais te montrer comment l'intégrer en moins de cinq minutes tout en t'expliquant pourquoi tu devrais l'intégrer. La gestion des erreurs va éviter à ton application d'afficher des gros messages d'erreur comme celui-ci et comme celui-ci à tous tes clients en production. À la place, tu pourras intégrer un message d'erreur qui intègre ton design système avec des explications sur l'erreur et la marche à suivre pour rassurer tes utilisateurs. On va tout de suite s'y mettre. Là, je suis sur la documentation de remix et j'ai cliqué sur get started et j'ai copié la commande MPX créer remix dans mon terminal, ce qui m'a généré la configuration par défaut de remix.

00:38 On va donc tout de suite lancer cette application remix en lançant la commande NPM rundev dans le terminal et nous allons l'ouvrir sur le port cinquante-et-un soixante-treize. On a donc notre application et notre page d'accueil ici. On va supprimer tout son contenu et nous allons ensuite créer un tableau par exemple de nom ici et nous allons maintenant boucler dessus côté client. Je vais les exporter à cet endroit côté serveur et je vais maintenant boucler dessus dans une liste, ce qui finit par nous donner ça. Nous avons une liste de liens et si on clique sur un des liens, ça nous renvoie à l'url slash user slash Ryan qui est le nom dans mon tableau de nom que j'ai exporté à cet endroit.

01:15 Comme vous pouvez le voir, nous avons une erreur quatre-cent-quatre et elle a été générée automatiquement par l'application Remix. Si on inspecte l'élément et qu'on se rend dans la console et qu'on actualise la page, on peut voir un message ici et développeur, tu peux améliorer l'expérience utilisateur en intégrant la gestion des erreurs. Tu as juste à cliquer sur ce lien pour démarrer. On va cliquer et là on peut voir qu'il y a une doc complète qui s'appelle Error en ligne sur la documentation de remix et ça nous parle notamment d'Erer Bandly. Vous avez peut-être déjà entendu parler des Error Bandly.

01:43 C'est une librairie de React qui nous permet de gérer les erreurs pour toutes les applications React. Et dans Remix, le concept est similaire et ça va ressembler à ça ce que nous allons faire, c'est-à-dire que nous allons avoir une application avec des layouts imbriquées, par exemple une sidebar, ensuite un menu et ensuite des données. Mais si on a une erreur à cet endroit-là, c'est-à-dire dans l'enfant, au lieu d'afficher l'erreur sur toute la page, on ne va afficher l'erreur que sur le morceau en question, ce qui est donc effectivement une meilleure expérience pour notre utilisateur. Parce qu'il pourra continuer de cliquer sur les autres liens, au final il pourra continuer d'utiliser cette application même si cette partie est buggée. Et ça nous aide également parce qu'on est capable de savoir à quel endroit l'erreur a été générée.

02:26 Là, on peut voir que ça sera donc dans ce fichier qui est le fichier dollars invoiced que cette erreur a été générée. Et pour ce faire, dans notre route, nous devons exporter un composant qu'on va appeler error boundgry. Donc ce qu'on va faire, c'est qu'on va ensemble recréer un écran un peu similaire, mais beaucoup moins complexe pour comprendre comment Remix gère les erreurs. On retourne donc dans la trappe et on va retourner sur la page d'accueil ici. Et ce qu'on va faire, c'est qu'on va créer cette route que nous avons appelé users.

02:52 Donc nous allons créer un premier fichier qu'on va appeler users point TSX. Ce que ça va faire, c'est que ça va donc exporter par défaut un composant React, une page qu'on va appeler users et nous allons aussi importer notre tableau de name comme ceci, ainsi que le lien. En fait, ça va être exactement la même page, sauf qu'on va rajouter un h un, je veux dire liste de nos utilisateurs et on va mettre le texte en Excel comme ceci. Si on retourne maintenant sur la page slash shuters, on peut voir qu'on a exactement la page que nous venons de créer et cette route sera donc embriquée. On va donc rajouter un outlet ici qui va contenir l'enfant de la route.

03:28 Donc maintenant qu'on a créé cette route, on va tout de suite créer la route enfant. On va donc appeler ça users point dollar user name et ça va contenir donc le nom de l'utilisateur que nous venons de créer. Ça va être un composant très simple. Ce qu'on va faire, c'est qu'on ne va même pas coder une logique serveur, on va simplement récupérer le paramètre d'URL qui s'appelle UserName ici. Comme nous avons nommé notre fichier dollar UserName, ça donne le nom à notre paramètre d'URL UserName comme ceci.

03:54 Ce qu'on va faire dans ce fichier, c'est que nous allons afficher ce nom-là ici dans un h deux et on peut supprimer le reste de notre code. Maintenant, si on clique sur Ryan, on peut voir qu'on est sur la route enfant, la route imbriquée, on est donc dans slash shooters slash Ryan et ça fonctionne très bien, ça affiche notre route enfant. Mais qu'est-ce qui se passe si on génère une erreur Ici, on va essayer, on va générer une erreur. Ça ne marche pas comme ceci. Là, on peut voir que l'application a entièrement crash et on a une erreur très moche.

04:22 On est incapable de faire quoi que ce soit. On ne voit plus la navbar. On est incapable de faire quoi que ce soit. On ne voit même plus la navbar. On ne peut rien faire.

04:28 Alors comment faire Il nous suffit d'exporter cette fonction qu'on va appeler Error Bountry ici qu'on retrouve à cet endroit et nous allons la coller. On possède également donc ce composant qui s'appelle use root error. Maintenant, ce composant, c'est un composant react standard. C'est-à-dire qu'on va return par exemple un div qui aura donc du padding, un texte Excel et ça va afficher un message d'erreur par exemple, une erreur est survenue. Et ce qu'on a envie de faire, vu qu'on ne connaît pas encore le type de cette erreur, c'est de l'afficher sous forme de string comme ceci.

05:01 On va donc rajouter notre erreur et on va voir ce qui va être affiché. Maintenant que c'est fait, on peut retourner à cet endroit et se trouve une nouvelle erreur this is anero et là on peut voir qu'on a l'affichage de notre erreur boundry. Ça affiche donc une erreur est survenue, error this un error. Et si vraiment beaucoup plus cool parce que c'est maintenant clean. Effectivement, on continue de voir notre navbar ici et on peut changer d'utilisateur.

05:26 Il y aura l'erreur pour tous les utilisateurs, mais au moins ça offre une meilleure expérience à nos utilisateurs. Maintenant, que se serait-il passé si cette erreur avait été déclenchée depuis le serveur On va tout de suite le tester en ajoutant une méthode qu'on va appeler l'odeur comme ceci. C'est donc une méthode asynchrone comme ceci. Et ce qu'on va faire à cet endroit, c'est qu'on va tout simplement se trouver une nouvelle erreur, une erreur serveur inattendu et survenue. Et ici, on peut voir qu'on a toujours cet affichage dans notre vue côté client.

05:55 Sauf que l'erreur n'a pas été déclenchée côté client, elle a été déclenchée côté serveur. Mais comme on a toujours utilisé le même objet ici d'erreur, ça a bien fonctionné. Ce qu'on a envie maintenant, c'est de générer ce message d'erreur sous forme de string. Donc ce qu'on peut faire, c'est qu'on peut mettre erreur message est égal à une erreur inattendue et survenue et on peut rajouter un if error in stand soft error, alors error message est égal à error point message par exemple. Maintenant ce qu'on va faire, c'est qu'on va essayer d'afficher notre erreur forme de string dans l'application et là on peut voir que ça a très bien fonctionné.

06:29 Donc on va pouvoir remplacer ce petit composant par un composant un peu plus poussé. À cet endroit-là, on va donc envoyer à la place ce composant qui prend comme propre erreur message sous forme de string comme ceci. Et maintenant, on peut voir qu'on a une erreur un peu plus stylée. Mince une erreur, nous sommes désolé. Si l'erreur persiste, vous pouvez contacter le support client pour davantage d'informations.

06:48 L'erreur était, une erreur serveur inattendue et survolée. Donc maintenant, ça va être vous qui allez gérer vous-même vos propres erreurs. Ce qui est cool avec cet or, c'est que vous pouvez exploiter l'application comme vous le souhaitez. Par exemple, admettons qu'on veuille récupérer un utilisateur. Du coup, ce qu'on va faire, c'est qu'on va chercher l'utilisateur.

07:04 Donc là, on va l'importer depuis la route index et on va chercher l'utilisateur qui a ce nom-là, qui est présent dans les paramètres. Donc, allons le faire tout de suite, on va récupérer les paramètres de la méthode loader. On va faire donc comme côté client. Ici, on va récupérer le user name depuis cet objet par ams. Nous allons tout simplement faire une comparaison avec le nom de notre tableau de nom et le nom de notre paramètre en rajoutant un to low-arcase pour être vraiment sûr que ça fonctionne bien.

07:29 Bien sûr, là, on a cette erreur, username et peut-être undefined. Donc ça, c'est vraiment top, c'est ce qu'il nous fallait. On va rajouter une condition. Si username est undefined, alors on envoie l'erreur, aucun utilisateur trouvé. Maintenant, on cherche l'utilisateur pour voir s'il existe et on rajoute une deuxième condition, si l'utilisateur n'existe pas, alors on va mettre un message personnalisé.

07:49 L'utilisateur nommé user name n'a pas été trouvé. Et enfin, on va faire un dernier message if user et user to loorkase est égal à par exemple Ryan, alors ce compte a été suspendu. Sinon, on va renvoyer par exemple côté client, le nom de l'utilisateur ici. Maintenant que c'est fait, au lieu de récupérer le nom de l'utilisateur depuis les paramètres d'URL côté client, on va le récupérer depuis ce que le serveur nous a renvoyé en cas de succès. Donc, on va typer ce loader et on va récupérer le user name ici, qu'on va renommer comme ceci.

08:22 Maintenant, on peut voir que pour tous les utilisateurs, ça fonctionne très bien. On les retrouve maintenant pour Ryan, si on essaye de le récupérer, on peut voir qu'on a le message d'erreur. Mince, une erreur, l'erreur était, ce compte a été suspendu. On peut d'ailleurs effacer ce message d'erreur là, mais comme notre logique d'erreur est plus aboutie que ça, l'erreur, elle est vraiment très explicite et ça va nous permettre de débugger beaucoup plus facilement. Par exemple, si on avait cherché Virgile, là on peut voir que l'erreur elle est différente.

08:48 L'utilisateur nommé Virgile n'a pas été trouvé. Maintenant, comment faire en cas d'erreur quatre-cent-quatre Parce que ce qu'on avait vu au début, c'est une erreur quatre cent quatre basique. Par exemple, si je cherche Virgile comme ceci, on peut voir que j'ai cette erreur. Quatre cent quatre nat thorn. Et bien, c'est exactement le même principe.

09:04 Là, on va ouvrir l'explorateur de fichiers et on va rajouter une route qu'on va appeler dollars et c'est tout. Dollar point TFX et maintenant, on peut rajouter la logique nous souhaitons côté serveur et côté client, ce qu'on va faire, c'est qu'on va exporter ce composant-là et on va ensuite exporter celui-là et on va maintenant tout réimporter à cet endroit-là. Ce qu'on va faire aussi, c'est qu'on va exporter par défaut une fonction, on va appeler par exemple error page qui va renvoyer notre error montbrey comme ceci. Maintenant, on peut voir que j'ai le message générique, une erreur inattendue est survenue quand j'accède à la page de Virgile. Parce que c'est l'erreur par défaut qu'on renvoie dans notre props, ici qui s'appelle error component.

09:41 Mais ce qu'on aurait pu rajouter, c'est un traitement supplémentaire. Ici, par exemple, nous allons importer cette méthode Loader, on va ensuite exporter dans cette route dollars point TFX. Et là, à cet endroit, ce qu'on peut faire, c'est essayer de récupérer le nom qui a été placé ici. Peut-être que l'utilisateur s'est trompé et qu'il a voulu rechercher Ryan, par exemple. Nous, on sait a voulu rechercher Ryan par exemple.

09:58 Nous, on sait que Ryan existe. Donc ce qu'on peut faire, c'est qu'on peut rechercher ici les noms, mais comme on ne possède pas de paramètres url, ici, il n'a pas été nommé vu que notre page s'appelle seulement dollars point TFX, ce qu'on peut faire à la place, c'est récupérer l'objet request et si on fait un console log de l'objet request point URL, en ouvrant le terminal, on peut voir qu'on a toutes ces informations, le href, le protocole, le host, le port et surtout le passnali ici. Donc ce qu'on pourrait faire en soi, c'est transformer cette url. On va aller la régénérer pour qu'elle soit maintenant typée et qu'elle prenne le type de url et ensuite on pourrait récupérer par exemple son pass name comme ceci. Maintenant si on affiche les log, on la retrouve bien ici, ça s'appelle slash ryan et ce qu'on pourrait faire, c'est qu'on pourrait chercher les utilisateurs qui possèdent le nom par exemple de l'url qui a été tapée.

10:47 Ça veut dire qu'on supprimerait ce morceau de logique et on mettrait par exemple username est égal à URL point passname. Et bien sûr, on va retirer le slash au tout début, pour récupérer seulement le string final. Maintenant, on a toujours cette erreur, si on n'a rien trouvé, dans ce cas-là, aucun utilisateur n'a été retrouvé. Maintenant, on récupère l'utilisateur et cette fois, on va changer la logique. On va mettre que si on a trouvé un utilisateur, alors au lieu de renvoyer une erreur, on va rediriger l'utilisateur avec la méthode re direct, on importe depuis remix et on va le rediriger sur la bonne route.

11:18 Donc cette fois, ce qu'on a fait, c'est qu'on essaye de sauver cette erreur quatre-cent-quatre. On a un utilisateur qui charge une page de notre site et nous, on n'a pas envie qu'il voit ce message d'erreur. Nous, on a envie de le sauver, c'est-à-dire de le renvoyer sur une page qui existe pour qu'il puisse rester plus longtemps sur notre application. Donc, on cherche s'il a tapé par exemple une url d'utilisateur. Et là, on peut voir que ça a tout de suite fonctionné.

11:39 J'ai tapé Ryan et ça me redirige vers l'utilisateur Ryan. On peut rajouter un console log ici qui va qui va s'appeler redirecting to user plus user comme ceci. Et maintenant, si on ouvre le terminal à nouveau, qu'on accède à la route slash Ryan qui n'a pas été déclarée, on peut voir ici qu'on a le console log, redirecting to user Ryan. Donc ça a vraiment très bien fonctionné. Sauf que maintenant, on a le message d'erreur, mince, ce compte a été suspendu parce qu'on avait banni Ryan.

12:05 Donc ça ne marche pas trop, on va le faire plutôt pour Michael ici. Si on fait donc slash Michael comme ceci, on peut voir que ça me redirige bien sur l'utilisateur Michael parce qu'on est passé dans cette condition et qu'on a redirigé l'utilisateur qui a été retrouvé. Par contre, si on ne trouve vraiment pas, là alors, on peut envoyer le message d'erreur, la page demandée n'a pas été retrouvée, comme ceci. Maintenant, si on accède à la page par exemple Virgile, on peut voir qu'on a, la page demandée n'a pas été retrouvée, qui est donc le message d'erreur qui a été récupéré depuis le hook use rootloader et qui est ensuite passé en paramètre dans notre composant. Maintenant, bien sûr, si on retourne sur notre liste d'utilisateurs, là, on peut voir pour Ryan, on ne trouve vraiment pas le compte qui a été suspendu.

12:45 Mais alors, qu'est-ce qui se passe si une erreur est exécutée au-dessus dans la page user Si c'est le cas, par exemple, on va exécuter une erreur à ce niveau-là dans le composant. Là, on peut voir qu'on a toujours notre erreur générique, aucun utilisateur trouvé. Donc ce qu'on a besoin de faire pour protéger vraiment toutes nos pages, c'est qu'on a besoin d'exporter du coup ce composant error mandry et on va l'exporter dans le fichier root. Tfx ici, il se retrouve à la racine de notre application. Comme ça, ça va remplacer ce composant là qu'on a par défaut.

13:14 On va donc faire ça, on importe le hook et le composant comme ceci et maintenant on peut voir qu'on est vraiment protégé sur toutes les pages. Maintenant, quoi qu'il advienne, on a un message d'erreur à la racine qui a été designé, qui correspond au thème de notre application et c'est ce qu'on voulait. Maintenant, ce qu'on pourrait faire pour aller plus loin, c'est ajouter des logs, par exemple avec Centry ou nous envoyer un mail ou un message sur Discord, sur Slack, sur Telegram en cas d'erreur. Comme ça, on est vraiment safe Et à chaque fois qu'un message d'erreur a lieu, la logique dans notre composant Error Monnerie va nous envoyer ce message et on sera tout de suite prévenu. Voilà, j'espère que ça vous a plu et on se retrouve très vite.

13:51 À plus.