實際的例子：把客戶端錯誤傳遞到服務器上
現在我們知道了XMLHttpRequest和Javascript錯誤處理的一些基礎知識了，我們來看一個同時使用了兩者的實現例子。你可能認為JavaScript錯誤可以很簡單地在流行的"黃色死亡三角"中顯示出來，但是仍然有一些錯誤傳遞到了幾家籃籌股公司的公共web站點的質量部門了。
因此，我將提供一個用於捕捉錯誤並把錯誤記錄到服務器上的方法，這樣其他人就可能修補這些問題。首先，我們考慮客戶端。客戶端必須提供一個類，它被用作日志記錄器（Logger）對象，可以透明地處理各種細節信息。
下面是我們建立的構造函數：
// 類的構造函數
function Logger() {
// 字段
this.req;
// 方法
this.errorToXML = errorToXML;
this.log = log;
}
接下來，我們定義了一個方法，它會把Error對象序列化為XML。在默認情況下，Error對象只有兩種屬性，分別是name和message，但是我們還是使用了第三個屬性（location），它有時候是有用的。
// 把錯誤映射到XML文檔中
function errorToXML(err) {
var xml = ’＜?XML version="1.0"?＞\n’ +
’＜error＞\n’ +
’＜name＞’ + err.name + ’＜/name＞\n’ +
’＜message＞’ + err.message + ’＜/message＞\n’;
if (err.location) XML += ’＜location＞’ + err.location +’＜/location＞’;
XML += ’＜/error＞’;
return XML;
}
接著是log方法。這是腳本最基本的部分，它真正地實現了上述的原理。請注意，我們在調用中使用的是POST方法。從本質上說，我在此處建立的是一個定制的web服務，它是只讀的，並為每個成功的請求建立新記錄。因此，POST是唯一適當的選擇。
// 日志記錄類的log方法
function log(err) {
// 查看特性
if (window.XMLHttpRequest) this.req = new XMLHttpRequest();
else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP");
else return; // 失敗了
// 設置方法和URI
this.req.open("POST", "/cgi-bin/AJaxLogger.CGI");
// 設置請求頭信息。REFERER 是頂層URI，如果它發生在一個包含的.JS文件中
// 那麼它的位置與錯誤的位置可能不同
this.req.setRequestHeader(’REFERER’, location.href);
this.req.setRequestHeader(’content-type’, ’text/XML’);
// 請求完成的時候調用的函數
this.req.onreadystatechange = errorLogged;
this.req.send(this.errorToXML(err));
// 如果請求在10秒鐘內沒有完成，就出現一些錯誤消息
this.timeout = window.setTimeout("abortLog();", 10000);
}
類的最後一部分建立了一個Logger類實例。這個類應該只有一個實例。
// 只有一個日志記錄器實例
var logger = new Logger();
最後的兩個函數只是用於瑣碎事務管理的。如果在記錄錯誤的時候出現了問題，除了干擾用戶之外，我們幾乎不能做任務事務。但是，這種情況永遠不會出現。這些不是類的方法，因為事件沒有指向我們的對象的指針，但是它會指向我們建立的logger實例。
// 我們試過了，但是連接錯誤，沒有希望了
function abortLog() {
logger.req.abort();
alert("Attempt to log the error timed out.");
}
// 請求的狀態發生改變的時候調用
function errorLogged() {
if (logger.req.readyState != 4) return;
window.clearTimeout(logger.timeout);
// 請求完成了
if (logger.req.status ＞= 400)
alert(’Attempt to log the error failed.’);
}
前面的所有代碼都被包裝到一個.JS文件中了，我們可以在站點的任何（或每一個）頁面中包含這個文件。下面是如何包含這個文件的例子：
＜script type="text/Javascript" src="Logger.JS"＞＜/script＞
＜script type="text/Javascript"＞
function trapError(msg, URI, ln) {
// 在對象中包裝我們未知的錯誤
var error = new Error(msg);
error.location = URI + ’, line: ’ + ln; // 添加自定義屬性
logger.log(error);
warnUser();
return true; // 停止黃色三角形
}
window.onerror = trapError;
function foo() {
try {
riskyOperation();
} catch (err) {
//添加自定義屬性
err.location = location.href + ’, function: foo()’;
logger.log(err);
warnUser();
}
}
function warnUser() {
alert("An error has occurred while processing this page."+"Our engineers have been alerted!");
location.href = ’/path/to/error/page.Html’;
}
＜/script＞
現在你已經知道如何把日志記錄器集成到Html頁面中了，剩余的工作就是定義一種接收和轉換消息的方法了。我選擇使用最底層的通用命名方法，在Perl中建立了一個CGI腳本，這個腳本使用了我喜歡的一些模塊，它使用XML::Simple來分析post數據，使用CGI::Carp把結果直接導入到httpd錯誤日志，這樣可以節約系統管理員的時間，因為他不需要查看另外一個日志了。這個腳本還包含了很多良好的示例，它們適當地記錄了不同的成功和失敗條件。
use CGI;
use CGI::Carp qw(set_progname);
use XML::Simple;
my $request = CGI-＞new();
my $method = $request-＞request_method();
# 方法必須是POST
if ($method eq ’POST’) {
eval {
my $content_type = $request-＞content_type();
if ($content_type eq ’text/XML’) {
print $request-＞header(-status =＞’415 Unsupported Media Type’, -type =＞ ’text/XML’);
croak "Invalid content type: $content_type\n";
}
# 如果方法是POST，內容既不是URL編碼也不是多部分形式，
#那麼整個post會被填充到一個參數中：POSTDATA。
my $error_XML = $request-＞param(’POSTDATA’);
my $ref = XML::Simple::XMLin($error_XML);
my ($name, $msg, $location) =($ref-＞{’name’}, $ref-＞{’message’}, ’’);
$location = $ref-＞{’location’} if (defined($ref-＞{’location’}));
# 改變日志中的名字
set_progname(’ClIEnt-side error’);
my $remote_host = $request-＞remote_host();
carp "name: [$name], msg: [$msg], location: [$location]";
};
if ($@) {
print $request-＞header(-status =＞ ’500 Internal server error’,-type =＞ ’text/XML’);
croak "Error while logging: $@";
} else {
# 這部分響應代碼表明操作成功了，但是客戶端不應該期待任何內容
print $request-＞header(-status =＞ ’204 No content’,-type =＞ ’text/XML’);
}
} else {
print $request-＞header(-status =＞ ’405 Method not supported’,-type =＞ ’text/XML’);
croak "Unsupported method: $method";
}
已經完成了！現在，當某些難以理解的JavaScript進入系統的時候，你就可以期待著自己的日志監視器開始閃紅燈，你的客戶端開發人員在深夜接到電話了。