Détectez toutes les erreurs JavaScript et envoyez-les au serveur

Je me demandais si quelqu'un avait de l'expérience dans le traitement des erreurs JavaScript dans le monde et les envoyait du navigateur client à un serveur.

Je pense que mon point est assez clair, je veux connaître toutes les exceptions, erreurs, erreurs de compilation, etc. qui se produisent du côté client et les envoyer au serveur pour les signaler.

J'utilise principalement MooTools et head.js(pour le côté JS) et Django pour le côté serveur.

J'ai récemment testé Sentry en production et cela fonctionne très bien (JS et autres langages comme PHP)

1- C'est open source (vous pouvez l'installer sur votre propre serveur) 2- Vous pouvez utiliser le plan gratuit (100 rapports / jour)

Ou installez-le sur votre serveur: github.com/getsentry

Je vérifierais window.onerror

Exemple:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Gardez à l'esprit que renvoyer true empêchera le déclenchement du gestionnaire par défaut, et retourner faux permettra au gestionnaire par défaut de s'exécuter.

Si votre site Web utilise Google Analytics, vous pouvez faire ce que je fais:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Quelques commentaires sur le code ci-dessus:

• Pour les navigateurs modernes, la trace complète de la pile est enregistrée.
• Pour les navigateurs plus anciens qui ne capturent pas la trace de pile, le message d'erreur est enregistré à la place. (Surtout la version iOS antérieure dans mon expérience).
• La version du navigateur de l'utilisateur est également enregistrée, vous pouvez donc voir quelles versions de système d'exploitation / navigateur génèrent quelles erreurs. Cela simplifie la hiérarchisation des bogues et les tests.
• Ce code fonctionne si vous utilisez Google Analytics avec "analytics.js", comme ceci . Si vous utilisez "gtag.js" à la place, comme ceci , vous devez modifier la dernière ligne de la fonction. Voir ici pour plus de détails .

Une fois le code en place, voici comment vous voyez les erreurs Javascript de vos utilisateurs:

1. Dans Google Analytics, cliquez sur la Behaviorsection puis sur le Top Eventsrapport.
2. Vous obtiendrez une liste des catégories d'événements. Cliquez window.onerrordans la liste.
3. Vous verrez une liste des traces de pile Javascript et des messages d'erreur. Ajoutez une colonne au rapport pour les versions OS / navigateur de vos utilisateurs en cliquant sur le Secondary dimensionbouton et en entrant Event Labeldans la zone de texte qui apparaît.
4. Le rapport ressemblera à la capture d'écran ci-dessous.
5. Pour traduire les chaînes du système d'exploitation / navigateur en descriptions plus lisibles par l'homme, je les copie-colle dans https://developers.whatismybrowser.com/useragents/parse/

N'essayez pas d'utiliser des services tiers, essayez plutôt les vôtres.

Les gestionnaires d'erreur peuvent intercepter les scénarios ci-dessous,

1. TypeError non capturé ne peut pas être capturé
2. Une référenceError non capturée ne peut pas être capturée, par exemple: var.click ()
3. TypeError peut être capturé
4. Une erreur de syntaxe peut être capturée
5. ReferenceError peut être capturée

Pour détecter les erreurs Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Pour capturer des erreurs AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})

De plus, le service http://jslogger.com peut vous aider avec cela:

Consigner les erreurs et les événements Javascript dans le cloud

depuis http://jslogger.com/features :

Désormais, vous pouvez espionner toutes les erreurs qui perturbent l'expérience utilisateur de votre site. Chaque erreur Javascript sera détectée et vous sera présentée pour un débogage ultérieur.

AVERTISSEMENT: non affilié au service / entreprise.

Vous pouvez essayer Atatus - Il s'agit d'un nouveau service de suivi des erreurs JavaScript avec Real User Monitoring (RUM) pour les applications Web modernes.

Nous ne capturons pas seulement les erreurs, mais aussi les événements utilisateur qui ont déclenché l'erreur. Cela vous donne les étapes pour reproduire l'erreur de votre côté.

Parallèlement à la capture d'erreurs, nous capturons également le temps de chargement de la page et le montrons sous différentes perspectives - Géo, Navigateur, Exploration de page, Histogramme de page, Surveillance Ajax et Surveillance des transactions.

https://www.atatus.com/

Documents disponibles: https://www.atatus.com/docs

Avertissement: je suis développeur web chez Atatus.

La bibliothèque non capturée est un bon moyen gratuit de capturer toutes les erreurs JS, y compris les rejets non gérés.

Vous voudrez peut-être consulter ce nouveau service, http://rescuejs.com/ . https://bugsnag.com/

Vous permet de consigner toutes vos erreurs javascript sans écrire vous-même de code côté serveur. Il suit également les versions du navigateur, etc.

Je ne suis pas sûr de les considérer comme 100% "prêts pour l'entreprise", mais cela vaut vraiment la peine de vérifier.