Dit soort dingen debuggen

Beginners denken dat ervaren ontwikkelaars geen fouten maken.

De waarheid is anders.

Ervaren ontwikkelaars vinden en herstellen fouten alleen sneller.

Ik heb onlangs een full-stack projectmanagement-app gebouwd met React, Zustand, Express, Prisma en PostgreSQL. Ik liep tegen tientallen kleine bugs aan. Deze bugs hebben me geleerd hoe moderne frontend-apps werken.

Dit zijn de lessen die ik heb geleerd:

  • React useEffect en Async Je kunt geen async-functie rechtstreeks in useEffect doorgeven. React verwacht een cleanup-functie of niets. Een async-functie geeft een Promise terug, wat deze regel overtreedt. Gebruik in plaats daarvan een functie binnen de effect.

  • De vergeten functie Ik schreef ooit een async-functie binnen een useEffect, maar riep deze nooit echt aan. De component werd gemount, maar er gebeurde niets. Soms zijn bugs simpelweg ontbrekende functie-aanroepen.

  • Axios datastructuur Axios geeft een object terug. Je data staat in response.data. Als je probeert de volledige response op te slaan in je state, zal je app falen.

  • URL-duplicatie Mijn Axios-instantie had een base URL. Ik voegde de API-prefix opnieuw toe in mijn requests. Dit creëerde dubbele paden zoals /api/api/projects. Controleer altijd je abstracties.

  • Navigatiefouten De Navigate-component werkt alleen tijdens het renderen. Als je een gebruiker wilt doorsturen na een klik, gebruik dan in plaats daarvan de useNavigate-hook.

  • Backend-contracten Mijn backend stuurde een property genaamd accessToken. Mijn frontend zocht naar een property genaamd token. Omdat de namen niet overeenkwamen, bleef mijn auth state undefined. De frontend en backend moeten altijd dezelfde namen gebruiken.

  • Timing-problemen Mijn app probeerde notificaties op te halen voordat de gebruiker was ingelogd. Dit veroorzaakte een 401-fout. De oplossing was niet om te controleren op notificaties, maar om de authenticatie te controleren voordat de request werd gedaan.

De belangrijkste les ging over mijn workflow. Stop met gissen.

Gebruik in plaats daarvan dit proces:

  • Controleer de browserconsole.
  • Controleer het Network-tabblad.
  • Inspecteer de API-response.
  • Verifieer het backend-contract.
  • Inspecteer je state.
  • Volg de data van de database naar de UI.

Software gaat niet over snel typen. Het gaat om het begrijpen van hoe data beweegt. Tutorials laten je het makkelijke pad zien. Projecten leren je het echte pad.

Bouw iets echts. De bugs zullen je meer leren dan welke tutorial dan ook.

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