ResizeObserver - Schleifenlimit überschritten

Vor ungefähr zwei Monaten haben wir begonnen, Rollbar zu verwenden, um uns über verschiedene Fehler in unserer Web-App zu informieren. Seitdem haben wir gelegentlich Fehler bekommen:

ResizeObserver loop limit exceeded

Das, was mich daran verwirrt, ist, dass wir es nicht verwenden ResizeObserverund ich habe das einzige Plugin untersucht, von dem ich dachte, dass es möglicherweise der Schuldige sein könnte, nämlich:

Aurelia Größe ändern

Aber es scheint auch nicht zu verwenden ResizeObserver.

Verwirrend ist auch, dass diese Fehlermeldungen seit Januar auftreten ResizeObserver, Chrome 65 jedoch erst kürzlich unterstützt wurde.

Die Browserversionen, die uns diesen Fehler gemeldet haben, sind:

• Chrome: 63.0.3239 (ResizeObserver-Schleifenlimit überschritten)
• Chrome: 64.0.3282 (Limit für ResizeObserver-Schleife überschritten)
• Edge: 14.14393 (SecurityError)
• Edge: 15.15063 (SecurityError)

Also habe ich mich gefragt, ob dies möglicherweise ein Browser-Fehler sein könnte? Oder vielleicht ein Fehler, der eigentlich nichts damit zu tun hat ResizeObserver?

Sie können diesen Fehler ignorieren.

Einer der Spezifikationsautoren hat in einem Kommentar zu Ihrer Frage geschrieben, aber es ist keine Antwort, und im Kommentar ist nicht klar, dass die Antwort wirklich die wichtigste in diesem Thread ist und die es mir leicht gemacht hat, sie zu ignorieren unsere Wachprotokolle.

Dieser Fehler bedeutet, dass ResizeObserver nicht alle Beobachtungen innerhalb eines einzelnen Animationsrahmens liefern konnte. Es ist gutartig (Ihre Website wird nicht kaputt gehen). - Aleksandar Totic 15. April um 3:14 Uhr

Es gibt auch einige verwandte Probleme im Spezifikations-Repository.

Es ist eine alte Frage, aber sie könnte dennoch für jemanden hilfreich sein. Sie können diesen Fehler vermeiden, indem Sie den Rückruf einschließen requestAnimationFrame. Zum Beispiel:

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

Wir hatten das gleiche Problem. Wir fanden heraus, dass eine Chromverlängerung der Schuldige war. Insbesondere die Webmaschinen-Chrome-Erweiterung verursachte den Fehler (oder eine Interaktion unseres Codes mit der Webmaschinen-Erweiterung). Als wir die Erweiterung deaktivierten, funktionierte unsere App.

Ich würde empfehlen, bestimmte Erweiterungen / Addons zu deaktivieren, um festzustellen, ob eine davon möglicherweise zum Fehler beiträgt.

Wenn Sie Cypress verwenden und dieses Problem auftritt, können Sie es in Cypress mit dem folgenden Code in support / index.js oder command.ts ignorieren

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

Sie können die Diskussion darüber hier verfolgen . Da der Cypress-Betreuer selbst diese Lösung vorgeschlagen hat, glaube ich, dass dies sicher ist.

hinzufügen entprellen wie

neuer ResizeObserver (_. debounce (Einträge => {}, 200);

Dieser Fehler wurde für mich behoben

Für Mokka-Benutzer:

Das folgende Snippet überschreibt das Fenster. Fehlerhaken-Mokka wird installiert und verwandelt die Fehler in eine Warnung. 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);
    }
  }
});

Ich bin mir nicht sicher, ob es einen besseren Weg gibt.