Beim Debuggen lernen

Anfänger glauben, dass erfahrene Entwickler keine Fehler machen.

Die Wahrheit sieht anders aus.

Erfahrene Entwickler finden und beheben Fehler nur schneller.

Ich habe vor Kurzem eine Full-Stack-Projektmanagement-App mit React, Zustand, Express, Prisma und PostgreSQL gebaut. Dabei bin ich auf Dutzende kleiner Bugs gestoßen. Diese Bugs haben mir beigebracht, wie moderne Frontend-Apps funktionieren.

Hier sind die Lektionen, die ich gelernt habe:

  • React useEffect und Async Man kann keine async-Funktion direkt in useEffect übergeben. React erwartet entweder eine Cleanup-Funktion oder gar nichts. Eine async-Funktion gibt ein Promise zurück, was gegen diese Regel verstößt. Verwende stattdessen eine Funktion innerhalb des Effects.

  • Die vergessene Funktion Ich habe einmal eine async-Funktion innerhalb eines useEffect geschrieben, sie aber nie tatsächlich aufgerufen. Die Komponente wurde gemountet, aber es passierte nichts. Manchmal sind Bugs einfach nur fehlende Funktionsaufrufe.

  • Axios-Datenstruktur Axios gibt ein Objekt zurück. Deine Daten befinden sich in response.data. Wenn du versuchst, die gesamte Response in deinen State zu speichern, wird deine App scheitern.

  • URL-Duplizierung Meine Axios-Instanz hatte eine Base URL. Ich habe den API-Präfix in meinen Requests erneut hinzugefügt. Das führte zu doppelten Pfaden wie /api/api/projects. Überprüfe immer deine Abstraktionen.

  • Navigationsfehler Die Navigate-Komponente funktioniert nur während des Renderings. Wenn du einen Benutzer nach einem Klick weiterleiten möchtest, verwende stattdessen den useNavigate-Hook.

  • Backend-Verträge Mein Backend sendete eine Property namens accessToken. Mein Frontend suchte nach einer Property namens token. Da die Namen nicht übereinstimmten, blieb mein Auth-State undefined. Frontend und Backend müssen immer dieselben Namen verwenden.

  • Timing-Probleme Meine App versuchte, Benachrichtigungen abzurufen, bevor sich der Benutzer eingeloggt hatte. Dies verursachte einen 401-Fehler. Die Lösung bestand nicht darin, die Benachrichtigungen zu prüfen, sondern die Authentifizierung zu prüfen, bevor der Request gestellt wurde.

Die wichtigste Lektion betraf meinen Workflow. Hör auf zu raten.

Verwende stattdessen diesen Prozess:

  • Überprüfe die Browser-Konsole.
  • Überprüfe den Network-Tab.
  • Untersuche die API-Response.
  • Überprüfe den Backend-Vertrag.
  • Untersuche deinen State.
  • Verfolge die Daten von der Datenbank bis zur UI.

Bei Software geht es nicht darum, schnell zu tippen. Es geht darum zu verstehen, wie sich Daten bewegen. Tutorials zeigen dir den einfachen Weg. Projekte lehren dich den echten Weg.

Baue etwas Reales. Die Bugs werden dir mehr beibringen als jedes Tutorial.

Quelle: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5