為AJAX應(yīng)用程序構(gòu)建一個(gè)錯(cuò)誤提交系統(tǒng)

2024-07-21 02:28:35

字體：大中小

供稿：網(wǎng)友

商業(yè)源碼熱門(mén)下載www.html.org.cn

　　摘要當(dāng)一些應(yīng)用程序崩潰時(shí)，它們往往向用戶(hù)提供一個(gè)機(jī)會(huì)來(lái)提交關(guān)于該錯(cuò)誤的信息。該信息能夠幫助開(kāi)發(fā)者追蹤并修正錯(cuò)誤。本文將向你展示如何在你的javascript/ajax應(yīng)用程序中實(shí)現(xiàn)這樣的功能。

　　一、引言

　　如果可以存取終端用戶(hù)的計(jì)算機(jī)的話(huà)，那么終端用戶(hù)的javascript錯(cuò)誤就很容易調(diào)試。既然你不能實(shí)現(xiàn)這樣的操作，那么你可以采取下面這樣的措施：讓用戶(hù)向你發(fā)送你修正該問(wèn)題需要的內(nèi)容。

　　當(dāng)象mozilla瀏覽器這樣的應(yīng)用程序崩潰時(shí)，它們會(huì)啟動(dòng)一個(gè)錯(cuò)誤提交程序。這些程序?qū)⒃?xún)問(wèn)用戶(hù)是否愿意提交錯(cuò)誤報(bào)告。如果用戶(hù)愿意的話(huà)，該程序?qū)⒁笏麄冚斎胗嘘P(guān)他們的程序崩潰時(shí)的盡可能多的信息。這個(gè)信息，連同該錯(cuò)誤提交程序自己的分析數(shù)據(jù)，一同提交到電子郵件中心以便開(kāi)發(fā)人員和工程經(jīng)理讀取分析。

　　這種功能對(duì)于開(kāi)發(fā)者是極其有用的。既然該程序運(yùn)行于客戶(hù)端機(jī)器上，這是唯一取得有關(guān)于開(kāi)發(fā)者不能在他們自己的開(kāi)發(fā)系統(tǒng)上重新生成相同的錯(cuò)誤信息的方式。他們還能夠監(jiān)視該特定的錯(cuò)誤的頻率和嚴(yán)重性以便決定應(yīng)該首先修正哪些錯(cuò)誤。

　　本文將向你展示如何在javascript/ajax程序中支持這種錯(cuò)誤提交功能。當(dāng)在你的代碼中發(fā)生一個(gè)錯(cuò)誤時(shí)，該系統(tǒng)將彈出一個(gè)用戶(hù)能夠提交錯(cuò)誤信息的窗口。

　　二、問(wèn)題

　　如何在我的javascript/ajax應(yīng)用程序中安裝一個(gè)用戶(hù)錯(cuò)誤提交程序？

　　三、解答

　　把代碼放到一個(gè)包裝程序中，該包裝程序允許用戶(hù)提交一個(gè)包含詳細(xì)錯(cuò)誤信息的電子郵件。

　　(一) 捕獲錯(cuò)誤

　　下列文件被包括在本文相應(yīng)的下載源代碼中，你可以利用它們來(lái)實(shí)現(xiàn)上面的解決方案：

　　·talkback.js-這個(gè)文件包括本系統(tǒng)的完整源碼

　　·test.html-一個(gè)使用talkback.js來(lái)處理一個(gè)發(fā)現(xiàn)錯(cuò)誤的示例腳本

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

　　首先，在用戶(hù)能夠看到這個(gè)錯(cuò)誤之前你需要捕獲它。這樣以來(lái)，你就能夠使用戶(hù)有一個(gè)機(jī)會(huì)來(lái)提交錯(cuò)誤信息；但是，你不想讓他或她的看到任何其它內(nèi)容。我們的目標(biāo)是盡量減少該錯(cuò)誤向用戶(hù)暴露的內(nèi)容。

　　這是很容易實(shí)現(xiàn)的。假定主程序可以經(jīng)由下列函數(shù)激活：

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

　　請(qǐng)注意這里對(duì)tb_wrap()的調(diào)用。這樣以來(lái)，就可以把fun()函數(shù)放到一個(gè)能夠捕獲任何異常并且處理它們的包裝器中。而且，這樣以來(lái)，該用戶(hù)就不會(huì)看到任何發(fā)生在fun()中的異常。

　　(二) 收集錯(cuò)誤信息

　　一旦你捕獲了錯(cuò)誤，那么你需要提取盡可能多的信息。你把越多的錯(cuò)誤數(shù)據(jù)發(fā)送回開(kāi)發(fā)者，他們?cè)接锌赡馨l(fā)現(xiàn)并修正該錯(cuò)誤。

　　遺憾的是，根據(jù)用戶(hù)運(yùn)行的瀏覽器不同，錯(cuò)誤對(duì)象具有不同的屬性。大多數(shù)情況下，你能夠依賴(lài)name和message屬性。注意，stack屬性中包含一個(gè)極其有用的棧蹤跡，只是它僅可用于最近版本的基于mozilla的瀏覽器中。

　　(三) 創(chuàng)建一個(gè)mailto:鏈接

　　為了使用戶(hù)能夠向你發(fā)送關(guān)于該錯(cuò)誤的信息，你應(yīng)該提供給他們一個(gè)他們能夠點(diǎn)擊的鏈接。這樣很好，因?yàn)樗屵@些用戶(hù)自己決定愿不愿意受麻煩，而且他們能夠避免發(fā)送多份相同的錯(cuò)誤報(bào)告。

　　這個(gè)mailto:鏈接能夠打開(kāi)用戶(hù)的電子郵件程序，然后就象下面這樣填充郵件的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

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

　　(四) 實(shí)現(xiàn)細(xì)節(jié)

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

　　◆tb_wrap(fun)-這個(gè)函數(shù)負(fù)責(zé)把函數(shù)fun放到一個(gè)包裝器中，由該包裝器捕獲任何異常并且向用戶(hù)提供一個(gè)機(jī)會(huì)來(lái)把這些錯(cuò)誤發(fā)送回開(kāi)發(fā)者。當(dāng)發(fā)生一個(gè)異常時(shí)，它把該錯(cuò)誤對(duì)象添加到一個(gè)異常列表并且向該用戶(hù)提供一個(gè)提交鏈接。如果任何更深的異常發(fā)生，那么它將把它們添加到異常列表和提交鏈接。

　　◆tb_show_talkback_link()-這個(gè)函數(shù)顯示一個(gè)小型浮動(dòng)窗口，它能夠向用戶(hù)提供一個(gè)機(jī)會(huì)來(lái)提交一個(gè)錯(cuò)誤："an error has occurred in this page. to report this error， please click here: report error"。

　　·這個(gè)窗口僅在第一次發(fā)生異常時(shí)出現(xiàn)，并且它停在其它窗口內(nèi)容之一。如果更深的異常發(fā)生，那么它們的信息會(huì)被添加到現(xiàn)有的mailto:鏈接上。

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

　　四、小結(jié)

　　現(xiàn)在，開(kāi)發(fā)者正在越來(lái)越多地使用javascript和ajax技術(shù)創(chuàng)建具有豐富特征的應(yīng)用程序。因此，對(duì)于應(yīng)用程序級(jí)支持的需要也相應(yīng)地增長(zhǎng)。本文中提供的這個(gè)小型回饋系統(tǒng)可能有助于搜集到有關(guān)一個(gè)錯(cuò)誤的盡可能多的信息并且向用戶(hù)提供一個(gè)mailto:鏈接用來(lái)提交這一信息。當(dāng)然，該用戶(hù)能夠添加任何可能幫助捕獲該錯(cuò)誤的另外的信息。

上一篇：WebService服務(wù)和ajax使用教程

下一篇：使用AJAX技術(shù)構(gòu)建更優(yōu)秀的Web應(yīng)用程序