Errore di blocco del collegamento in JavaScript

Supponiamo di avere un collegamento:

<a href="">link</a>

Otteniamo il nostro collegamento in una variabile:

let link = document.querySelector('a');

Associamo un gestore di click al nostro collegamento. Annulliamo il comportamento predefinito per evitare il ricaricamento della pagina:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

Sembra che ci siamo completamente protetti da comportamenti imprevisti. In realtà non è così. Il fatto è che se si verifica un errore di sintassi, il codice JavaScript semplicemente non verrà eseguito, il blocco del collegamento non funzionerà e avverrà il passaggio ad esso.

In questo caso non vedremo né il risultato dell'esecuzione del codice, né l'errore nella console, perché la pagina si ricaricherà. Creiamo appositamente un errore nel codice e verifichiamolo nella pratica:

link.addEventListener('click', function(event) {
	thiss.textContent = 'testo'; // errore di sintassi
	event.preventDefault();
});

Questo problema ha un segno caratteristico: se si guarda la console nel momento del click sul collegamento, vedremo per un istante un errore rosso nella console, che scomparirà quasi immediatamente.

Naturalmente, non faremo in tempo a leggere il testo dell'errore, il che rende notevolmente difficile la sua ricerca. C'è, tuttavia, un trucco astuto. Bisogna mettete un cancelletto nel href del collegamento. In questo caso il passaggio al collegamento non avverrà e vedremo l'errore generato nella console:

<a href="#">link</a>