ResizeObserver – luslimiet overschreden

Ongeveer twee maanden geleden zijn we Rollbar gaan gebruiken om ons op de hoogte te stellen van verschillende fouten in onze web-app. Sindsdien krijgen we af en toe een foutmelding:

ResizeObserver loop limit exceeded

Wat me hierover in verwarring brengt, is dat we ResizeObserverniet gebruiken en dat ik de enige plug-in heb onderzocht waarvan ik dacht dat die de boosdoener zou kunnen zijn, namelijk:

Aurelia Formaat wijzigen

Maar hij lijkt ook geen gebruik te maken van ResizeObserver.

Wat ook verwarrend is, is dat deze foutmeldingen zich sinds januari voordoen, maar dat de ondersteuning voor ResizeObserverpas onlangs is toegevoegd aan Chrome 65.

De browserversies die ons deze fout gaven zijn:

• Chrome: 63.0.3239 (ResizeObserver-luslimiet overschreden)
• Chrome: 64.0.3282 (ResizeObserver-luslimiet overschreden)
• Edge: 14.14393 (SecurityError)
• Edge: 15.15063 (SecurityError)

Dus ik vroeg me af of dit een browserbug zou kunnen zijn? Of misschien een fout die eigenlijk niets te maken heeft met ResizeObserver?

Antwoord 1, autoriteit 100%

U kunt deze fout gerust negeren.

Een van de specificatie-auteurs schreef in een opmerking op uw vraag, maar het is geen antwoord en het is niet duidelijk in de opmerking dat het antwoord echt het belangrijkste is in deze thread, en degene die me op mijn gemak stelde om negeer het in onze Sentry-logboeken.

Deze fout betekent dat ResizeObserver niet alle waarnemingen binnen één animatieframe kon leveren. Het is goedaardig (uw site zal niet kapot gaan). – Aleksandar Totic15 april om 3:14

Er zijn ook enkele gerelateerde problemenin de specificatierepository.

Antwoord 2, autoriteit 20%

Het is een oude vraag, maar het kan nog steeds nuttig zijn voor iemand. U kunt deze fout voorkomen door de callback in requestAnimationFramein te pakken.
Bijvoorbeeld:

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

Antwoord 3, autoriteit 7%

Als je Cypress gebruikt en dit probleem duikt op, kun je het veilig negeren in Cypress met de volgende code in support/index.js of commands.ts

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

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