Javascript中獲取出錯代碼所在文件及行數的代碼

2019-11-21 00:13:34

字體：大中小

來源：轉載

供稿：網友

原先使用的是try-catch的方式，在catch語句中，我們會收到一個Error對象（我們也可以拋出一個自定義異常對象）。Firefox中的Error對象擁有如下屬性：

message ―― 錯誤提示信息
fileName ―― 表示出錯代碼所在文件
lineNumber ―― 出錯代碼所在行數
stack ―― 出錯堆棧信息
name ―― 異常對象名/類型
但是在IE下，Error對象只有如下屬性：

name ―― 異常對象名/類型，和Firefox中顯示的名稱可能不同
message ―― 錯誤提示信息
description ―― 和message屬性相同
number ―― ErrorCode，錯誤代碼，對于普通開發人員來說基本沒意義
也就是說在IE下我們無法獲得最希望得到的錯誤代碼所在文件名及出錯行數的信息。后來在學校論壇求教之后知道了window（全局對象）下有一個onerror的對象。這個對象或者說window的屬性綁定的是一個錯誤處理函數。腳本中任何未被捕獲的錯誤最終都會擴散到window這一層，然后被onerror綁定的處理函數所處理。查了一下相關文檔，發現綁定的錯誤處理函數會接受到三個參數：

view sourceprint?function onError(message,url,line){}

非常欣慰的是，這個機制兼容IE和Firefox。

下面舉一個例子：

復制代碼代碼如下:

 
function doSomething(){ 
var lastErrorHandler = window.onerror; 
window.onerror = function(message,url,line){ 
// 匯報錯誤 
alert("執行" + url + "文件中的第" + line + "行代碼出錯，錯誤信息：" + message); 
window.onerror = lastErrorHandler; 
// 不希望此錯誤繼續擴散 
return true; 
}; 
// 不小心出錯了... 
sldfjlskdjflj; 

window.onerror = lastErrorHandler; 
} 
doSomething(); 

這里之所以沒用attachEvent的方式，是因為detach比較不方便。如果希望此錯誤處理變成全局的，那么可以使用attachEvent（Firefox下是addEventListener）的方式。

需要注意，Safari（Chrome使用的也是一樣的內核）和Opera都不支持此機制，這兩個核心的瀏覽器都不支持全局的error事件，因此沒法使用這種方式來捕獲異常信息，只能使用try-catch的方式。

試驗了一下，在Safari中的Error對象擁有如下屬性：

message ―― 錯誤提示信息
line ―― 出錯代碼所在行數
sourceId ―― 一個數字，不明白什么意思
sourceURL ―― 表示出錯代碼所在文件
name ―― 異常對象名/類型
Opera下的Error對象擁有如下屬性：

message ―― 錯誤提示信息
opera#sourceloc ―― 出錯代碼所在行數
stacktrace ―― 出錯堆棧信息
這兩個瀏覽器中的Error對象已經提供了足夠的信息給我們調試使用了。下面要做的就是把這兩種方式結合起來，使之在不同瀏覽器下都能很好的匯報這些錯誤。

下面這段代碼封裝了在不同瀏覽器之上匯報異常的功能：

復制代碼代碼如下:

 
<script type=”text/javascript”> 
function reportError(err){ 
var errMsg = []; 
for(var p in err){ 
if(err.hasOwnProperty(p)){ 
errMsg.push(p + "=" + err[p]); 
} 
} 
alert(errMsg.join("/n")); 
} 
function doSomething(){ 
var lastErrorHandler = window.onerror; 
window.onerror = function(message, url, line){ 
// 匯報錯誤 
reportError({ 
message: message, 
url: url, 
line: line 
}); 
window.onerror = lastErrorHandler; 
// 不希望此錯誤繼續擴散 
return true; 
} 

// 不小心出錯了... 
sldfjlskdjflj; 

window.onerror = lastErrorHandler; 
} 
try{ 
// 執行可能出錯的代碼 
doSomething(); 
}catch(e){ 
if("/v"=="v"){ 
// 對于IE直接讓此錯誤擴散到最外層 
throw e; 
}else{ 
// 對于其他任意瀏覽器直接匯報此異常對象 
reportError(e); 
} 
} 
</script> 