Erro de bloqueio de clique em link em JavaScript

Suponha que temos um link:

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

Vamos obter nosso link em uma variável:

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

Vamos anexar um manipulador de clique ao nosso link. Vamos prevenir o comportamento padrão para evitar o recarregamento da página:

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

Parece que nos protegemos completamente de comportamentos inesperados. Na realidade, não é bem assim. O fato é que, se ocorrer um erro de sintaxe, o código JavaScript simplesmente não será executado, o bloqueio do link não funcionará e a navegação ocorrerá.

Nesse caso, não veremos nem o resultado da execução do código, nem o erro no console, pois a página será recarregada. Vamos intencionalmente criar um erro no código e verificar na prática:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // erro de sintaxe
	event.preventDefault();
});

Este problema tem uma característica distintiva: se olharmos para o console no momento do clique no link, veremos brevemente um erro vermelho no console, que desaparece quase instantaneamente.

Claro, não conseguiremos ler o texto do erro, o que dificulta muito sua localização. No entanto, existe um truque esperto. Precisamos colocar uma cerquilha no href do link. Nesse caso, a navegação pelo link não ocorrerá e veremos o erro lançado no console:

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