快捷導(dǎo)航

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

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

之前在做一個(gè)Javascript的日志控制臺(tái)功能模塊，希望能夠在Javascript代碼出錯(cuò)時(shí)捕獲此錯(cuò)誤，并將出錯(cuò)的文件及相應(yīng)的行數(shù)打印到控制臺(tái)并匯報(bào)給服務(wù)器。

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

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

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

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

非常欣慰的是，這個(gè)機(jī)制兼容IE和Firefox。

下面舉一個(gè)例子：

復(fù)制代碼代碼如下:

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

window.onerror = lastErrorHandler; 
} 
doSomething(); 

這里之所以沒(méi)用attachEvent的方式，是因?yàn)閐etach比較不方便。如果希望此錯(cuò)誤處理變成全局的，那么可以使用attachEvent（Firefox下是addEventListener）的方式。

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

試驗(yàn)了一下，在Safari中的Error對(duì)象擁有如下屬性：

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

message —— 錯(cuò)誤提示信息
opera#sourceloc —— 出錯(cuò)代碼所在行數(shù)
stacktrace —— 出錯(cuò)堆棧信息
這兩個(gè)瀏覽器中的Error對(duì)象已經(jīng)提供了足夠的信息給我們調(diào)試使用了。下面要做的就是把這兩種方式結(jié)合起來(lái)，使之在不同瀏覽器下都能很好的匯報(bào)這些錯(cuò)誤。

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

復(fù)制代碼代碼如下:

 
<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){ 
// 匯報(bào)錯(cuò)誤 
reportError({ 
message: message, 
url: url, 
line: line 
}); 
window.onerror = lastErrorHandler; 
// 不希望此錯(cuò)誤繼續(xù)擴(kuò)散 
return true; 
} 

// 不小心出錯(cuò)了... 
sldfjlskdjflj; 

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