LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

如何捕捉Javascript脚本错误并记录到日志中?

admin
2010年8月13日 8:24 本文热度 4806

一、xml httprequestxml dom基础

这两个是web 开发的常用东西,就不说了,先看看使用:

var req;

function postxml(xmldoc) {

       if (window.xmlhttprequest) req = new xmlhttprequest();

       else if (window.activexobject) req = new activexobject("microsoft.xmlhttp");

       else return; // fall on our sword

       req.open(method, serveruri);

       req.setrequestheader('content-type', 'text/xml');

       req.onreadystatechange = xmlposted;

       req.send(xmldoc);

}

function xmlposted() {

       if (req.readystate != 4) return;

       if (req.status == 200) {

              var result = req.responsexml;

       } else {

              // fall on our sword

       }

}

二、javascript脚本错误处理基础

请教大家一个问题?如何处理脚本错误的?又如何去捕捉脚本错误的?有没有遇到过客户打电话抱怨系统不能运行,而你判断可能是客户端问题后就不知道如何处理的情况?

最新的浏览器都支持try/catch方式捕捉javascript异常,还有一个onerror事件来处理异常。

<script language="javascript">

riskybusiness();

window.onerror = handleerror(); // safety net to trap all errors

function riskybusiness() {

       try {

              riskyoperation1();

              riskyoperation2();

       } catch (e) {

              // e is an object of type error with

              // at least two properties: name and message

              alert(e.message);

       } finally {

              // clean up our mess

       }

}

function handleerror() {

       alert("handleerror()");

       // alert the user that this page may not respond properly

       return true; // this will stop the default message

}

</script>

三、将客户端错误写入服务器端的日志文件

首先,客户端建立一个单例模式的对象logger

// singleton class constructor

function logger() {

       // fields

       this.req;

       // methods

       this.errortoxml = errortoxml;

       this.log = log;

}

其次,我们要把javascript错误序列化到xml对象中。默认情况下,error对象只有两个属性:namemessage。我们需要再建立一个属性:location

// map an error to an xml document

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;

}

接下来是利用xmlhttp请求将错误信息写入到日志中,原文作者利用cgi写入,这里,可以根据具体的应用情况选择大家自己的处理方式:

// log method of logger class

function log(err) {

       // feature sniff

       if (window.xmlhttprequest) this.req = new xmlhttprequest();

       else if (window.activexobject) this.req =

              new activexobject("microsoft.xmlhttp");

       else return; // throw up our hands in despair

       // set the method and uri

       this.req.open("post", "/cgi-bin/ajaxlogger.cgi");

       // set the request headers. referer will be the top-level

       // uri which may differ from the location of the error if

       // it occurs in an included .js file

       this.req.setrequestheader('referer', location.href);

       this.req.setrequestheader('content-type', 'text/xml');

       // function to be called when the request is complete

       this.req.onreadystatechange = errorlogged;

       this.req.send(this.errortoxml(err));

       // if the request doesn't complete in 10 seconds,

       // something is up

       this.timeout = window.settimeout("abortlog();", 10000);

}

然后,我们要实例化这个类:

// should only be one instance of the logger

var logger = new logger();

最后的两个方法用来做“家务管理”的。

// we tried, but if there is a connection error, it is hopeless

function abortlog() {

       logger.req.abort();

       alert("attempt to log the error timed out.");

}

// called when the state of the request changes

function errorlogged() {

       if (logger.req.readystate != 4) return;

       window.cleartimeout(logger.timeout);

       // request completed

       if (logger.req.status >= 400)

              alert('attempt to log the error failed.');

}

好了,把前面讲述的几个方法封装到一个公用脚本logger.js中去吧,然后你就可以enjoy了。

在自己开发的脚本中引入这个js并使用如下:

stone评】有问题,有兴趣者可调整。

<script type="text/javascript" src="logger.js"></script>

<script type="text/javascript">

function traperror(msg, uri, ln) {

       // wrap our unknown error condition in an object

       var error = new error(msg);

       error.location = uri + ', line: ' + ln; // add custom property

       logger.log(error);

       warnuser();

       return true; // stop the yellow triangle

}

window.onerror = traperror;

function foo() {

       try {

              riskyoperation();

      } catch (err) {

              // add custom property

              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!");

       // drastic action

       location.href = '/path/to/error/page.html';

}

</script>

最后是在服务器端利用cgi写入日志,代码如下,喜欢用别的方式的程序员可以选择利用你们擅长的语言来将xml日志信息写入服务器端文件。

use cgi;

use cgi::carp qw(set_progname);

use xml::simple;

my $request = cgi->new();

my $method = $request->request_method();

# method must be 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";

              }

              # when method is post and the content type is neither

              # uri encoded nor multipart form, the entire post

              # is stuffed into one param: 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'}));

              # this will change the name of the carper in the log

              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 {

              # this response code indicates that the operation was a

              # success, but the client should not expect any content

              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";

}


该文章在 2010/8/13 8:24:27 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved