為AJAX應用程序構建一個錯誤提交系統

2024-07-21 02:28:35

字體：大中小

來源：轉載

供稿：網友

商業源碼熱門下載www.html.org.cn

　　摘要當一些應用程序崩潰時，它們往往向用戶提供一個機會來提交關于該錯誤的信息。該信息能夠幫助開發者追蹤并修正錯誤。本文將向你展示如何在你的javascript/ajax應用程序中實現這樣的功能。

　　一、引言

　　如果可以存取終端用戶的計算機的話，那么終端用戶的javascript錯誤就很容易調試。既然你不能實現這樣的操作，那么你可以采取下面這樣的措施：讓用戶向你發送你修正該問題需要的內容。

　　當象mozilla瀏覽器這樣的應用程序崩潰時，它們會啟動一個錯誤提交程序。這些程序將詢問用戶是否愿意提交錯誤報告。如果用戶愿意的話，該程序將要求他們輸入有關他們的程序崩潰時的盡可能多的信息。這個信息，連同該錯誤提交程序自己的分析數據，一同提交到電子郵件中心以便開發人員和工程經理讀取分析。

　　這種功能對于開發者是極其有用的。既然該程序運行于客戶端機器上，這是唯一取得有關于開發者不能在他們自己的開發系統上重新生成相同的錯誤信息的方式。他們還能夠監視該特定的錯誤的頻率和嚴重性以便決定應該首先修正哪些錯誤。

　　本文將向你展示如何在javascript/ajax程序中支持這種錯誤提交功能。當在你的代碼中發生一個錯誤時，該系統將彈出一個用戶能夠提交錯誤信息的窗口。

　　二、問題

　　如何在我的javascript/ajax應用程序中安裝一個用戶錯誤提交程序？

　　三、解答

　　把代碼放到一個包裝程序中，該包裝程序允許用戶提交一個包含詳細錯誤信息的電子郵件。

　　(一) 捕獲錯誤

　　下列文件被包括在本文相應的下載源代碼中，你可以利用它們來實現上面的解決方案：

　　·talkback.js-這個文件包括本系統的完整源碼

　　·test.html-一個使用talkback.js來處理一個發現錯誤的示例腳本

　　這里的test.html頁面包含一些javascript代碼，其中拋出一個異常。這個頁面把函數fun_a()安裝為body部分的onload處理器。該fun_a()函數又調用fun_b()，fun_b()又調用fun_c()。最后，fun_c()存取一個不存在的對象中的不存在的域，并觸發一個真正的javascript異常。

　　首先，在用戶能夠看到這個錯誤之前你需要捕獲它。這樣以來，你就能夠使用戶有一個機會來提交錯誤信息；但是，你不想讓他或她的看到任何其它內容。我們的目標是盡量減少該錯誤向用戶暴露的內容。

　　這是很容易實現的。假定主程序可以經由下列函數激活：

function fun()
{
　//程序在此.
}
fun = tb_wrap( fun);

　　請注意這里對tb_wrap()的調用。這樣以來，就可以把fun()函數放到一個能夠捕獲任何異常并且處理它們的包裝器中。而且，這樣以來，該用戶就不會看到任何發生在fun()中的異常。

　　(二) 收集錯誤信息

　　一旦你捕獲了錯誤，那么你需要提取盡可能多的信息。你把越多的錯誤數據發送回開發者，他們越有可能發現并修正該錯誤。

　　遺憾的是，根據用戶運行的瀏覽器不同，錯誤對象具有不同的屬性。大多數情況下，你能夠依賴name和message屬性。注意，stack屬性中包含一個極其有用的棧蹤跡，只是它僅可用于最近版本的基于mozilla的瀏覽器中。

　　(三) 創建一個mailto:鏈接

　　為了使用戶能夠向你發送關于該錯誤的信息，你應該提供給他們一個他們能夠點擊的鏈接。這樣很好，因為它讓這些用戶自己決定愿不愿意受麻煩，而且他們能夠避免發送多份相同的錯誤報告。

　　這個mailto:鏈接能夠打開用戶的電子郵件程序，然后就象下面這樣填充郵件的subject和body域：

subject: error from http://myserver.com/myapp/index.cgi?id=234
body:

referenceerror: nonexistent_variable is not defined
fun_c()@http://myserver.com/myapp/index.cgi?id=234:19
fun_b()@http://myserver.com/myapp/index.cgi?id=234:14
fun_a()@http://myserver.com/myapp/index.cgi?id=234:9
apply(null，[object object])@:0
()@http://myserver.com/myapp/livedebug.js:106
onload([object event])@:0 @:0

　　用戶能夠添加他們喜歡的另外的任何信息，然后發送該消息。

　　(四) 實現細節

　　下面這些函數定義在talkback.js文件中：

　　◆tb_wrap(fun)-這個函數負責把函數fun放到一個包裝器中，由該包裝器捕獲任何異常并且向用戶提供一個機會來把這些錯誤發送回開發者。當發生一個異常時，它把該錯誤對象添加到一個異常列表并且向該用戶提供一個提交鏈接。如果任何更深的異常發生，那么它將把它們添加到異常列表和提交鏈接。

　　◆tb_show_talkback_link()-這個函數顯示一個小型浮動窗口，它能夠向用戶提供一個機會來提交一個錯誤："an error has occurred in this page. to report this error， please click here: report error"。

　　·這個窗口僅在第一次發生異常時出現，并且它停在其它窗口內容之一。如果更深的異常發生，那么它們的信息會被添加到現有的mailto:鏈接上。

　　·tb_set_link_contents()-在每次拋出一個異常時，都把它添加到一個列表上。然后，掃描整個列表以發現有用的信息，然后把該信息打包到一個mailto:鏈接中。當在第一次拋出異常時顯示這個鏈接，然后一直顯示。

　　四、小結

　　現在，開發者正在越來越多地使用javascript和ajax技術創建具有豐富特征的應用程序。因此，對于應用程序級支持的需要也相應地增長。本文中提供的這個小型回饋系統可能有助于搜集到有關一個錯誤的盡可能多的信息并且向用戶提供一個mailto:鏈接用來提交這一信息。當然，該用戶能夠添加任何可能幫助捕獲該錯誤的另外的信息。

上一篇：WebService服務和ajax使用教程

下一篇：使用AJAX技術構建更優秀的Web應用程序