Intercepter les erreurs Javascript de votre site web

Lorsque l'on gère une application à part entière assez conséquente, on peut passer à côté de certaines erreurs qui peuvent empêcher certaines interactions pour l'utilisateur et donc risquer ne plus le voir revenir sur votre site si ces erreurs sont récurrentes.

Heureusement il existe des méthodes permettant de monitorer les erreurs survenant sur son site. Ici je vais vous parler exclusivement des erreurs Javascript car c'est le genre d'erreur qui est difficile à détecter lorsque l'on est sur un environnement de développement/production. En ce qui concerne les erreurs applicatives (côté serveur) vous avez en général des logs d'erreurs, ce qui n'est pas le cas pour le Javascript qui est exécuté côté client.

Dans cet article je vais vous exposer deux méthodes permettant de catcher ces erreurs :

• Utilisation du plugin jQuery Error Handler
• Utilisation du service en ligne ExceptionHub

Ce plugin allie à la fois du Javascript avec l'aide de la librairie jQuery ainsi que d'un peu de PHP pour l'envoi de mail. Celui-ci a été créé par Cedric Dugas et est vraiment simple d'utilisation.

Tout d'abord, allez télécharger le plugin puis intégrez le script à toutes vos pages (dans le header de votre layout si vous en avez un).

Maintenant il faut faire appel au plugin sur vos pages. Pour cela placez ce code en début de chaque page :

$(document).jsErrorHandler();

Voilà ni plus ni moins
Si vous voulez personnaliser un peu le plugin, il existe quelques options pour changer le from de l'adresse e-mail ainsi que le domaine du site web :

$(document).jsErrorHandler({
   from: "support@youremail.com",
   website: document.domain
});

Si une erreur est détectée sur vos pages, vous recevrez un e-mail de ce type :

Voilà en ce qui concerne le plugin. L'inconvénient avec celui-ci c'est qu'il enverra autant de mails que d'erreurs détectées. Donc si vous avez beaucoup de visiteurs qui arrivent sur la même page contenant l'erreur Javascript, votre boîte mail risque de pleurer.

Ce que je vous conseille c'est de modifier le code PHP qui envoie le mail et de stocker les erreurs en base de données en vérifiant avant enregistrement si celle-ci n'existe pas déjà. Si l'occurrence n'est pas en base de données alors vous envoyez l'e-mail sinon rien. Le fait de stocker en base de données vous permettra de garder une trace si jamais vous supprimez le mail ou que votre boîte est pleine et pourquoi pas de faire un module sur votre site permettant de lister les erreurs.

C'est d'ailleurs ce que j'ai fait au tout début de la création de mon site avec un logger des erreurs PHP, Javascript, Ajax, Apache et IDS. Je pense que je vous ferai un petit tuto sur la manière de gérer un handler permettant de récupérer tous ces types d'erreurs et de les intégrer comme il faut en base de données.

ExceptionHub est un service en ligne bien pratique qui permet de catcher toutes les erreurs de type Javascript. Celui-ci propose :

• Pister toutes les erreurs Javascript des pages
• Enregistre le log d'erreur complet à partir de tous les navigateurs
• Donne des informations sur le navigateur et l'OS utilisé
• Groupe les erreurs par type
• Envoie de mails si de nouvelles erreurs sont détectées
• Suivi en temps réel
• Mode développeur disponible

Alors comme indiqué dans la liste des options proposées par le service, vous avez aussi l'envoi de mail si une erreur est détectée contenant un lien renvoyant vers la page d'erreur complète où trois onglets seront proposés : Summary (résumé de l'erreur rencontrée), le Stack Trace, et les erreurs similaires (Similar Errors).

Une fois une erreur corrigée, vous pourrez la marquer comme corrigée sur la page du service. Ça vous permettra d'avoir un petit suivi de votre développement si vous ne possédez pas un système de versionning.

Voici quelques screenshots :

Page de résumé de l'erreur

Stack Trace

Erreurs non résolues