AJAX error message on the ASP.NET forums

If you’ve done much ASP.NET AJAX development, you’re no doubt familiar with JavaScript alert errors similar to the one pictured above. This particular one occurs on the official ASP.NET forums in FireFox, if you try to navigate away from viewing a user profile before the Recommended Reading panels asynchronously load.

Not only is the error message of “…” completely meaningless, but it blocks your intended navigation away from the page until you’ve dismissed the alert window. Hopefully, someone at Telligent will read this, because the ASP.NET AJAX framework gives us an easy way to replace the annoying JavaScript alerts and vastly improve the usability of our applications.


Some “exceptional” code

First, we’ll need some code to throw exceptions to test with:

<asp:ScriptManager ID="sm1" runat="server" />
<asp:UpdatePanel runat="server" ID="up1">
  <ContentTemplate>
    <asp:Button runat="server" ID="Button1" 
      Text="Click Me" OnClick="Button1_OnClick" />
  </ContentTemplate>
</asp:UpdatePanel>
protected void Button1_OnClick(object sender, EventArgs e)
{
  throw new Exception("AJAX Error!");
}

This throws a server side error when Button1 makes an asynchronous callback. If Button1 is clicked, we’ll get a JavaScript alert:

Error thrown by the test code

Handling the exception

The key to custom error handling in ASP.NET AJAX is the EndRequestEventArgs class, available when handling the endRequest event. It provides information on any error conditions that have resulted and exposes a method to let the framework know that we’ve handled the errors on our own.

I’m going to add a div, to serve as our replacement error message:

<div id="Error" style="visibility: hidden;">
  <img src="close.png" onclick="CloseError()" id="CloseButton" alt="Close Button" />
  An error has occured while trying to process your request.
</div>

Next, some CSS to style the div and close button:

#Error {
  top: 0px;
  right: 0px;
  width: 125px;
  background-color: yellow;
  border: solid 1px Black;
  padding: 10px;
  font-family: Sans-Serif;
  font-size: 10pt;
  position: absolute;
  margin: 5px;
}
#CloseButton {
  float: right;
  cursor: pointer; 
}

Finally, we need to add some JavaScript to tie it all together:

Sys.Application.add_load(AppLoad);
 
function AppLoad()
{
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);
}
 
function BeginRequest(sender, args) {
  // Clear the error if it's visible from a previous request.
  if ($get('Error').style.visibility == "visible")
    CloseError();
}
 
function EndRequest(sender, args) {
  // Check to see if there's an error on this request.
  if (args.get_error() != undefined)
  {
    // If there is, show the custom error.
    $get('Error').style.visibility = "visible";
 
    // Let the framework know that the error is handled, 
    //  so it doesn't throw the JavaScript alert.
    args.set_errorHandled(true);
  }
}
 
function CloseError() {
  // Hide the error div.
  $get('Error').style.visibility = "hidden";
}

The crux of this method is EndRequestEventArgs.set_errorHandled(). This tells the AJAX framework to call off the dogs and prevents the JavaScript alert from being displayed. Now, clicking Button1 results in this:

Custom error handling example

We have complete control over the error display. No JavaScript alert!

Room for improvement

My example could certainly use some aesthetic improvement, but its usability is leaps and bounds ahead of a modal, JavaScript alert.

In actual implementation, I typically use jQuery to fade the error div in, slowly color fade to a more neutral color, and then fade it out after a moment. You could also do the same, using an AnimationExtender.

Additionally, the specific exception is provided in args.get_error().name. This should be leveraged to provide a more informative error message (perhaps, better than “…”).

The possibilities are nearly limitless. Remember that your users will eventually see these JavaScript alerts, no matter how robust your application is, even if just for timeout errors. Make sure to spend a few minutes to implement exception handling that won’t leave them scratching their heads.