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链接用来提交这一信息。当然,该用户能够添加任何可能帮助捕获该错误的另外的信息。

时间: 2024-08-03 20:56:03

AJAX错误提交系统源码示例的相关文章

用AJAX制作相册程序源码示例

AJAX(Asynchronous JavaScript And XML)是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术.主要应用于Ria(Rich internet applications)的开发上. xml问题终于在今天还是解决了.最后在FireFox里还是使用了Dom的一些老方法.我这里就具体解释一下方法吧. 代码: var XmlHttp; //用来定义一个xmlHttpRequest对象var temp_url_arr=new

简单ajax+asp投票系统源码

/*  *--------------------------------------------------------------------  *  *创建一个XMLHttp实例  *return object 成功创建返回一个XMLHttp对象实例,否则返回false  *  *--------------------------------------------------------------------  */  function CreateAjax()  {     var

【代码管理】GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流

找到一篇很详细的Git教程,真的很不错,推荐!!! GitHub操作总结 : 总结看不明白就看下面的详细讲解. . 作者 :万境绝尘  . GitHub操作流程 : 第一次提交 :   方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化git仓库 :git init ; -- 提交改变到缓存 :git commit -m 'description' ; -- 本地git仓库关联GitHub仓库 : git remote add origin git@g

PHP+Mysql无刷新问答评论系统(源码)_php实例

自己写的一个评论系统源码分享给大家,包括有表情,还有评论机制.用户名是随机的 针对某一篇文章进行评论 function subcomment() { $data['uid'] = getUserid(); $data['mtype'] = I("post.mtype", 0, 'int'); if ($data['uid'] == '') { echo json_encode(array("code" => -1)); } else { $content =

PHP+Mysql无刷新问答评论系统(源码)

自己写的一个评论系统源码分享给大家,包括有表情,还有评论机制.用户名是随机的 针对某一篇文章进行评论 function subcomment() { $data['uid'] = getUserid(); $data['mtype'] = I("post.mtype", 0, 'int'); if ($data['uid'] == '') { echo json_encode(array("code" => -1)); } else { $content =

ASP调用存储过程源码示例

ASP调用存储过程源码示例 以下是代码:<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%     Set conn = CreateObject("ADODB.Connection")     strCon = "Provider=SQLNCLI;Password=sa;Persist Security Info=True;User ID=sa;Initial Catalog=Nor

求韩顺平老师的 满汉楼系统源码及素材

问题描述 如题求韩顺平老师的满汉楼系统源码及素材 解决方案

获取系统platform文件-怎样查看安卓系统源码

问题描述 怎样查看安卓系统源码 要写个应用需要系统权限,到网上查了下要用到目标系统的platform对apk重签名,请问下这目标系统的platform文件到底怎么获取的,求大神指教 解决方案 http://blog.csdn.net/hens007/article/details/7428555

uri-联系人信息工具类,提示路径不对?我是照着系统源码写的路径

问题描述 联系人信息工具类,提示路径不对?我是照着系统源码写的路径 package com.example.mobilesafe.utils; import java.util.ArrayList; import java.util.List; import android.content.ContentResolver; import android.content.Context; import android.database.Cursor; import android.net.Uri;