對前端異常window error捕獲的全面總結


對於前端的異常捕獲,我們都會知道onerror事件(當然還有try,catch),但針對window的error事件的用法,其實是有區別的。

方式一: window.onerror = handleOnError

1. 能捕獲到js執行錯誤,不能捕獲帶有src的標簽元素的加載錯誤。

2. 參數對應5個值(錯誤信息,所在文件,行,列,錯誤信息)

3. 函數體內用return true可以不讓異常信息輸出到控制台

方式二:  window.addEventListener

1. 為捕獲狀態時(第三個參數為true)能捕獲到js執行錯誤,也能捕獲帶有src的標簽元素的加載錯誤。

  為冒泡狀態時(第三個參數為false)能捕獲到js執行錯誤,不能捕獲帶有src的標簽元素的加載錯誤。

2. 參數對應1個值,異常事件,錯誤信息都在里面

3. 函數體內用preventDefault可以不讓異常信息輸出到控制台

 

注:如果script的src是非同源的跨域引用則需要在標簽上加crossorigin參數,並且配置一下服務器,設置靜態資源Javascript的Response為Access-Control-Allow-Origin'才可以。

 

示例代碼:

<!doctype html>
<html> <head> <script type="text/javascript"> window.onerror = handleOnError
window.addEventListener('error', handleListenerError, true); function handleOnError(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {   // some code   return true // 阻止瀏覽器console輸出 }
function handleListenerError (eventErr){
  // some code
  eventErr.preventDefault() // 阻止瀏覽器console輸出
}
function message1() {   aalert("hello!") } function message2() {   throw new Error('hello') } function message3() {   console.log(a) } function message4() { xhr = new XMLHttpRequest(); xhr.open('GET',url) xhr.onreadystatechange=state_Change; xhr.send() } function state_Change() {   if (xhr.readyState==4)
  {     
if (xhr.status==200)   {       message3()   } else {     // somecode   }   } } </script> </head> <body> <input type="button" value="異常1" onclick="message1()" /> <input type="button" value="異常2" onclick="message2()" /> <input type="button" value="異常3" onclick="message3()" /> <input type="button" value="異常4" onclick="message4()" /> <script type="text/javascript" src="abc.js"></script>
<script type="text/javascript" src="abc.js" crossorigin></script> <img src="abc.png"/> </body> </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM