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


131

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?


2
Doktorların bile söylediği komik ResizeObserver has a mechanism to avoid infinite callback loops and cyclic dependencies. Yakın zamanda öğe yeniden boyutlandırma algılayıcısına (aurelia-yeniden boyutlandırma bağımlılığı) bağımlılığı güncellediniz mi? Ocak ayında bir güncelleme olmuş gibi görünüyor ..
Fred Kleuver

3
Geçici bir çözüm window.ResizeObserver = undefined;olarak, yalnızca ResizeObserver'ı devre dışı bırakmak için uygulamanızın başlangıcında yapabilirsiniz. Elbette en iyi çözüm değil, ama işe yaradığı zamanki haline geri
döndürüyor

1
Kodunuzun bir kopyasını sağlayabilir misiniz ve evet ResizeObserver, UA'lara bir döngüde kefalet için bir çıkış (belirtilmemiş bir sınırda) verir. Şu anda ResizeObserver'ı desteklemediğimiz için Edge Güvenlik Hatası tamamen farklı olacak.
gregwhitworth

1
@IOIIOOIO lütfen kararınızı yansıtan kendi yanıtınızı eklemeyi düşünün.
Alexander Taran

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

Yanıtlar:


208

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 sorunu, @microsoft/applicationinsights-webistemcimizin hata günlüğe kaydettiği kaynakta yaşadık . Bu nedenle, applicationInsights ve stopImmediatePropagationpreventDefault
call'dan

@JohnnyFun, bunu safaride nasıl yapacağına dair herhangi bir fikrin var mı? Ne olursa olsun sadece "komut dosyası hatası" alıyorum. bu olay gerçekleştiğinde
NSjonas

29

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
   });
});

2
koşul gerekli mi? "! Array.isArray (girişler) ||! Entry.length"
Saeed Seyfi

Ne demek istiyorsun?
Rani

1
Bunu yapmayı nasıl bildin ...?
ADJenks

4

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.


1
Veya sadece gizli modda kontrol edin. Çoğu kişi, büyük olasılıkla ya hiç uzantıya sahip değildir ya da gizli modda etkinleştirilmiş çok daha az uzantıya sahiptir.
Jayant Bhawal

4

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.


1

gibi iptal ekle

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

bu hatayı benim için düzeltti


1

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 ..

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.