The JavaScript onerror Event | Ajax for Web Application Developers

JavaScript has quite a few built-in events that handle various situations. One that can help quite a bit when debugging our web applications is the onerror event. Using the onerror event allows us to capture all the JavaScript errors that happen during runtime. This event returns three parameters that can be manipulated in any custom callback function that we define. The three parameters are the error message that was received, the URL of the file with the issue, and the line number in the file that is causing the error. For the most part, this event is useful but it can be quite vague at times, making sense only to someone who is intimately familiar with the code that is throwing the error.

In order to set up the onerror event, we must create a callback method to which the event will point. This callback method accepts the three parameters I mentioned previously.

function errorHandler(message, url, line) {     // Add custom error handling     // return a true or false value; } onerror = errorHandler;

The errorHandler method should return true or false, depending on whether we want to display the browser's standard error message. If we return true, the browser does not display its standard error message and vice versa. Obviously, using false would be somewhat redundant, unless we wanted to handle the error message in two ways. In order to display our own custom error-handling message, we could do something similar to the following example:

<html> <head> <script type="text/javascript"> function errorHandler(message, url, line) {     var errorMessage = "Error: "+ message +"\n";     errorMessage += "URL: "+ url +"\n";     errorMessage += "Line Number: "+ line +"\n";     alert(errorMessage);     return true; } onerror = errorHandler; function invokeError() {     allllert("Hello World!"); } </script> </head> <body>     <input type="button" value="View Error" onclick="invokeError();" /> </body> </html>

This example provides a button to invoke an error because the alert function within the invokeError method is not written properly. After the error occurs, the onerror event will fire the callback method and pass it the three parameters regarding the error. The callback method that we create, called errorHandler, will concatenate a string version of the error and present an alert to the user. In Chapter 16, "The Observer Pattern," we will create a more sophisticated version of this method that will send an email to us (as the developers) with a hyperlink to the file that contains the error. For the time being, we can see that this method of error handling can be useful for debugging because it can present us with a bit more detail than some of the built-in error handling that browsers provide. Of course, when we begin to discuss installing extensions, this will all change, but this method is still a viable solution to debugging our applications.