apex:actionSupport swallowing JavaScript errors

Question

I ran into a issue when using apex:actionSupport that was swallowing JavaScript errors.

Snippet from page:

<apex:inputField value="{!controllerOli.CustomFieldStartDate__c}" id="start_date" required="true" >
    <apex:actionSupport event="onchange"                                                
        action="{!updateStartDate}"
        rerender="fooOutputPanel"
        oncomplete="setupValidation()"
        status="statusStart">
    </apex:actionSupport>
</apex:inputField>
<apex:actionStatus startText="applying value..." id="statusStart"/>

// The rendered property will only render this outputpanel via ajax. Not on initial page load
<apex:outputPanel id="fooOutputPanel" rendered="{! someControllerProperty }">
    <script>

        // Note: the ready function will never occur with ajax rendering
        //$j(document).ready(function() {
        //    console.log('jquery ready');
        //    setupValidation();
        //});

        function setupValidation() {
            console.log('DEBUG - Validating.');
            // This example exception won't appear in the Chrome JavaScript console
            // Runtime exceptions, i.e. method doesn't exist, are also swallowed.
            throw 'bang';
            console.log('DEBUG - Unreachable.');
        }

    </script>
</apex:outputPanel>

I'd expect to see some indication of the JavaScript exception in the Chrome Console. Instead the oncomplete JavaScript method is called, the first log message is recorded, and then nothing.

Right now I've reverted to wrapping my custom JavaScript in a try/catch and writing the exception to the console.

Is there a better way to handle exceptions with an apex:actionSupport?

---

I manually called the same JavaScript method via the console and was able to see the exception.

Answer 1

This isn't much better than your logging solution from an end users point of view, but if for some reason you absolutely need to have a JavaScript Error generated you could wrap your callback in a setTimeout.

<apex:actionSupport event="onchange"                                                
    action="{!updateStartDate}"
    rerender="fooOutputPanel"
    oncomplete="setTimeout('setupValidation()',100)"
    status="statusStart">
</apex:actionSupport>

Behind the scenes the oncomplete callback will only schedule the setupValidation() for future execution and then it will complete. Because the future execution will be outside of the swallowing parent context that you observed, the Error will not get swallowed. However, the stacktrace will not preserved either, although I'm not sure how useful that would be anyway. In chrome you'll get:

Uncaught Error: bang
setupValidation
(anonymous function)