Comment capturer et signaler les erreurs JS à l'aide des compétences window.onerror

Comment capturer et signaler les erreurs JS à l'aide des compétences window.onerror_javascript

WBOY

Libérer： 2016-05-16 15:17:30

original

2246 Les gens l'ont consulté

Il y a deux jours, un utilisateur de 2048 Game a signalé qu'il ne pouvait pas jouer au jeu après l'avoir ouvert. Il n'y avait qu'un seul panneau de jeu, les numéros ne pouvaient pas être initialisés et ils ne pouvaient pas être déplacés. et iOS 5.1. J'ai essayé d'ouvrir Safari depuis WeChat, mais cela n'a toujours pas fonctionné. Étant donné que le jeu utilise de nombreuses fonctionnalités HTML5, on estime approximativement que cela est dû à des erreurs JS. Mais comment capturer de telles informations ? Bien sûr, il s'agit de la légendaire fenêtre d'erreur.

Trouvez l'introduction du corps de la méthode sur window.onerror du W3C :

Cela signifie essentiellement que pour la méthode window.onerror, nous pouvons l'écrire comme :

/** 
 * @param {String} errorMessage  错误信息 
 * @param {String} scriptURI   出错的文件 
 * @param {Long}  lineNumber   出错代码的行号 
 * @param {Long}  columnNumber  出错代码的列号 
 * @param {Object} errorObj    错误的详细信息，Anything 
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
  // TODO 
}

Copier après la connexion

Cependant, vous devez faire attention aux problèmes de compatibilité lors de l'utilisation. Tous les navigateurs n'ont pas tous les paramètres dans la liste des paramètres. Chrome et autres sont les leaders dans les projets de normes de navigateur, alors utilisez simplement ces paramètres !

Vous pouvez donc écrire une petite démo pour l'essayer :

<!DOCTYPE html> 
<html> 
<head> 
  <title>Js错误捕获</title> 
  <script type="text/javascript"> 
  /** 
   * @param {String} errorMessage  错误信息 
   * @param {String} scriptURI   出错的文件 
   * @param {Long}  lineNumber   出错代码的行号 
   * @param {Long}  columnNumber  出错代码的列号 
   * @param {Object} errorObj    错误的详细信息，Anything 
   */ 
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
  } 
  </script> 
</head> 
<body> 
  <script type="text/javascript" src="error.js"></script> 
</body> 
</html>

Copier après la connexion

Pour le contenu du fichier error.js, écrivez simplement ceci :

throw new Error("Une erreur s'est produite!"
); Après avoir exécuté le navigateur, ouvrez la console et elle ressemblera essentiellement à ceci :

Ainsi, ces données peuvent être rapportées.
Bien sûr, le fichier error.js ci-dessus se trouve sous le même nom de domaine que la page HTML. Que se passera-t-il si error.js ne se trouve pas sous le même domaine ? Changeons la référence en error.js :

Ouvrez à nouveau la console, et ce que nous voyons est ceci :

C'est l'équivalent de la méthode window.onerror ne capturant qu'un seul message d'erreur, et c'est une chaîne fixe, qui n'a pas de valeur de référence. Après avoir vérifié quelques informations (Code source du Webkit), j'ai découvert que là où le navigateur implémente le chargement des ressources de script, la même politique d'origine est jugée. S'il s'agit d'une ressource non originale, le message d'erreur est écrit comme ". Erreur de script » :

Heureusement, la balise script a un attribut crossorigin. Sa définition peut afficher des informations d'erreur plus détaillées :

Actualisez la page. À ce moment, vous pouvez voir le résultat dans la console comme ceci :

Il n'est pas surprenant que cette erreur se produise. Puisque error.js est défini sur crossorigin, l'en-tête de réponse HTTP de error.js doit également être défini pour être accessible à partir de sources non originales. Afin de faciliter le paramétrage de Header, apportez une petite modification à error.js et renommez-le : error-js.php.

<&#63;php 
  header('Access-Control-Allow-Origin:*'); 
  header('Content-type:text/javascript'); 
&#63;> 
throw new Error('出错了');

Copier après la connexion

Actualisez la page à ce moment et voyez que la sortie dans la console est normale et que toutes les informations peuvent être capturées normalement :

OK, l'analyse des détails techniques est terminée ! Mes 2048 ressources statiques de jeu sont placées dans un domaine statique (source différente), donc si je veux capturer des informations d'erreur via window.onerror, je dois opérer selon la dernière situation ci-dessus :

1. Ajoutez l'attribut crossorigin du script

2. Configurez le serveur et définissez la réponse de la ressource statique Javascript sur Access-Control-Allow-Origin