這篇文章主要介紹了JavaScript代碼異常監(jiān)控實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

JavaScript異常一般有兩方面：語法錯(cuò)誤和運(yùn)行時(shí)錯(cuò)誤。兩種錯(cuò)誤的捕獲和處理方式不同，從而影響具體的方案選型。通常來說，處理JS異常的方案有兩種：try...catch捕獲 和 window.onerror捕獲。以下就兩種方案分別分析各自的優(yōu)劣。

雖然語法錯(cuò)誤本應(yīng)該在開發(fā)構(gòu)建階段使用測試工具避免，但難免會有馬失前蹄部署到線上的時(shí)候。

try...catch捕獲

這種方案要求開發(fā)人員在編寫代碼的時(shí)候，在預(yù)估有異常發(fā)生的代碼段使用try...catch，在發(fā)生異常時(shí)將異常信息發(fā)送給接口：

try{
//可能發(fā)生異常的代碼段
}catch(e){
//將異常信息發(fā)送服務(wù)端
}

try...catch的優(yōu)點(diǎn)是可以細(xì)化到每個(gè)代碼塊，并且可以自定義錯(cuò)誤信息以便統(tǒng)計(jì)。

具體到上文提到的兩種js異常，try...catch無法捕獲語法錯(cuò)誤，當(dāng)遇到語法錯(cuò)誤時(shí)，瀏覽器仍然會拋出錯(cuò)誤Uncaught SyntaxError，但是不會被捕獲，不會走進(jìn)catch的代碼塊內(nèi)。

另外，如果try代碼塊中有回調(diào)函數(shù)也不會被捕獲，比如：

try{
var btn = $('#btn');
  btn.on('click',function(){
    //throw error
  });
}catch(e){}

上述代碼中btn的監(jiān)聽函數(shù)里拋出的異常無法被外層的catch捕獲到，必須額外套一層：

try{
var btn = $('#btn');
  btn.on('click',function(){
    try{
      //throw error
    }catch(e){}
  });
}catch(e){}

綜上所述，try...catch方案的部署非常復(fù)雜，如果人工部署除了要求巨量的工作量，還跟開發(fā)人員的能力和經(jīng)驗(yàn)有關(guān)。如果依賴編譯工具部署（比如fis），那每個(gè)代碼塊都套一層try...catch也是非常難看的并且容易引發(fā)一些不可預(yù)估的問題。

window.onerror捕獲

這種方式不需要開發(fā)人員在代碼中書寫大量的try...catch，通過給window添加onerror監(jiān)聽，在js發(fā)生異常的時(shí)候便可以捕獲到錯(cuò)誤信息，語法異常和運(yùn)行異常均可被捕獲到。但是window.onerror這個(gè)監(jiān)聽必須放在所有js文件之前才可以保證能夠捕獲到所有的異常信息。

window.onerror事件的詳細(xì)信息參考這里。

/**
 * @param {String} errorMessage  錯(cuò)誤信息
 * @param {String} scriptURL   出錯(cuò)文件的URL
 * @param {Long}  lineNumber   出錯(cuò)代碼的行號
 * @param {Long}  columnNumber  出錯(cuò)代碼的列號
 * @param {Object} errorObj    錯(cuò)誤信息Object
 */
window.onerror = function(errorMessage, scriptURL, lineNumber,columnNumber,errorObj) { 
  // code..
}

onerror的實(shí)現(xiàn)方式各瀏覽器略有差異，但是前三個(gè)參數(shù)都是相同的，某些低版本瀏覽器沒有后兩個(gè)參數(shù)。

最后一個(gè)參數(shù)errorObj各瀏覽器實(shí)現(xiàn)的程度不一致，具體可參考這里。

下圖是被onerror捕獲到的一個(gè)異常的具體信息：

綜上所述，window.onerror方案的優(yōu)點(diǎn)是減少了開發(fā)人員的工作量，部署方便，并且可以捕獲語法錯(cuò)誤和運(yùn)行錯(cuò)誤。缺點(diǎn)是錯(cuò)誤信息不能自定義，并且errorObj每種瀏覽器的實(shí)現(xiàn)有略微差異，導(dǎo)致需統(tǒng)計(jì)的信息有局限性。

跨域JS文件異常的捕獲

為了提高web性能，目前大部分web產(chǎn)品架構(gòu)中都有CDN這一環(huán)，將資源部署到不同的域名上，充分利用瀏覽器的并發(fā)請求機(jī)制。那么在跨域JS文件中發(fā)生異常的時(shí)候，onerror監(jiān)聽會捕獲到什么信息呢？請看下圖：

只有一個(gè)稍微有價(jià)值的信息Script error，其他什么信息都沒有，為什么會這樣呢？

我們都知道瀏覽器有同源資源限制，常規(guī)狀態(tài)下是無法進(jìn)行跨域請求的。而script、img、iframe標(biāo)簽的src屬性是沒有這種限制的，這也是很多跨域方案的基礎(chǔ)。但是即使script標(biāo)簽可以請求到異域的js文件，此文件中的信息也并不能暴露到當(dāng)前域內(nèi)，這也是瀏覽器的安全措施所致。

那么有沒有辦法獲取到異域資源的異常信息呢？

其實(shí)很簡單，目前可以說基本上所有的web產(chǎn)品對于js/css/image等靜態(tài)資源都在服務(wù)端設(shè)置了Access-Control-Allow-Origin: *的響應(yīng)頭，也就是允許跨域請求。在這個(gè)環(huán)境下，只要我們在請求跨域資源的script標(biāo)簽上添加一個(gè)crossorigin屬性即可：

<script src="http://static.toutiao.com/test.js" crossorigin></script>

這樣的話，異域的test.js文件中發(fā)生異常時(shí)便可以被當(dāng)前域的onerror監(jiān)聽捕獲到詳細(xì)的異常信息。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論