Fare il debugging di queste cose

I principianti pensano che gli sviluppatori esperti non commettano errori.

La realtà è diversa.

Gli sviluppatori esperti trovano e correggono semplicemente gli errori più velocemente.

Recentemente ho costruito un'app di gestione progetti full-stack usando React, Zustand, Express, Prisma e PostgreSQL. Mi sono imbattuto in decine di piccoli bug. Questi bug mi hanno insegnato come funzionano le moderne app frontend.

Ecco le lezioni che ho imparato:

  • React useEffect e Async Non puoi passare direttamente una funzione async in useEffect. React si aspetta una funzione di cleanup o nulla. Una funzione async restituisce una Promise, il che viola questa regola. Usa invece una funzione all'interno dell'effetto.

  • La funzione dimenticata Una volta ho scritto una funzione async all'interno di un useEffect ma non l'ho mai chiamata effettivamente. Il componente è stato montato, ma non è successo nulla. A volte i bug sono solo chiamate a funzioni mancanti.

  • La struttura dei dati di Axios Axios restituisce un oggetto. I tuoi dati si trovano all'interno di response.data. Se provi a salvare l'intera risposta nel tuo stato, l'app fallirà.

  • Duplicazione dell'URL La mia istanza Axios aveva una base URL. Ho aggiunto nuovamente il prefisso API nelle mie richieste. Questo ha creato percorsi doppi come /api/api/projects. Controlla sempre le tue astrazioni.

  • Errori di navigazione Il componente Navigate funziona solo durante il rendering. Se vuoi spostare un utente dopo un clic, usa invece l'hook useNavigate.

  • Contratti del backend Il mio backend inviava una proprietà chiamata accessToken. Il mio frontend cercava una proprietà chiamata token. Poiché i nomi non coincidevano, il mio stato di autenticazione rimaneva undefined. Frontend e backend devono sempre usare gli stessi nomi.

  • Problemi di tempistica La mia app cercava di recuperare le notifiche prima che l'utente effettuasse l'accesso. Ciò ha causato un errore 401. La soluzione non è stata controllare le notifiche, ma verificare l'autenticazione prima di effettuare la richiesta.

La lezione più importante riguardava il mio flusso di lavoro. Smetti di tirare a indovinare.

Usa invece questo processo:

  • Controlla la console del browser.
  • Controlla la scheda Network.
  • Ispeziona la risposta dell'API.
  • Verifica il contratto del backend.
  • Ispeziona il tuo stato.
  • Segui i dati dal database all'interfaccia utente.

Sviluppare software non significa digitare velocemente. Significa capire come si muovono i dati. I tutorial ti mostrano la strada facile. I progetti ti insegnano la strada vera.

Costruisci qualcosa di reale. I bug ti insegneranno più di qualsiasi tutorial.

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