Correction de bugs désagréables (Comprendre les modaux) - Partie 1

Débogage d'un bug ennuyeux dans un projet Next.js

La semaine dernière, j'ai commencé à travailler sur un nouveau projet principalement construit avec Next.js et stylisé à l'aide de la bibliothèque de composants Shadcn. Lors de la construction, j'ai rencontré un bug particulièrement ennuyeux qui non seulement m'a ralenti mais m'a également poussé à reconsidérer mon approche du débogage et la compréhension des outils avec lesquels je travaille.

Pourquoi écrire à ce sujet ?

Le but de la rédaction de cet article est de me forcer à approfondir la compréhension du fonctionnement interne des composants et des frameworks. Dans le passé, j’ai écrit du code qui fonctionnait bien mais je n’avais pas le temps de comprendre en profondeur ce que j’avais écrit. Cette fois, je souhaite adopter une approche systématique pour m'obliger à apprendre le fonctionnement interne des choses et rien ne vous oblige à ralentir lors du codage en cas de bug. Écrire à ce sujet m'aidera à réfléchir, à apprendre et à partager mon parcours.

Approche systématique du débogage

Pour résoudre ce problème, j'ai divisé le processus de débogage en trois étapes systématiques :

1. Répliquer le bug : Revenez au commit spécifique où le problème s'est produit, examinez le code et reproduisez l'erreur de manière fiable.
2. Comprenez pourquoi le bug se produit : Analysez la cause profonde et l'interaction entre les composants qui ont conduit au problème.
3. Corrigez le bug : Implémentez une solution et validez-la.

Cet article couvrira la première étape en détail.

---

Répliquer le bug

Voici le composant problématique qui m'a causé tant d'ennuis :

Extrait de code : OrganizationDetailsModal

"use client";
import { motion } from "framer-motion";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { useState } from "react";

const OrganizationDetailsModal: React.FC<OrganizationDetailsModalProps> = ({ hideModal, organization }) => {
  const [open, setOpen] = useState(true);
  const handleClose = () => {
    hideModal();
    setOpen(false);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) {
          handleClose();
        }
      }}
    >
      <DialogContent
        onCloseAutoFocus={(e) => {
          e.preventDefault();
          const safeElement = document.getElementById("safe-focus-element");
          if (safeElement) safeElement.focus();
        }}
        className="flex max-h-[80vh] w-[400px] flex-col rounded-xl bg-white px-5 py-4 overflow-y-auto"
      >
        <DialogHeader>
          <div className="flex justify-between items-center">
            <DialogTitle>Organisation Details</DialogTitle>
            <DialogClose asChild>
              <button onClick={handleClose} className="text-gray-700 hover:text-gray-900">X</button>
            </DialogClose>
          </div>
        </DialogHeader>

        <div className="space-y-4">
          <div className="flex justify-between">
            <span className="text-sm font-semibold">Organization Name</span>
            <span className="text-sm">{organization.organizationName}</span>
          </div>
        </div>

        <DialogFooter>
          <button onClick={handleClose} className="bg-primary-green text-white px-4 py-2 rounded-md">
            Back
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default OrganizationDetailsModal;

Extrait de code : menu déroulant

<DropdownMenu>
  <DropdownMenuTrigger className="focus:outline-none">
    <MoreHorizontal className="h-5 w-5 cursor-pointer" />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start" sideOffset={4} className="rounded-md p-1 shadow-md">
    {rowMenuItems.map((menuItem, menuIndex) => (
      <DropdownMenuItem
        key={menuIndex}
        onClick={() => menuItem.onClick(row)}
        className="flex justify-start gap-2 px-3 py-2 hover:bg-gray-100"
      >
        {menuItem.icon && <Image src={menuItem.icon} alt={menuItem.label} />}
        <span>{menuItem.label}</span>
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>

Que font ces composants

1. Menu déroulant : Lorsque vous cliquez dessus, ce composant affiche une liste déroulante d'actions.

1. Composant de dialogue : Cette boîte de dialogue modale est déclenchée en sélectionnant une action dans la liste déroulante. Il affiche des informations détaillées et dispose d'un bouton de fermeture pour les ignorer.

Le bug

Lorsque vous cliquez sur la liste déroulante, elle s'ouvre comme prévu. Dans la liste déroulante, il y a une option pour afficher les détails, ce qui déclenche l'apparition du composant Dialog. Le problème se produit lorsque la boîte de dialogue est fermée : plus rien d'autre sur la page n'est cliquable par la suite. C'était déroutant car les deux composants semblaient fonctionner parfaitement isolément.

---

La frustration

Malgré plusieurs heures d’enquête, je n’ai pas pu identifier la cause du problème. L'interaction entre les composants de la liste déroulante et de la boîte de dialogue semble créer une sorte d'incohérence d'état ou de problème DOM.

Finalement, j'ai choisi de remplacer entièrement l'un des composants, ce qui a résolu le problème temporairement. Cependant, je suis resté insatisfait sans comprendre la cause profonde, ce que j'ai l'intention d'explorer davantage.

Conclusion

Ceci conclut la première partie de mon parcours de débogage : répliquer le bug et documenter le problème. Dans la partie suivante, j'approfondirai le fonctionnement interne de ces composants pour comprendre ce qui a pu provoquer ce comportement inhabituel. Ce faisant, j'espère obtenir des informations qui m'aideront à corriger des bugs similaires à l'avenir et à évoluer en tant que développeur.

Restez à l'écoute pour la partie 2 : Comprendre pourquoi le bug se produit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!