Errors and AJAX

Thursday 08th of December 2016 04:56:21 PM In case you haven't heard by now, the hottest buzzword in the realm of web technology is AJAX (as coined in an Adaptive Path essay). The crux of the AJAX framework is the XMLHttpRequest JavaScript object which allows client-side developers to send and receive XML documents over HTTP without interrupting the user, and without hacking around with hidden frames. Now, some might shudder at the notion of allowing client-side developers who might be more used to validating forms and animating rollover images to suddenly be responsible for traversing XML documents and negotiating HTTP headers, but without risk, there is no reward. And just to soothe any lingering trepidation, I will demonstrate how to use XMLHttpRequest to not only add previously impossible or infeasible features, but also to reduce errors and improve quality.

XMLHttpRequest and XML DOM for JavaScript Basics

First, we need to set up a few ground rules. The XMLHttpRequest object in particular, and XML DOM in general, is widely supported in any recent browser (IE, Mozilla, Safari, Opera) although, as usual, Microsoft has taken a slightly different tack on implementation and requires some special care. While our more progressive friends directly implement XMLHttpRequest, IE requires that you instantiate an ActiveXObject with the same properties. An excellent overview and full feature list is available at the Apple Developer Connection site.

A basic example follows:

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 {
}
}

The potential uses for this powerful tool are vast, and exploration of the possibilities has just begun. But before anyone gets carried away with trying to create an XML circus on the web, I suggest we set up a safety net to keep any high-flyers from breaking their necks.

JavaScript Error Handling Basics

JavaScript has come a long way since its earlier versions, which were crude, lacking in features, and just poorly implemented. Newer browsers not only support the try/catch/finally keywords you will recognize from C++ and Java, they also implement an onerror event that can trap any error conditions that arise during runtime. Usage is pretty straightforward:

function riskyBusiness() {
try {
riskyOperation1();
riskyOperation2();
} catch (e) {
} finally {
}
}
window.onerror = handleError; // safety net to trap all errors
function handleError(message, URI, line) {
return true; // this will stop the default message
}

A Practical Example: Persisting Client-side Errors to your Server

Now that we have the basics of XMLHttpRequest and JavaScript error handling, let's look at an implementation that ties the two together. You'd think that JavaScript errors would be easy to spot given the prevalent "Yellow Triangle of Death", but I still see them slip past the QA departments of several blue chip organizations' public-facing web sites.

Figure 1

So, here I will present a method for trapping errors and logging them back to the server in the hope that someone might be alerted to fix it. First, let's consider our client. The client should provide a class to be used as a singleton Logger object that can transparently handle the gritty details.

First we create the constructor:

function Logger() {
this.req;
this.errorToXML = errorToXML;
this.log = log;
}

Next, we define the method that will serialize an Error object into XML. By default, an Error object only has two properties, name and message, but we will also check for a third called location which may be useful.

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>';
sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>
laoreet dolore magna aliquam erat volutpat.</P>
Figure 9-22

Figure 9-22. Another approach to defining a "change bar"

Remember when we mentioned static-position much earlier in the chapter? Here's one example of how it works and how it can be very useful.

Another important point is that when an element is positioned, it establishes a containing block for its descendant elements. For example, we could absolutely position an element and return xml; }

Next is the log method. This is the meat and potatoes of the script that really brings together the principles described above. Notice that we are using the POST method for our call. What I am essentially creating here is a bespoke web service that is write-only and creates new records on each successful request. Therefore, POST is the only appropriate option.

function log(err) {
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
this.req.open("POST", "/cgi-bin/AjaxLogger.cgi");
this.req.setRequestHeader('REFERER', location.href);
this.req.setRequestHeader('content-type', 'text/xml');
this.req.onreadystatechange = errorLogged;
this.req.send(this.errorToXML(err));
this.timeout = window.setTimeout("abortLog();", 10000);
}

The last part of our class definition is to create an instance of the Logger class. There should be only one instance of this class.

var logger = new Logger();

The last two functions are just there for housekeeping. If something goes wrong while logging the error, there is not much we can do except bother the user. Hopefully, it will never come to this. These are not class methods since the events will not have references to our object, but will refer to the logger instance we just created.

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.');
}

All of the preceding code can be wrapped up into one .js file that can be included on any (or every) page in your site. Here is an example of how to include it and put it to good use:

<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; // add custom property
logger.log(error);
warnUser();
return true; // stop the yellow triangle
}
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>

Now that we have seen how to integrate the logger into our HTML pages, all that is left is to define some way of receiving and translating the message. I have chosen a lowest common denominator approach and built a CGI script in Perl that uses one of my favorite modules, XML::Simple, to parse the post data, and CGI::Carp to pipe the results directly to httpd error log, thus saving your system administrators from having to monitor another log. This script also includes some good examples of appropriate response codes for different success and failure conditions.

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

And that's all there is to it! Now, the next time some slippery JavaScript gets into the system, you can expect your log monitors to start flashing red lights and your client-side developers to get calls in the middle of the night.

H1 {border-bottom: thick solid gray;}

This will apply the values to the bottom border alone, as shown inFigure 7-45, leaving the others to their defaults.Since the default border style is none, no bordersappear on the other three sides of the element.

Figure 7-45

Figure 7-45. Shorthand properties make styles easier

As you may have guessed, there are a total of four suchshorthand

The title of the article is the most obvious visual differencebetween the two layouts. The printed version of the article has atitle which is stretched out, so to speak. This could be easilyrecreated using the CSS2 property font-stretch,but sadly, this property was not supported at the time of thiswriting. See Chapter 10, "CSS2: A Look Ahead" for a look atfont-stretch.

The opening dropped capital "T" also doesn't seemto quite match up. This might also be addressed using upper-alpha | lower-alpha | upper-roman | lower-roman | none

The meaning of these values is shown in Table 7-1.

Table 7-1. Values of the list-style property and their results

These properties can only be applied to any element that has a

How can XML help app servers do their work? As you can see in Figure 2, in order for the app server to harvest information from such a rich variety of sources, there must be some common ground between all of these sources (each of which might be running on a different hardware and software system). This common ground is the information which flows throughout the entire system, regardless of what source the information comes from. CORBA is an example of tying disparate systems together based on the interfaces that certain remote objects implement. XML does the same thing for data. It allows these disparate systems to share information in a medium that consists only of pure information (and the structural relationships that exist inside of that information). By taking the lowest common denominator approach by using plain text to encode data, XML allows these systems to talk with each other without requiring any special binary information format converters or other service layers to translate between binary formats (for encoding data). Also, since HTTP already supports transmission of plain text, it is completely natural to move XML around using the Hyper Text Transfer Protocol through firewalls and disparate networks. This is shown in Figure 3. XML can be transmitted between systems using one of the most prevalent protocols in use today, Hypertext Transfer Protocol or HTTP 1.1 (which is the protocol of the web).

App server developers are not restricted to using HTTP, they can transmit and recieve XML information using simple remote CORBA objects and RMI objects. The key is that by using XML, it makes these remote services or objects easier to build. And, by sticking with XML, any one of these technologies can be used in your design of your app server. You can use whatever technology is most appropriate to getting the job done, knowing that all the information flows as XML and can be processed by any part of the system. The reason Java object serialization did not achieve this is because it encodes object data to a binary format that is dependent on too many things (like the JVM version, and the existence of classes when things are deserialized, etc). XML is not limited by any of these restrictions (or problems), which makes it much easier to create systems that allow XML information to flow between different subsystems. Also by relying only on the data, large portions of the system can be replaced with better or different implementations for future-readiness.

App servers traditionally give their client apps access to information in remote databases, remote file systems, remote object repositories, remote web resources, and even other app servers. All these information sources don't even need to reside on the machine that hosts the app server. These remote resources may be on other machines on the Intranet or the Internet. Using Java and XML, RMI, JDBC, CORBA, JNDI, Servlet and Swing, you can create app servers that can integrate all kinds of remote and local information resources, and client apps that allow you to remotely or locally access this information from the app server.