history.pushState() error

[PoorBillyPilgrim]

After adding gallery navigation, an error code appeared in the console.

In Firefox 83: Uncaught DOMException: The operation is insecure. Too many calls to Location or History APIs within a short timeframe.

In Safari 13.1.1: SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds

Performance takes a massive hit once you start moving past those errors.

I might be able to fix by debouncing when history.pushState() fires. Say, fire only after if $('.left'), $('.right'), and $('.art-crawl-item')` are not clicked in such quick succession. The trick will be figuring out what constitutes 'too many clicks in succession.'

[PoorBillyPilgrim]

Check out these threads for context:
https://discourse.elm-lang.org/t/runtime-error-due-to-browser-rate-limiting/2802
remix-run/react-router#3441
https://bugs.webkit.org/show_bug.cgi?id=156115
ampproject/amphtml#17969
http://jdurand.com/blog/2016/05/03/ember-history-pushstate-dom-exception-18/
remix-run/history#291
liferay/senna.js#233

[PoorBillyPilgrim]

Just realized that the current build at art-crawl-herokuapp.com does not have this problem, even if I attempt to replicate this issue. It is possible this problem comes from calling changeImage() or handleGallery().

[PoorBillyPilgrim]

After testing current commit b920cad970de488d6f467808f72d106e9c9f5b72, it is clear that the issue lies with handleGallery() and not renderMetadata(). I selected several images in the grid - which call renderMetadata and the error did not occur. However, even after only a few clicks which fire handleGallery the error occurred. In fact, the error seems to have been fired 68 times over the span of less than 10 clicks. It seems then that handleGallery is firing history.pushState() way more times than what is apparent.

[PoorBillyPilgrim]

I think this is the problem:

    function changeImage(id) {
        dataAttributes = getDataAttributes($(id));
        img = $(id).find('img').attr('src').replace('thumbnails', 'artcrawl');
        $('#metadata.active').css('opacity', 0);
    
        setTimeout(function () {
            $('#metadata-img').attr('src', img);
            let loadedImg = document.querySelector('#metadata-img');
            loadedImg.addEventListener('load', function(event) {
                 $('#metadata.active').css('opacity', 1);
                 renderMetadataImg($('#metadata-caption'), dataAttributes);
            });
            gridItemID = $('.art-crawl-item.highlight').attr('id');
            let username = $('.art-crawl-item.highlight').attr('data-username');
            history.pushState({'item_id': gridItemID}, 'Art Crawl', '#username=' + username + '&id=' + gridItemID);
            handleGallery(window.location.hash.substr(1));
        }, 550);
    }
    
    function handleGallery(hash) {
        let params = getHashParams(hash);
        let lastGridItem = document.querySelector('#grid').children.length - 2;
        let gallery = parseInt(params.id);
        $('.left').click(function() {
            let highlights = Array.from(document.querySelectorAll('.highlight'));
            for (let highlight of highlights) {
                highlight.classList.remove('highlight');
            }
            gallery -= 1;
            if (gallery < 0) {
                gallery = lastGridItem;
            }
            changeImage('#' + gallery);
            $('#' + gallery).addClass('highlight');
        });
    
        $('.right').click(function() {
            let highlights = Array.from(document.querySelectorAll('.highlight'));
            for (let highlight of highlights) {
                highlight.classList.remove('highlight');
            }
            gallery += 1;
            if (gallery > lastGridItem) {
                gallery = 0;
            }
            changeImage('#' + gallery);
            $('#' + gallery).addClass('highlight');
        }); 
    }

handleGallery() and changeImage() are fired inside each other. This is likely causing a recursive issue.

[PoorBillyPilgrim]

Resolved by removing the redundant firing.