Catch/report browser errors (both JavaScript and network)

[docuracy]

Report all JavaScript errors to a new server API (POST with csrf).

Something like this, perhaps, but with modal alerts:

// service-worker.js
self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    if (url.hostname === 'whgazetteer.example.com') {
        event.respondWith(
            fetch(event.request).then(response => {
                if (!response.ok) {
                    handleError(response);
                }
                return response;
            }).catch(error => {
                console.error('Fetch failed:', error);
                throw error;
            })
        );
    } else {
        // Allow all other requests to proceed without custom handling
        return;
    }
});

function handleError(response) {
    switch (response.status) {
        case 404:
            console.error('Error 404: Resource not found -', response.url);
            break;
        case 500:
            console.error('Error 500: Internal server error -', response.url);
            break;
        default:
            console.error('Error', response.status, 'on', response.url);
    }
}

and:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(error) {
        console.log('ServiceWorker registration failed: ', error);
    });
}

This should catch errors on all network requests, including those initiated by jQuery's $.ajax, $.get, $.post, and also Fetch API calls.