Google Bot producing JS errors for intersectionObserver

Programming
,
1

We are seeing an increased amount of a specific JavaScript error on our website, caused by Google Bots. The error is Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. We are using an intersection observer for lazy loading images, which has been stable for a long time, and tested against a wide range of browsers. The associated IP addresses have been verified, and are indeed valid Google Bots.

The error is caused on valid URLs that work without problems on all browsers. We wrapped the observer in JQuery’s ready() logic, and also tried delaying it for one second, but still the same error is produced.

Code
// create observer

lazyIntersectionObserver = new IntersectionObserver (function 
(entries, observer) {
    entries.forEach(function(entry) {
        var lazyImage = entry.target;
        // [further code]
    });
}, {rootMargin : '400px 0px 400px 0px'});

// start observing

var allLazyImages = $('img[data-echo]');
    
allLazyImages.each(function (index, lazyImage) {
    lazyIntersectionObserver.observe(lazyImage); // error caused here, by Google Bots only
});

We are wondering what might be the reason/cause for this error, and if it might have a negative effect on SEO.

2

The reason for the error is that the observe() method of the IntersectionObserver expects an Element as its first parameter, but it is receiving something other than an Element. This error is only occurring with Google Bots.

As for the negative effect on SEO, it is unlikely to have a direct impact on SEO. However, if the error prevents the lazy loading of images, it could potentially affect the page loading speed and user experience, which indirectly can impact SEO.

To solve the issue, you can try the following:

  1. Make sure that the allLazyImages variable only contains valid DOM elements. You can use the filter() method to remove any invalid elements from the collection.
var allLazyImages = $('img[data-echo]').filter(function() {
  return this instanceof Element;
});

  1. Double-check if there are any JavaScript conflicts or errors on the page that might interfere with the IntersectionObserver functionality. You can use browser developer tools to check for any other JavaScript errors.

  2. Consider updating the IntersectionObserver library to the latest version, as there might be compatibility issues with the version you are currently using.

  3. If the issue persists, you can try using a different lazy loading library or implement a custom lazy loading solution to see if it resolves the issue.

Remember to test any changes thoroughly to ensure they work as expected.