Monitorer les erreurs JavaScript d'un site en production

31 Mars 2011

Si il y a bien une chose qui peut décourager les utilisateurs d'un site, ce sont les erreurs dans le fonctionnement du site. Alors qu'il est facile d'être prévenu d'erreurs coté serveur grâce aux logs applicatif, les erreurs JavaScripts sont plus difficiles à détecter, car elles se produisent côté client, mais il existe un plugin jQuery pour être prévenu par mail lorsqu'une erreur de ce type ce produit...

Les erreurs de JavaScript sont problématiques lorsqu'elles se produisent en prod et il est impossible de les monitorer avec les technologies actuelles. Heureusement, Cedric Dugas, un développeur Canadien a crée un un petit utilitaire combinaison d'un script jQuery et d'un script PHP pour recevoir un mail à chaque erreur JavaScript.

Utilisation du plugin

Comme je l'ai déjà dit, le plugin se décompose en deux parties, il faut intégrer le plugin jQuery qui pèse moins d'un kilo non compressé dans toutes vos pages qui va détecter les erreurs et faire un appel Ajax à un script PHP. Le script PHP sera à installer sur votre serveur et c'est ce dernier qui permettra l'envoi du mail.

Une fois le plugin intégré dans vos pages, il suffira de l'activer en premier dans vos pages avec le code suivant :

$(document).jsErrorHandler();

Le plugin est personnalisable mais je trouve les réglages d'origine normaux, on peut forcer l'adresse mail de 'from' et le mail contient le nom du domaine ou est placé le script PHP. Lorsqu'une erreur JavaScript se produira, vous recevrez un mail type :

Sujet: A javascript error has been detected on www.position-absolute.com
Message: variable is not defined
Url: http://www.position-absolute.com/creation/onerror/
Line: 21

Le contenu du mail est succinct et mériterai de fournir plus d'information comme le nom du navigateur, sa version, l'OS du navigateur. On pourrait obtenir tous cela en ajoutant le user-agent.

Conclusion

Ce petit script peut être un super outil qui permettrait de faire du débuggage dans la nature de ces fonctionnalités JavaScript. On ne peut pas tester toutes les combinaisons de systèmes d'exploitations et de navigateurs. Être prévenu par mail lors d'une erreur JavaScript est une chance de garantir un fonctionnement optimal et un minimum d'erreur. Un petit script intéressant à conserver dans une boite à outils de debug.

Comme je n'ai pas testé le script en condition "live", je me posais la question du support de l’évènement onError pour les anciens navigateurs. Je croyais que lorsque IE rencontrait une erreur, le JavaScript cessait tout simplement de fonctionner jusqu'au rafraîchissement de la page, ce qui rend caduque cette fonctionnalité. Vous avez déjà utilisé cet évènement ?

PS : Je précise que le script enverra un mail à chaque erreur dans un navigateur. Du coup on peut vite recevoir de nombreux mails, Personnellement, cela ne me gêne pas l'important est d'être prévenu qu'il y a un problème et qu'il faut investiguer pour chercher une solution...

Source : Handling javascript errors on production websites [EN] Projet github : jQuery Error Handler Plugin