Error de prohibición de seguimiento de enlace en JavaScript

Supongamos que tenemos un enlace:

<a href="">enlace</a>

Obtengamos nuestro enlace en una variable:

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

Asociemos un controlador de clics a nuestro enlace. Cancelemos el seguimiento del enlace para evitar la recarga de la página:

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

Parece que nos hemos protegido completamente contra comportamientos inesperados. En realidad, no es así. El problema es que si ocurre un error de sintaxis, el código JavaScript simplemente no se ejecutará, el bloqueo del enlace no funcionará y se realizará el seguimiento del mismo.

En este caso, no veremos ni el resultado de la ejecución del código, ni el error en la consola, porque la página se recargará. Provoquemos deliberadamente un error en el código y comprobémoslo en la práctica:

link.addEventListener('click', function(event) {
	thiss.textContent = 'texto'; // error de sintaxis
	event.preventDefault();
});

Este problema tiene una característica distintiva: si miramos la consola en el momento del clic en el enlace, veremos por un instante un error rojo en la consola, que desaparecerá casi de inmediato.

Por supuesto, no tendremos tiempo de leer el texto del error, lo que dificulta sustancialmente su búsqueda. Sin embargo, hay un truco ingenioso. Se debe colocar una almohadilla en el href del enlace. En este caso, no ocurrirá el seguimiento del enlace y veremos el error arrojado a la consola:

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