web-dev-qa-db-fra.com

Catch toutes les erreurs JavaScript et les envoyer au serveur

Je me demandais si quelqu'un avait l'expérience de la gestion globale des erreurs JavaScript et de les envoyer du navigateur client à un serveur.

Je pense que mon propos est clair: je veux connaître toutes les exceptions, erreurs, erreurs de compilation, etc. qui se produisent 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.

javascripterror-handlingclient-side
220
Olivier Girardot

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

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

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

17
Tarek

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 vrai empêchera le lancement du gestionnaire par défaut, et renvoyer faux laissera le gestionnaire par défaut s'exécuter.

310
Mike Lewis

Si votre site 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 de la pile complète est consignée.
  • Pour les navigateurs plus anciens qui ne capturent pas la trace de la pile, le message d'erreur est enregistré. (La plupart du temps la version iOS dans mon expérience).
  • La version du navigateur de l'utilisateur est également consignée afin que vous puissiez voir quelles versions du système d'exploitation/du 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 ajuster la dernière ligne de la fonction. Voir ici pour plus de détails .

Une fois le code en place, procédez comme suit pour afficher les erreurs Javascript de vos utilisateurs:

  1. Dans Google Analytics, cliquez sur la section Behavior, puis sur la section Top Events rapport.
  2. Vous obtiendrez une liste de catégories d'événements. Cliquez sur window.onerror dans la liste.
  3. Vous verrez une liste de traces de pile Javascript et de messages d'erreur. Ajoutez une colonne au rapport pour les versions de système d'exploitation/navigateur de vos utilisateurs en cliquant sur le bouton Secondary dimension et en entrant Event Label dans 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/du navigateur en descriptions plus lisibles par l'homme, je les copie/colle dans https://developers.whatismybrowser.com/useragents/parse/

enter image description here

9
Martin Omander

En outre, le service http://jslogger.com peut vous aider:

Journalise les erreurs et événements Javascript dans le nuage

de http://jslogger.com/features :

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

AVERTISSEMENT: non affilié au service/entreprise.

1
Ivan Kurmanov

Vous pouvez essayer Atatus - Il s’agit d’un nouveau service de suivi des erreurs JavaScript associé à la surveillance des utilisateurs réels pour les applications Web modernes.

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

En plus de la capture d’erreurs, nous capturons également le temps de chargement de la page et l’indiquons sous différentes perspectives - Géo, Navigateur, Exploration de la page, Histogramme de page, Surveillance Ajax et Surveillance des transactions.

https://www.atatus.com/

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

Disclaimer: Je suis développeur web chez Atatus.

1
Fizer Khan

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

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

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

Pour attraper les erreurs Javascript:

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

Pour capturer les erreurs AngularJS:

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