DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX錯誤提交系統源碼示例
AJAX錯誤提交系統源碼示例
編輯:AJAX詳解     
摘要 當一些應用程序崩潰時,它們往往向用戶提供一個機會來提交關於該錯誤的信息。該信息能夠幫助開發者追蹤並修正錯誤。本文將向你展示如何在你的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的浏覽器中。

  (三) 創建一個Mailt鏈接

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

  這個mailt鏈接能夠打開用戶的電子郵件程序,然後就象下面這樣填充郵件的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"。

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

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

  四、 小結

  現在,開發者正在越來越多地使用JavaScript和AJax技術創建具有豐富特征的應用程序。因此,對於應用程序級支持的需要也相應地增長。本文中提供的這個小型回饋系統可能有助於搜集到有關一個錯誤的盡可能多的信息並且向用戶提供一個mailt鏈接用來提交這一信息。當然,該用戶能夠添加任何可能幫助捕獲該錯誤的另外的信息。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved