Is there a way to channel some HTTP server events into a single javascript function?

Question

I have a C# webserver which provides some html/js/css and images to a browser-based client.

I create the page dynamically using javascript, filling images and divs while receiving messages from a websocket C# server.

Sometimes, I receive a message from the websocket and I try to access a resource in the webserver which might be protected.

I have some custom http server events for this (say, 406) because otherwise the browser pops up a dialog box for digest auth login.

I was wondering whether there is a way to channel all 406 events into the same function, say

RegisterHttpEventHandler(406,myFunction);

I guess I could just wrap any request/dynamic load in try and catches, although I'd love a cleaner way of doing this.

EDIT

Here is an example of the workflow which I implemented so far, and which works fine.

// Websocket definition
var conn = new WebSocket('ws://' + addressIP);
// Websocket receiver callback

conn.onmessage = function (event) {
        // my messages are json-formatted
        var mObj = JSON.parse(event.data);
        // check if we have something nice
        if(mObj.message == "I have got a nice image for you"){
        showImageInANiceDiv(mObj.ImageUrl);
        }
    };

// Dynamic load image
function showImageInANiceDiv(imgUrl )
{
    var imgHtml = wrapUrlInErrorHandler(imgUrl);
    $("#imageBox").html(imgHtml);
}    

// function to wrap everything in an error handler
function wrapUrlInErrorHandler(Url)
{
    return '<img src="' + Url + '" onerror="errorHandler(\''+ Url +'\');"/>';
}

// function to handle errors
function errorHandler(imgUrl)
{
     console.log("this guy triggered an error : "  + imgUrl);
}




//

Answer 1

the onerror does not tell me what failed, so I have to make an XHR just to find it out. That's a minor thing

You could first try the XHR. If it fails, you know what happened, if it succeeds you can display the image from cache (see also here). And of course you also could make it call some globally-defined custom hooks for special status codes - yet you will need to call that manually, there is no pre-defined global event source.

I'd like to have something like a document.onerror handler to avoid using the wrapUrlInErrorHandler function every time I have to put an image in the page

That's impossible. The error event (MDN, MSDN) does not bubble, it fires directly and only on the <img> element. However, you could get around that ugly wrapUrlInErrorHandler if you didn't use inline event attributes, but (traditional) advanced event handling:

function showImageInANiceDiv(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    img.onerror = errorHandler; // here
    $("#imageBox").empty().append(img);
}
// function to handle errors
function errorHandler(event) {
     var img = event.srcElement; // or use the "this" keyword
     console.log("this guy triggered an "+event.type+": "  + img.src);
}