Ajax的错误处理机制探讨(2)

ajax|错误|错误处理

实际的例子:把客户端错误传递到服务器上

  现在我们知道了XMLHttpRequest和JavaScript错误处理的一些基础知识了,我们来看一个同时使用了两者的实现例子。你可能认为JavaScript错误可以很简单地在流行的"黄色死亡三角"中显示出来,但是仍然有一些错误传递到了几家篮筹股公司的公共web站点的质量部门了。

  因此,我将提供一个用于捕捉错误并把错误记录到服务器上的方法,这样其他人就可能修补这些问题。首先,我们考虑客户端。客户端必须提供一个类,它被用作日志记录器(Logger)对象,可以透明地处理各种细节信息。

  下面是我们建立的构造函数:

// 类的构造函数
function Logger() {
 // 字段
 this.req;

 // 方法
 this.errorToXML = errorToXML;
 this.log = log;
}

  接下来,我们定义了一个方法,它会把Error对象序列化为XML。在默认情况下,Error对象只有两种属性,分别是name和message,但是我们还是使用了第三个属性(location),它有时候是有用的。

// 把错误映射到XML文档中
function errorToXML(err) {
 var xml = ’<?xml version="1.0"?>\n’ +
 ’<error>\n’ +
 ’<name>’ + err.name + ’</name>\n’ +
 ’<message>’ + err.message + ’</message>\n’;
 if (err.location) xml += ’<location>’ + err.location +’</location>’;
  xml += ’</error>’;
 return xml;
}

  接着是log方法。这是脚本最基本的部分,它真正地实现了上述的原理。请注意,我们在调用中使用的是POST方法。从本质上说,我在此处建立的是一个定制的web服务,它是只读的,并为每个成功的请求建立新记录。因此,POST是唯一适当的选择。

// 日志记录类的log方法
function log(err) {
 // 查看特性
 if (window.XMLHttpRequest) this.req = new XMLHttpRequest();
 else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP");
 else return; // 失败了
 // 设置方法和URI
 this.req.open("POST", "/cgi-bin/AjaxLogger.cgi");
 // 设置请求头信息。REFERER 是顶层URI,如果它发生在一个包含的.js文件中
 // 那么它的位置与错误的位置可能不同
 this.req.setRequestHeader(’REFERER’, location.href);
 this.req.setRequestHeader(’content-type’, ’text/xml’);
 // 请求完成的时候调用的函数
 this.req.onreadystatechange = errorLogged;
 this.req.send(this.errorToXML(err));
 // 如果请求在10秒钟内没有完成,就出现一些错误消息
 this.timeout = window.setTimeout("abortLog();", 10000);
}

  类的最后一部分建立了一个Logger类实例。这个类应该只有一个实例。

// 只有一个日志记录器实例
var logger = new Logger();

  最后的两个函数只是用于琐碎事务管理的。如果在记录错误的时候出现了问题,除了干扰用户之外,我们几乎不能做任务事务。但是,这种情况永远不会出现。这些不是类的方法,因为事件没有指向我们的对象的指针,但是它会指向我们建立的logger实例。

// 我们试过了,但是连接错误,没有希望了
function abortLog() {
 logger.req.abort();
 alert("Attempt to log the error timed out.");
}

// 请求的状态发生改变的时候调用
function errorLogged() {
 if (logger.req.readyState != 4) return;
 window.clearTimeout(logger.timeout);
 // 请求完成了
 if (logger.req.status >= 400)
  alert(’Attempt to log the error failed.’);
}

  前面的所有代码都被包装到一个.js文件中了,我们可以在站点的任何(或每一个)页面中包含这个文件。下面是如何包含这个文件的例子:

<script type="text/javascript" src="Logger.js"></script>
<script type="text/javascript">
function trapError(msg, URI, ln) {
 // 在对象中包装我们未知的错误
 var error = new Error(msg);
 error.location = URI + ’, line: ’ + ln; // 添加自定义属性
 logger.log(error);
 warnUser();
 return true; // 停止黄色三角形
}
window.onerror = trapError;

function foo() {
 try {
  riskyOperation();
 } catch (err) {
  //添加自定义属性
  err.location = location.href + ’, function: foo()’;
  logger.log(err);
  warnUser();
 }
}
function warnUser() {
 alert("An error has occurred while processing this page."+"Our engineers have been alerted!");
 location.href = ’/path/to/error/page.html’;
}
</script>

  现在你已经知道如何把日志记录器集成到HTML页面中了,剩余的工作就是定义一种接收和转换消息的方法了。我选择使用最底层的通用命名方法,在Perl中建立了一个CGI脚本,这个脚本使用了我喜欢的一些模块,它使用XML::Simple来分析post数据,使用CGI::Carp把结果直接导入到httpd错误日志,这样可以节约系统管理员的时间,因为他不需要查看另外一个日志了。这个脚本还包含了很多良好的示例,它们适当地记录了不同的成功和失败条件。

use CGI;
use CGI::Carp qw(set_progname);
use XML::Simple;
my $request = CGI->new();

my $method = $request->request_method();
# 方法必须是POST
if ($method eq ’POST’) {
 eval {
  my $content_type = $request->content_type();
  if ($content_type eq ’text/xml’) {
   print $request->header(-status =>’415 Unsupported Media Type’, -type => ’text/xml’);
   croak "Invalid content type: $content_type\n";
  }
  # 如果方法是POST,内容既不是URL编码也不是多部分形式,
  #那么整个post会被填充到一个参数中:POSTDATA。
  my $error_xml = $request->param(’POSTDATA’);
  my $ref = XML::Simple::XMLin($error_xml);
  my ($name, $msg, $location) =($ref->{’name’}, $ref->{’message’}, ’’);
  $location = $ref->{’location’} if (defined($ref->{’location’}));
  # 改变日志中的名字
  set_progname(’Client-side error’);
  my $remote_host = $request->remote_host();
  carp "name: [$name], msg: [$msg], location: [$location]";
 };
 if ($@) {
  print $request->header(-status => ’500 Internal server error’,-type => ’text/xml’);
  croak "Error while logging: $@";
 } else {
  # 这部分响应代码表明操作成功了,但是客户端不应该期待任何内容
  print $request->header(-status => ’204 No content’,-type => ’text/xml’);
 }
 } else {
  print $request->header(-status => ’405 Method not supported’,-type => ’text/xml’);
  croak "Unsupported method: $method";
}

  已经完成了!现在,当某些难以理解的JavaScript进入系统的时候,你就可以期待着自己的日志监视器开始闪红灯,你的客户端开发人员在深夜接到电话了。

  • Ajax: 一个建立Web应用的新途径
  • Ajax的错误处理机制探讨(1)
  • Rails系统中的AJAX开发技术简析(2)
  • Rails系统中的AJAX开发技术简析(1)
时间: 2024-08-23 10:20:27

Ajax的错误处理机制探讨(2)的相关文章

Ajax的错误处理机制探讨

ajax|错误|错误处理 当前web技术中最热门的词语是什么?是AJAX.AJAX框架组件的核心是XMLHttpRequest JavaScript对象,它允许客户端开发人员在不中断用户操作.不利用隐藏页面的情况下,通过HTTP发送和接收XML文档. 现在,有些人可能会感到恐惧,因为它突然允许那些可能过多地使用了验证窗体和动画图像的客户端开发人员负责传递XML文档和处理HTTP头信息,但是,没有风险就没有收益.我们不用害怕,我将演示如何使用XMLHttpRequest来添加一些以前不可能的.行不

Ajax的错误处理机制探讨(1)

ajax|错误|错误处理 <br>AJAX框架组件的核心是XMLHttpRequest JavaScript对象,它允许客户端开发人员在不中断用户操作.不利用隐藏页面的情况下,通过HTTP发送和接收XML文档.<table border="0" cellspacing="0" cellpadding="0" align="left" style="margin-top:10px;margin-rig

Ajax的错误处理机制

ajax|错误|错误处理 AJAX框架组件的核心是XMLHttpRequest JavaScript对象,它允许客户端开发人员在不中断用户操作.不利用隐藏页面的情况下,通过HTTP发送和接收XML文档.现在,有些人可能会感到恐惧,因为它突然允许那些可能过多地使用了验证窗体和动画图像的客户端开发人员负责传递XML文档和处理HTTP头信息,但是,没有风险就没有收益.我们不用害怕,我将演示如何使用XMLHttpRequest来添加一些以前不可能的.行不通的特性,它同时还减少了错误,提高了产品质量. J

全面了解javascript中的错误处理机制_javascript技巧

前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

深入分析javascript中的错误处理机制_javascript技巧

前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

ASP.NET的错误处理机制

对于一个Web应用程序来说,出错是在所难免的,因此我们应该未雨绸缪,为可能出现的错误提供恰当的处理.事实上,良好的错误处理机制正是衡量Web应用程序好坏的一个重要标准.试想一下,当用户不小心在浏览器输入了错误的URL或者当用户提供了一些信息导致程序出错的时候,如果我们没有对这些情况进行处理,而是任由404或是500的错误页面甚至出错的堆栈信息呈现在用户面前,这无疑会把一些用户给吓跑.所以,在我们开发Web应用程序的时候,应该对错误处理机制有充分的了解. 让我们回到ASP.NET上来,先提两个问题

击鼓传花——轮询式错误处理机制的设计与实现

错误|错误处理|设计 击鼓传花--轮询式错误处理机制的设计与实现(一) -------------------------------------------------------------------------------- 摘要 本文简单介绍了一种轮询式错误处理机制的设计思想与具体实现,本机制可以灵活地实现对错误处理方式的扩充,以及对错误信息格式的自定义. -----------------------------------------------------------------

击鼓传花——轮询式错误处理机制的设计与实现(三)

错误|错误处理|设计 ErrHdlEventLogClass: 该类是将错误信息写入系统日志的具体实现类,该类继承自AbstractHandleClass.用户在自定义错误处理方式的时候,便可仿照该类来设计.具体代码如下: public class ErrHdlEventLogClass: AbstractHandleClass { public const int ID = 2; //错误处理方式的序号 public ErrHdlEventLogClass() { // // TODO: Ad

PHP 错误处理机制_php技巧

在日常的项目开发过程中,总是会出现一些我们意想不到的异常错误,如果我们对此没有进行相对完善的处理,那么程序看上去也很不专业,也很可能就会成为别人攻击系统的有效信息:有些错误异常会终止脚本执行,这个时候如果没有一些错误提示信息的话,那么我们只能从头开始看代码了,要知道项目中成百上千行的代码对我们来说是件多么恐怖的事情啊,那么我们如何在项目开发的过程中快速准确地定位到异常.错误呢,并进行相应的处理,本文由自己对错误.异常处理的了解,再此分享与大家相互学习交流,并作为一个备忘. 系统错误处理器: PH