Greška blokiranja prelaza po linku u JavaScript-u

Neka imamo link:

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

Dobijamo naš link u promenljivu:

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

Povežimo sa našim linkom rukovalac klika. Poništimo pritom prelaz po linku, da bismo izbegli ponovno učitavanje stranice:

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

Čini se da smo se potpuno obezbedili od neočekivanog ponašanja. Zapravo, to nije tako. Stvar je u tome što će se, u slučaju pojave sintaksne greške, JavaScript kod jednostavno ne izvršiti, blokiranje linka neće funkcionisati, i izvršiće se prelaz po njemu.

U ovom slučaju nećemo videti ni rezultat izvršavanja koda, ni grešku u konzoli, jer će se stranica ponovo učitatiti. Hajde da namerno napravimo grešku u kodu i uverimo se u praksi:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // sintaksna greška
	event.preventDefault();
});

Ovakav problem ima karakterističan znak: ako gledamo u konzolu u trenutku klika na link, na trenutak ćemo videti crvenu grešku u konzoli, koja će se gotovo odmah zatim nestati.

Naravno, tekst greške nećemo uspeti da pročitamo, što značajno otežava njeno pronalaženje. Postoji, međutim, lukav trik. Potrebno je u href linka staviti tarabu (#). U ovom slučaju prelaz po linku se neće desiti i videćemo bačenu grešku u konzoli:

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