UpdatePanel Exception Handling

Question

Where exceptions occur in the UpdatePanels I've implemented in the ASP.NET web app I'm building, they cause a JavaScript error on the page with some high level error output available in the alert. This is OKish for development, but as soon as the system is in Production, it's obviously no good for multiple reasons. I can surround troublesome activities with Try Catch etc to control the Javascript error but in some cases, I want to take actions on the main page etc to support the user experience.

How do I go about handling errors that occur in UpdatePanels gracefully to provide a seamless and Javascript error free implementation?

Answer 1

You can use a combination of the AsyncPostBackError event on the ScriptManager (server-side) and the EndRequest event on the PageRequestManager (client-side) to fully handle server-side errors when using the UpdatePanel.

Here are a couple resources that should help you:

Customizing Error Handling for ASP.NET UpdatePanel Controls

Error Handling Customization for ASP.NET UpdatePanel

Here's a simple example:

// Server-side
protected void ScriptManager1_AsyncPostBackError(object sender, 
    AsyncPostBackErrorEventArgs e)  {
    ScriptManager1.AsyncPostBackErrorMessage =
        "An error occurred during the request: " +
        e.Exception.Message; 
}


// Client-side
<script type="text/javascript">
  function pageLoad()  {
    Sys.WebForms.PageRequestManager.getInstance().
        add_endRequest(onEndRequest);  
  }

  function onEndRequest(sender, args)  {
    var lbl = document.getElementById("Label1");
    lbl.innerHTML = args.get_error().message;
    args.set_errorHandled(true);
  }
</script>

Answer 2

If you just want to fix the browser javascript error and display the exception message to the user, you just need to add this to your Masterpage somewhere after the form declaration:

<!-- This script must be placed after the form declaration -->
<script type="text/javascript">
    Sys.Application.add_load(AppLoad);

    function AppLoad() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
    }

    function EndRequest(sender, args) {
        // Check to see if there's an error on this request.
        if (args.get_error() != undefined) {

            var msg = args.get_error().message.replace("Sys.WebForms.PageRequestManagerServerErrorException: ", "");

            // Show the custom error. 
            // Here you can be creative and do whatever you want
            // with the exception (i.e. call a modalpopup and show 
            // a nicer error window). I will simply use 'alert'
            alert(msg);

            // Let the framework know that the error is handled, 
            //  so it doesn't throw the JavaScript alert.
            args.set_errorHandled(true);
        }
    }
</script>

You do not need to catch the OnAsyncPostBackError even unless you want to customize the message. Go to my blog post if you want more information about this.