Erreur d'interdiction de suivi de lien en JavaScript

Supposons que nous ayons un lien :

<a href="">lien</a>

Récupérons notre lien dans une variable :

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

Attachons un gestionnaire de clic à notre lien. Annulons le suivi du lien pour éviter le rechargement de la page :

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

Il semble que nous nous soyons complètement protégés contre un comportement inattendu. En réalité, ce n'est pas le cas. Le problème est que si une erreur de syntaxe se produit, le code JavaScript ne sera simplement pas exécuté, le blocage du lien ne fonctionnera pas, et la navigation aura lieu.

Dans ce cas, nous ne verrons ni le résultat de l'exécution du code, ni l'erreur dans la console, car la page se rechargera. Faisons intentionnellement une erreur dans le code et vérifions en pratique :

link.addEventListener('click', function(event) {
	thiss.textContent = 'texte'; // erreur de syntaxe
	event.preventDefault();
});

Ce problème a une caractéristique distinctive : si on regarde la console au moment du clic sur le lien, nous verrons brièvement une erreur rouge dans la console, qui disparaîtra presque immédiatement.

Bien sûr, nous n'aurons pas le temps de lire le texte de l'erreur, ce qui rend sa recherche considérablement difficile. Il existe cependant une astuce ingénieuse. Il faut mettre un dièse dans le href du lien. Dans ce cas, la navigation via le lien n'aura pas lieu et nous verrons l'erreur affichée dans la console :

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