通过jQuery.load（）加载错误的JS导致捕获SyntaxError

Question

I have a Javascript control that loads a page containing HTML and some Javascript needed only by that page.

Initially I operated under YAGNI /KISS assumptions and kept all the Javascript in a single large functions.js file; but now the number of pages has grown, and moreover, several of them are variations that need slightly different instantiations of the same functions.

So I would find it very useful to be able to write

 <div>...<button id="object123">Don't click me!</button>... </div>
 <script>
     $('#object123').on('click', function(){
         alert("I said not to click!");
     });
 </script>

and load it with

 // All error checking omitted for clarity
 $(divSelector).load('page-with-object-123.html');

Given that I already have checks in place for uniqueness of IDs et cetera, a problem arises if the script contains a syntax error . In that case of course execution stops, but what's more, I get an error inside jQuery (the point where the .load executes the <script> tag). So it is not immediate to track down the error to the originating HTML.

I am able to get the error (for that matter the only syntax error in my scripts is now intentional), but I'd like to catch it in order to handle it gracefully.

I have tried the obvious with try/catch

try {
    $(divSelector).load(sourceHTML);
} catch (err) {
    alert("An error occurred in " + sourceHTML);
}

but the error isn't caught. This answer would suggest it should have been, unless jQuery does something weird to the try/catch mechanism.

I have then tried using window.onerror as suggested by this other answer . In its default incarnation it works (ie I define the onerror callback globally).

At that point I tried to effect the change in the function body itself, and have the handler restored once it was no longer needed.

While it tantalizingly appeared to have worked once (possiby because I was looking at an older, global version of the code due to client caching), I can't seem to make it work.

I was careful ^{after the mandatory facepalm} to restore the handler only after the call had been really issued.

/**
 * Effect a call 
 * @param string    op*        command
 * @param dict      data       data to send
 * @param callable  callback   function to be called on success 
 * @param callable  onError    function to be called on failure
 */
function poster(op, data, callback, onError) {
    // Save handler
    var origHandler = window.onerror;
    // Install new error handler
    window.onerror = function(message, url, lineNumber) {
        alert(message + "\n" + url + "\n" + lineNumber);
        return true;
    };
    $.post(
        ajaxUrl,
        $.extend({ op: op }, data),
        function (responseText, statusText, jqXHR) {
            // Evaluate the response for server error notifications
            var todo = jqBadResponse(responseText) ? onError : callback;
            // Edit: try using onerror to watch also callbacks.
            // window.onerror = origHandler;
            todo && todo(responseText);
            // Restore error handler
            window.onerror = origHandler;
        }
    ).fail(function(jqXHR, title) { // Outer failure.
        // Restore error handler
        window.onerror = origHandler; 
        jqCheckFail(jqXHR, title); // Notify of the error
    });
}

I know what my basic problem is ... what I don't know, is where it is in this case.

Answer 1

The usual side-effect of carefully checking the requirements for posting a sensible question on Stack Overflow -- you stumble on the answer .

As I said, I used a function to load a HTML into a DIV. But now with the above function I do that differently . The actual assignment is no longer done by jQuery in .load() but by my own callback .

And jQuery will interpret the Javascript and throw a SyntaxError in the .html() call , not in the .load() call anymore. Inside the .load function, the loaded HTML code is just a string, and whatever syntax errors it contains are ignored.

It's when I tell jQuery to consider that string as HTML and place it in the DOM that the exception is thrown. This does happen while I'm inside the .post function, but it happens farther down in the scope.

I still don't quite understand why the outer try {} failed to catch it, but I'm reasonably confident this may have to do with the fact that

try (
    var a = ...*some Promise whose payload will be executed sometime in the near future*...
} catch (e) {
    // Here I catch the error and there is no error;
    // the Promise did promise the impossible, but that
    // offer hasn't been picked up yet.
}
...
// NOW finally the Promise executes and throws. But I'm no longer inside
// a try/catch block.

Indeed if I place the try/catch in a synchronous block

poster(
    'form',
    {
        code:  ...,
        id:    ...
    },
    function (responseText) {
        try {
            $('#details').html(responseText.data.html);
        } catch(e) {
            alert("GOTCHA");                
            return;
        }
        ...
    }
);

the exception is correctly caught.