devxlogo

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

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

nd-user JavaScript bugs would be easier to debug if you had access to the end-user’s computer. Since you don’t, you can do the next best thing: get users to send you what you need to fix the problem.

When applications like the Mozilla browser crash, they launch bug-submission programs. These programs ask users if they would like to submit bug reports. If the users do, the programs ask them to enter as much information as they can about what they were doing when their programs crashed. This information, along with anything that the bug-submission programs can figure out on their own, goes to central email drops for developers and project managers to read.

This is extremely useful for developers. Since the programs are running on client machines, this is the only way to get information about bugs that the developers can’t reproduce on their development systems. They can also monitor the frequency and severity of specific bugs to decide which ones to fix first.

This 10-Minute Solution demonstrates how to enable the bug-submission function in JavaScript/AJAX programs. When an error occurs in your code, the system will pop up a window through which the user can submit error information.


How do I install a user bug-submission program in my JavaScript/AJAX applications?


Place code inside a wrapper that allows the user to submit an email containing detailed error information.

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=234Body:

ReferenceError: nonexistent_variable is not definedfun_c()@http://myserver.com/myapp/index.cgi?id=234:19fun_b()@http://myserver.com/myapp/index.cgi?id=234:14fun_a()@http://myserver.com/myapp/index.cgi?id=234:9apply(null,[object Object])@:0()@http://myserver.com/myapp/livedebug.js:106onload([object Event])@:0 @:0

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

Implementation Details

These are the functions defined in talkback.js:

  • - tb_wrap( fun ) ? This function puts the function fun inside a wrapper, which traps any exceptions and offers the user a chance to send them back to the developers. When an exception occurs, it adds the Error object to a list of exceptions and offers the user a submission link. If any further exceptions happen, it will add them to the list of exceptions and the submission link as well.
  • - tb_show_talkback_link() ? This function shows a small floating window that offers the user a chance to submit an error:

    An error has occurred in this page. To report this error, please click here:Report Error

    This window is created only the first time an exception occurs, and it stays on top of other window content. If further exceptions occur, their information is added to the existing mailto: link.

  • - tb_set_link_contents() ? Each time an exception is thrown, it is added to a list. Then, the entire list is scanned for useful information, which is then packed into a mailto: link. This link is shown the first time an exception is thrown, and stays up from then on.

Application-Level Support for JavaScript and AJAX Apps

Developers are increasingly using JavaScript and AJAX to create substantial, feature-rich applications. Thus, the need for application-level support is growing. The talkback system gathers as much information about an error as possible and provides the user with a mailto: link for submitting this information. The user, of course, can add any additional information that might help track down the bug.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist