ResizeObserver - limite de boucle dépassée

Question

Il y a environ deux mois, nous avons commencé à utiliser Rollbar pour nous signaler diverses erreurs dans notre application Web. Depuis lors, nous recevons des erreurs occasionnelles :

ResizeObserver loop limit exceeded

Ce qui me perturbe dans tout ça, c'est que nous n'utilisons pas ResizeObserver et j'ai enquêté sur le seul plugin que je pensais pouvoir être le coupable, à savoir :

Aurélia Redimensionner

Mais il ne semble pas utiliser ResizeObserver soit.

Ce qui est également déroutant, c'est que ces messages d'erreur apparaissent depuis janvier, mais ResizeObserver La prise en charge n'a été ajoutée que récemment à Chrome 65.

Les versions du navigateur qui nous ont donné cette erreur sont les suivantes :

• Chrome : 63.0.3239 (limite de la boucle ResizeObserver dépassée)
• Chrome : 64.0.3282 (limite de la boucle ResizeObserver dépassée)
• Bord : 14.14393 (SecurityError)
• Bord : 15.15063 (SecurityError)

Je me demandais donc si cela pouvait être un bug du navigateur ? Ou peut-être une erreur qui n'a en réalité rien à voir avec ResizeObserver ?

Answer 1

Vous pouvez ignorer cette erreur sans risque.

L'un des auteurs de la spécification a répondu à votre question dans un commentaire, mais il ne s'agit pas d'une réponse et il n'est pas clair dans le commentaire que la réponse est vraiment la plus importante dans ce fil de discussion, et celle qui m'a permis de ne pas l'ignorer dans nos journaux Sentry.

Cette erreur signifie que ResizeObserver n'a pas été en mesure de fournir toutes les observations dans un seul cadre d'animation. Elle est bénigne (votre site ne sera pas interrompu). - Aleksandar Totic 15 avril à 3:14

Il y a aussi des problèmes liés à ce sujet dans le référentiel de spécifications.

Answer 2

C'est une vieille question, mais elle pourrait être utile à quelqu'un. Vous pouvez éviter cette erreur en enveloppant la fonction de rappel dans un fichier requestAnimationFrame . Par exemple :

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

Answer 3

Si vous utilisez Cypress et que vous rencontrez ce problème, vous pouvez l'ignorer en toute sécurité dans Cypress avec le code suivant dans support/index.js ou 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
    }
})

Vous pouvez suivre la discussion à ce sujet ici . Comme le mainteneur de Cypress a lui-même proposé cette solution, je pense qu'il serait prudent de le faire.

Answer 4

Nous avons eu le même problème. Nous avons découvert qu'une extension de chrome était le coupable. Plus précisément, l'extension chrome loom était à l'origine de l'erreur (ou une interaction de notre code avec l'extension loom). Lorsque nous avons désactivé l'extension, notre application a fonctionné.

Je vous recommande de désactiver certaines extensions/addons pour voir si l'une d'entre elles ne contribue pas à l'erreur.

Answer 5

Pour les utilisateurs de Mocha :

Le snippet ci-dessous remplace le crochet window.onerror que mocha installe et transforme les erreurs en avertissement. 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);
    }
  }
});

Je ne suis pas sûr qu'il y ait un meilleur moyen