The error monitoring methods javascript

Error Monitoring vernacular is to find errors that occur when running.

First, the front end of misclassification

1. Instant runtime error: Error Code

console.log(a)

Error message:

2. Resource Load Error

Such as css, js resource loading error

Second, capture the wrong way

1. Instant running the wrong way to 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) window.onerror error

  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. Resource Load Error

1) object.onerror (not captured)

For example img = new Image, img.οnerrοr = function

2) performance.getEntries () to get all the loaded load resources from time to time, you may indirectly get resource error.

For example performance.getEntries (). ForEach ((item) => console.log (item.name)) acquired all of the resources already loaded,

Then get document.getElementsByTag ( 'xxx') to subtract resources already loaded, that is, you do not load resources.

3) Error Capture event

<!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: cross-domain js run error can catch it, what error, how you deal with?

First, before the settlement was not like this, are script error

1. Add the crossOrigin script tag attributes , such as: <script type = "text / javascript" src = "// doitbegin.duapp.com/error.js" crossorigin> </ script>, the printed result is like this

2. The emergence of this error is not unexpected, since it was set up error.js crossorigin, that error.js of HTTP Response Header must also be set non-homologous accessible. Js resource response set-ControlAllow-Origin header Access: *, this must be set up on the server // * on behalf of all to php example

Third, the basic principles of reporting errors

1. The use of Ajax way communication report (which can, but generally not used in this way)

2. Use the Image Object report (the usual way, without relying on third-party libraries)

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

The request has been sent out

Low-key doggy _Hansen

Published 70 original articles · won praise 13 · views 9739

Private letter concerns