Add connection failure handling to examples

[keaton-forrest]

Feature request:

Since htmx heavily relies on client/server interaction, I think that adding an example of how to handle client connection failures would be something that adds value to the project.

It looks like the event that gets emitted for this is: htmx:sendError

Would this be done by listening for this event and then triggering some state in the application like an overlay with a message?

Bonus: Polling the server for connectivity (sending the last failed request) and then removing the connection failure overlay would be useful for a user to know when the app is working again.

[keaton-forrest]

I put together this script for the client side, but I could use some help making it more idiomatic for htmx:

function init() {

    const modal = document.getElementById('connection-error');

    let polling = false;

    // Handle connection error events where the client can't connect to the server
    document.addEventListener('htmx:sendError', function(x) {

        if (polling) return;

        polling = true;

        console.log(x); // What does this event look like?

        // Adding this class will make the modal visible and prevent the user from interacting with the page
        modal.classList.add('htmx-request');

        // Keep checking the server for a connection
        const id = setInterval(() => {
            fetch('/ping')
                .then(response => {
                    if (response.status === 200) {
                        polling = false;
                        clearInterval(id);
                        modal.classList.remove('htmx-request');
                    }
                })
                .catch(err => console.error(err));
        }, 1000);
    });
}

init();