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

更新時間：2010年09月23日 18:42:51 作者：

之前在做一個Javascript的日志控制臺功能模塊，希望能夠在Javascript代碼出錯時捕獲此錯誤，并將出錯的文件及相應的行數(shù)打印到控制臺并匯報給服務器。

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

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

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

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

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

下面舉一個例子：

復制代碼代碼如下:

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

window.onerror = lastErrorHandler; 
} 
doSomething(); 

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

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

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

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

message —— 錯誤提示信息
opera#sourceloc —— 出錯代碼所在行數(shù)
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; 
// 不希望此錯誤繼續(xù)擴散 
return true; 
} 

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

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