Ajax的錯誤處理機制探討(2)

ajax|錯誤|錯誤處理 實際的例子：把用戶端錯誤傳遞到伺服器上

　　現在我們知道了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進入系統的時候，你就可以期待著自己的日誌監視器開始閃紅燈，你的用戶端開發人員在深夜接到電話了。

• Ajax: 一個建立Web應用的新途徑
• Ajax的錯誤處理機制探討(1)
• Rails系統中的AJAX開發技術簡析(2)
• Rails系統中的AJAX開發技術簡析(1)