We are using the intersection observer for lazy loading images. It's a stable script since some years, it has been tested against a wide range of browsers and works perfectly well, it doesn't produce any JS errors. However since recently, around a week, with no code changes applied, we do see a large amount of a specific JS error in our logs, caused by Google Bots:
Error:
Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Caused by:
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) and further similar Google Bot User Agents
The associated IP addresses have been verified, indeed they are valid Google Bots, no spoofed UA.
The error is caused on valid URLs that work flawless on all browsers tested.
According to various SO answers answers, this error usually occurs when the intersectionObserver is executed before the elements to be observed are available in the DOM. This appears to be unlikely for our situation though, as the observer is wrapped into JQuery's ready() logic. We also tried to delay the intersectionObserver for a full second, but still the same error produced by GoogleBots.
Can somebody please shed some light into this, what might be the reason/cause and if this error response might have a negative effect on SEO?
This is the associated 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
});
