Build an Error-Submission System for Your JavaScript/AJAX App Users : Page 2

To Trap an Error

The following files are included with the source code for this article, which you will utilize for the solution:

• talkback.js – This file includes the complete source for the talkback system (more about this in the upcoming "Implementation Details" section).
• test.html – An example script that uses talkback.js to deal with a contrived error.

The test.html page contains some JavaScript code that throws an exception. This page installs the function fun_a() as the body onload handler. The fun_a() function in turn calls fun_b(), which calls fun_c(). Finally, fun_c() accesses a nonexistent field in a nonexistent object, triggering a genuine JavaScript exception.

The first thing you need to do is catch this error before it becomes visible to the user. You will give the user a chance to submit error information, but you don't want him or her to see anything else. The goal is to reduce the user's exposure to the error.

This is simple to do. Assume the main program is invoked via the following function:

function fun()
{
  // Program goes here.
}

fun = tb_wrap( fun );

Note the call to tb_wrap(). This puts fun() inside a wrapper that traps any exceptions and handles them. Thus, the user doesn't see any exceptions that happen within fun().

Gathering Error Information

Once you've trapped the error, you need to extract as much information about it as you can. The more error data you send back to developers, the more likely they are to find and fix the bug.

Unfortunately, error objects have different properties depending on which browser the user is running. Most of the time, you can count on the name and message properties. The stack property, which contains an extremely useful stack trace, is available only in recent versions of Mozilla-derived browsers.

Creating a Mailto: Link

To get users to send you information about the error, you offer them a link they can click. This is nice because it lets the users decide whether they want to bother or not, they can avoid sending multiple copies of the same bug report.

The mailto: link opens up the user's email program, filling in the Subject and Body fields like this:

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

The user can add any additional information they like, and then send the message.

Previous Page

Next Page