Link-Übergangsverbotsfehler in JavaScript

Nehmen wir an, wir haben einen Link:

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

Holen wir uns unseren Link in eine Variable:

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

Binden wir einen Klick-Handler an unseren Link. Heben wir dabei den Übergang über den Link auf, um das Neuladen der Seite zu verhindern:

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

Es scheint, als hätten wir uns vollständig vor unerwartetem Verhalten geschützt. In Wirklichkeit ist das nicht der Fall. Die Sache ist die, dass bei einem syntaktischen Fehler der JavaScript-Code einfach nicht ausgeführt wird, die Blockierung des Links nicht funktioniert und der Übergang darüber stattfindet.

In diesem Fall werden wir weder das Ergebnis der Codeausführung noch einen Fehler in der Konsole sehen, da die Seite neu geladen wird. Machen wir absichtlich einen Fehler im Code und überzeugen uns praktisch davon:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // syntaktischer Fehler
	event.preventDefault();
});

Ein solches Problem hat ein charakteristisches Merkmal: Wenn man im Moment des Klicks auf den Link in die Konsole schaut, sehen wir kurz einen roten Fehler in der Konsole, der fast sofort verschwindet.

Natürlich schaffen wir es nicht, den Fehlertext zu lesen, was die Suche danach erheblich erschwert. Es gibt jedoch einen cleveren Trick. Man muss in das href-Attribut des Links ein Doppelkreuz setzen. In diesem Fall findet kein Übergang über den Link statt und wir sehen den in die Konsole geworfenen Fehler:

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