如何捕捉Javascript脚本错误并记录到日志中?
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
一、xml httprequest和xml dom基础 这两个是web 开发的常用东西,就不说了,先看看使用:
二、javascript脚本错误处理基础
请教大家一个问题?如何处理脚本错误的?又如何去捕捉脚本错误的?有没有遇到过客户打电话抱怨系统不能运行,而你判断可能是客户端问题后就不知道如何处理的情况? 最新的浏览器都支持try/catch方式捕捉javascript异常,还有一个onerror事件来处理异常。
三、将客户端错误写入服务器端的日志文件 首先,客户端建立一个单例模式的对象logger // singleton class constructor function logger() { // fields this.req;
// methods this.errortoxml = errortoxml; this.log = log; } 其次,我们要把javascript错误序列化到xml对象中。默认情况下,error对象只有两个属性:name和message。我们需要再建立一个属性: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 编辑过 |
关键字查询
相关文章
正在查询... |