Debugging delle Applicazioni React

Introduzione

Questo articolo esplora strumenti e tecniche per il debugging delle applicazioni React: interpretazione dei messaggi di errore, debugging di errori logici con il debugger del browser, React StrictMode per individuare problemi durante lo sviluppo, e React DevTools per ispezionare componenti e stato.

Analisi dei Messaggi di Errore

React mostra messaggi di errore quando qualcosa va storto. Il messaggio principale descrive il tipo di errore e quale proprietà o operazione ha causato il problema. La stack trace mostra l’elenco delle chiamate di codice che hanno portato all’errore, indicando funzione, file e riga di codice dove si è verificato il problema.

Esempio Pratico: Errore su Valore Undefined

Un errore comune si verifica quando si cerca di accedere a una proprietà di un valore undefined. Ad esempio, se si cerca di leggere name da un oggetto che non esiste, React mostrerà un errore simile a:

1
Cannot read properties of undefined (reading 'name')

Il messaggio indica che si sta cercando di accedere alla proprietà name di un oggetto undefined, nella funzione e riga indicate nella stack trace.

1
function ProductList({ products }) {
2
  // Se products è vuoto, products[0] sarà undefined
3
  const firstProduct = products[0];
4

5
  // Questo causerà un errore se firstProduct è undefined
6
  return (
7
    <div>
8
      <h2>Primo prodotto: {firstProduct.name}</h2>
9
      <p>Prezzo: €{firstProduct.price}</p>
10
    </div>
11
  );
12
}

1
function ProductList({ products }) {
2
  // Controllo di guardia: se l'array è vuoto, mostra un messaggio
3
  if (products.length === 0) {
4
    return <p className="text-center">Nessun prodotto disponibile</p>;
5
  }
6

7
  // Ora possiamo accedere in sicurezza al primo elemento
8
  const firstProduct = products[0];
9

10
  return (
11
    <div>
12
      <h2>Primo prodotto: {firstProduct.name}</h2>
13
      <p>Prezzo: €{firstProduct.price}</p>
14
    </div>
15
  );
16
}

Come Leggere la Stack Trace

La stack trace mostra il percorso che il codice ha seguito prima di raggiungere l’errore. Ogni riga indica funzione, file e riga (e opzionalmente colonna). Ad esempio at ProductCard (ProductCard.jsx:12:24) indica che l’errore si trova nella funzione ProductCard, nel file ProductCard.jsx, alla riga 12, colonna 24.

Debugging di Errori Logici

Gli errori logici sono errori dove il codice viene eseguito senza errori tecnici ma produce risultati incorretti. Non producono messaggi di errore nella console, quindi richiedono il debugger del browser per essere individuati.

Utilizzo del Debugger del Browser

Il debugger integrato negli strumenti di sviluppo permette di esaminare il codice durante l’esecuzione. Nella scheda Sources si trova la struttura del progetto. Cliccando sul numero di una riga si imposta un breakpoint: quando il codice raggiunge quella riga, l’esecuzione si ferma. Con l’esecuzione in pausa si possono vedere i valori delle variabili, usare la console per valutare espressioni, e controllare lo scope. I controlli permettono di eseguire il codice passo dopo passo (step into, step over, step out, resume).

Esempio: Errore di Conversione di Tipo

Un errore logico comune si verifica quando si lavora con input dell’utente che vengono trattati come stringhe invece che come numeri:

1
function ShoppingCart() {
2
  const [cart, setCart] = useState({
3
    quantity: 1,
4
    price: 29.99,
5
    discount: 0
6
  });
7

8
  function handleQuantityChange(newQuantity) {
9
    // Problema: newQuantity è una stringa, non un numero
10
    setCart(prevCart => ({
11
      ...prevCart,
12
      quantity: newQuantity  // newQuantity è una stringa!
13
    }));
14
  }
15

16
  // Calcolo del totale: se quantity è una stringa,
17
  // JavaScript fa concatenazione invece di moltiplicazione
18
  const total = cart.quantity * cart.price;
19

20
  return (
21
    <div>
22
      <input
23
        type="number"
24
        value={cart.quantity}
25
        onChange={(e) => handleQuantityChange(e.target.value)}
26
      />
27
      <p>Totale: €{total}</p>
28
    </div>
29
  );
30
}

1
function handleQuantityChange(newQuantity) {
2
  setCart(prevCart => ({
3
    ...prevCart,
4
    // Conversione esplicita a numero usando l'operatore unario +
5
    quantity: +newQuantity
6
  }));
7
}

React StrictMode

React StrictMode è un componente integrato che aiuta a individuare problemi potenziali nell’applicazione durante lo sviluppo. Non viene renderizzato visivamente nell’interfaccia utente, ma esegue controlli aggiuntivi e avvisi nella console.

Come Abilitare StrictMode

StrictMode si usa avvolgendo i componenti che si vogliono controllare:

1
import { StrictMode } from 'react';
2

3
function App() {
4
  return (
5
    <StrictMode>
6
      <ProductForm />
7
      <ProductList />
8
    </StrictMode>
9
  );
10
}

Tipicamente, si avvolge il componente radice dell’applicazione in index.jsx:

1
import { StrictMode } from 'react';
2
import { createRoot } from 'react-dom/client';
3
import App from './App';
4

5
const root = createRoot(document.getElementById('root'));
6
root.render(
7
  <StrictMode>
8
    <App />
9
  </StrictMode>
10
);

Cosa Fa StrictMode

StrictMode esegue verifiche durante lo sviluppo: ogni funzione componente viene eseguita due volte per individuare effetti collaterali e problemi di stato, avvisa quando si usano API deprecate, e aiuta a identificare componenti con effetti collaterali non sicuri.

1
// ❌ ERRATO: Array creato fuori dal componente
2
const filteredItems = [];
3

4
function ProductList({ searchTerm }) {
5
  // Questo array viene riutilizzato tra i render
6
  // e continua a crescere invece di essere resettato
7
  products.forEach(product => {
8
    if (product.name.includes(searchTerm)) {
9
      filteredItems.push(product);
10
    }
11
  });
12

13
  return (
14
    <ul>
15
      {filteredItems.map((item, index) => (
16
        <li key={index}>{item.name}</li>
17
      ))}
18
    </ul>
19
  );
20
}

1
function ProductList({ searchTerm }) {
2
  // ✅ CORRETTO: Array creato dentro il componente
3
  // Viene ricreato ad ogni render
4
  const filteredItems = [];
5
  products.forEach(product => {
6
    if (product.name.includes(searchTerm)) {
7
      filteredItems.push(product);
8
    }
9
  });
10

11
  return (
12
    <ul>
13
      {filteredItems.map((item, index) => (
14
        <li key={index}>{item.name}</li>
15
      ))}
16
    </ul>
17
  );
18
}

StrictMode funziona solo durante lo sviluppo. In produzione non esegue i controlli aggiuntivi, ma è comune lasciarlo perché non ha effetti visibili.

React DevTools

React DevTools è un’estensione del browser che aggiunge strumenti di sviluppo specifici per React. È disponibile per Chrome, Firefox, Edge e altri browser basati su Chromium.

Installazione

React DevTools si installa come estensione del browser. Dopo l’installazione, nelle DevTools compaiono due schede: Components per ispezionare l’albero dei componenti e Profiler per analizzare le prestazioni.

Scheda Components

La scheda Components mostra la struttura gerarchica dei componenti. Passando il mouse su un componente nell’albero, viene evidenziata la parte corrispondente nell’interfaccia. Cliccando su un componente si possono vedere props, stato e hook utilizzati. Si possono modificare props e stato direttamente dalle DevTools per vedere immediatamente le modifiche riflesse nell’interfaccia.

Cliccando sull’icona a forma di ingranaggio si accede alle impostazioni per personalizzare theme, density e opzioni dell’albero dei componenti.

Errori Comuni e Come Evitarli

Durante lo sviluppo con React, ci sono alcuni errori comuni che si possono facilmente evitare conoscendo le convenzioni e le regole di React.

Componenti HTML vs Componenti Custom

I componenti HTML built-in (come <div>, <p>, <input>) devono iniziare con una lettera minuscola. I componenti custom devono iniziare con una lettera maiuscola. React usa la maiuscola/minuscola per distinguere tra elementi HTML e componenti React.

Event Handlers: onClick vs onclick

Gli event handler in React usano camelCase con il prefisso on: onClick, onChange, onSubmit, onMouseEnter, onFocus. onclick è l’attributo HTML standard ma non funziona correttamente in React.

Riepilogo

I messaggi di errore di React mostrano un messaggio principale e una stack trace che indica funzione, file e riga. Per gestire valori undefined o null si usano controlli di guardia.

Gli errori logici non producono messaggi di errore: si usa il debugger del browser per esaminare l’esecuzione passo dopo passo e verificare le conversioni di tipo.

StrictMode avvolge l’applicazione con <StrictMode> durante lo sviluppo, esegue i componenti due volte per individuare problemi di mutazione di stato e effetti collaterali.

React DevTools è un’estensione del browser che permette di ispezionare l’albero dei componenti e modificare props e stato interattivamente.

Convenzioni React: componenti HTML con minuscola, componenti custom con maiuscola, event handler in camelCase (onClick, non onclick).