Les méthodes de surveillance des erreurs javascript

Erreur de surveillance est de trouver des erreurs vernaculaires qui se produisent lors de l'exécution.

Tout d'abord, l'extrémité avant de la classification erronée

1. Erreur d'exécution instantanée: Code d'erreur

console.log(a)

Message d'erreur:

2. Erreur de chargement des ressources

Un tel .css, .js erreur de chargement des ressources

Deuxièmement, la capture de la mauvaise façon

1. instantanée en cours d'exécution de la mauvaise façon de capture

1) try ... catch

<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" value="提交" id="btn">
<p id="err"></p>


btn.onclick = function(){
try {
    if(!username.value) throw "用户名不能为空"
    if(!password.value) throw "密码不能为空"
}catch(e){
  err.innerHTML = `错误：${e} ！`//抓住上面throw抛出的错误，给p标签显示
}finally{
  // 这里上面抱什么错都会显示
  console.log("请输入")
}
}

2) Erreur de window.onerror

  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
  } 
<script type="text/javascript" src="error.js"></script>

2. Erreur de chargement des ressources

1) object.onerror (non capturé)

Par exemple img = new Image, img.οnerrοr = function

2) performance.getEntries () pour obtenir toutes les ressources de charge chargés de temps en temps, vous pouvez obtenir indirectement erreur de ressource.

Par exemple, performance.getEntries (). Foreach ((item) => console.log (item.name)) a acquis toutes les ressources déjà chargées,

Ensuite, obtenir document.getElementsByTag ( « xxx ») pour soustraire des ressources déjà chargées, qui est, vous ne chargez pas les ressources.

3) Erreur événement de capture

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>错误监控</title>
  <script>
    window.addEventListener('error', function(e){
      console.log('捕获', e)
    }, true)
  </script>
</head>
<body>

  <script src="//baidu.com/test.js"></script>
</body>
</html>

Extension: l'erreur d'exécution de cross-domain peut l'attraper, quelle erreur, comment vous traitez?

Tout d'abord, avant que le règlement n'a pas été comme ça, sont erreur de script

1. Ajoutez les attributs de la balise de script crossOrigin , tels que: <script type = "text / javascript" src = "// doitbegin.duapp.com/error.js" crossorigin> </ script>, le résultat imprimé est comme ça

2. L'émergence de cette erreur est pas inattendue, car il a été mis en place de la crossorigin, que error.js d' en- tête de réponse HTTP doivent également être ensemble non homologue accessible. Js tête set-ControlAllow-Origine de réponse de l' accès aux ressources: *, cela doit être mis en place sur le serveur // * au nom de tous l'exemple php

En troisième lieu, les principes de base des erreurs de déclaration

1. L'utilisation d'Ajax rapport de communication bidirectionnelle (qui peut, mais généralement pas utilisé de cette façon)

2. Utilisez le rapport d'objets d'image (la manière habituelle, sans compter sur les bibliothèques tierces)

(new Image()).src = 'http://baidu.com/tesjk?r=要上报的信息'

La demande a été envoyée

Low-key _Hansen doggy

Publié 70 articles originaux · louange gagné 13 · vues 9739

lettre privée préoccupations