AJAX錯誤提交系統源碼樣本

來源:互聯網
上載者:User
  摘要 當一些應用程式崩潰時,它們往往向使用者提供一個機會來提交關於該錯誤的資訊。該資訊能夠協助開發人員追蹤並修正錯誤。本文將向你展示如何在你的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連結用來提交這一資訊。當然,該使用者能夠添加任何可能協助捕獲該錯誤的另外的資訊。


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.