ResizeObserver - döngü sınırı aşıldı

Yaklaşık iki ay önce, Web Uygulamamızdaki çeşitli hataları bize bildirmek için Rollbar'ı kullanmaya başladık. O zamandan beri ara sıra hata alıyoruz:

ResizeObserver loop limit exceeded

Bu konuda kafamı karıştıran şey, kullanmadığımız ResizeObserverve suçlu olabileceğini düşündüğüm tek eklentiyi araştırdım, yani:

Aurelia Yeniden Boyutlandır

Ama ResizeObserverikisini de kullanıyor görünmüyor .

Ayrıca kafa karıştırıcı olan, bu hata mesajlarının Ocak ayından beri ortaya çıkması, ancak ResizeObserverdesteğin Chrome 65'e daha yeni eklenmiş olmasıdır.

Bize bu hatayı veren tarayıcı sürümleri şunlardır:

• Chrome: 63.0.3239 (ResizeObserver döngü sınırı aşıldı)
• Chrome: 64.0.3282 (ResizeObserver döngü sınırı aşıldı)
• Edge: 14.14393 (SecurityError)
• Kenar: 15.15063 (SecurityError)

Bu yüzden bunun bir tarayıcı hatası olup olmadığını merak ediyordum. Veya belki de aslında hiçbir ilgisi olmayan bir hata ResizeObserver?

Bu hatayı güvenle göz ardı edebilirsiniz.

Şartname yazarlarından biri sorunuza bir yorum yazdı, ancak bu bir cevap değil ve cevabın gerçekten bu konudaki en önemli ve beni görmezden gelmemi sağlayan cevap olduğu yorumda net değil. Nöbetçi günlüklerimiz.

Bu hata, ResizeObserver'ın tüm gözlemleri tek bir animasyon karesi içinde sunamadığı anlamına gelir. İyi huyludur (siteniz bozulmaz). - Aleksandar Totic 3:14 de 15 Nisan

Spesifikasyon havuzunda bununla ilgili bazı sorunlar da vardır .

Bu eski bir soru ama yine de birine yardımcı olabilir. Geri aramayı içine alarak bu hatayı önleyebilirsiniz requestAnimationFrame. Örneğin:

const resizeObserver = new ResizeObserver(entries => {
   // We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
   window.requestAnimationFrame(() => {
     if (!Array.isArray(entries) || !entries.length) {
       return;
     }
     // your code
   });
});

Aynı sorunu yaşadık. Bir krom uzantısının suçlu olduğunu bulduk. Özellikle, dokuma tezgahı krom uzantısı hataya (veya kodumuzun tezgah uzantısı ile bir miktar etkileşimine) neden oluyordu. Uzantıyı devre dışı bıraktığımızda uygulamamız çalıştı.

Birinin hataya katkıda bulunup bulunmadığını görmek için belirli uzantıları / eklentileri devre dışı bırakmanızı tavsiye ederim.

Cypress kullanıyorsanız ve bu sorun ortaya çıkıyorsa, support / index.js veya commands.ts içindeki aşağıdaki kodu kullanarak Cypress'te güvenle yok sayabilirsiniz.

const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
Cypress.on('uncaught:exception', (err) => {
    /* returning false here prevents Cypress from failing the test */
    if (resizeObserverLoopErrRe.test(err.message)) {
        return false
    }
})

Bu konuda tartışmayı takip edebilirsiniz burada . Cypress geliştiricisinin kendisi bu çözümü önerdiği için, bunu yapmanın güvenli olacağına inanıyorum.

gibi iptal ekle

new ResizeObserver (_. debounce (girişler => {}, 200);

bu hatayı benim için düzeltti

Mocha kullanıcıları için:

Aşağıdaki kod parçası, window.onerror hook mocha kurulumunu geçersiz kılar ve hataları bir uyarıya dönüştürür. https://github.com/mochajs/mocha/blob/667e9a21c10649185e92b319006cea5eb8d61f31/browser-entry.js#L74

// ignore ResizeObserver loop limit exceeded
// this is ok in several scenarios according to 
// https://github.com/WICG/resize-observer/issues/38
before(() => {
  // called before any tests are run
  const e = window.onerror;
  window.onerror = function(err) {
    if(err === 'ResizeObserver loop limit exceeded') {
      console.warn('Ignored: ResizeObserver loop limit exceeded');
      return false;
    } else {
      return e(...arguments);
    }
  }
});

daha iyi bir yol olduğundan emin değilim ..