ResizeObserver - Schleifenlimit überschritten

130

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?

IOIIOOIO
quelle
2
Komisch, wie selbst die Dokumente sagen ResizeObserver has a mechanism to avoid infinite callback loops and cyclic dependencies. Haben Sie kürzlich die Abhängigkeit vom Element-Resize-Detektor (Abhängigkeit von Aurelia-Resize) aktualisiert? Scheint, dass man im Januar ein Update hatte ..
Fred Kleuver
3
Als Problemumgehung können Sie window.ResizeObserver = undefined;zu Beginn Ihrer Anwendung den ResizeObserver einfach deaktivieren. Natürlich nicht die beste Lösung, sondern kehrt einfach zu dem zurück, was es war, als es funktionierte.
Fred Kleuver
1
Können Sie einen Repro Ihres Codes bereitstellen, und ja, ResizeObserver gibt UAs ein Out (an einem nicht festgelegten Limit), um in einer Schleife zu retten. Der Edge-Sicherheitsfehler wird völlig anders sein, da wir ResizeObserver derzeit nicht unterstützen.
Gregwhitworth
1
@IOIIOOIO Bitte fügen Sie Ihre eigene Antwort hinzu, die Ihre Entscheidung widerspiegelt.
Alexander Taran
55
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

Antworten:

206

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.

Jacob Rask
quelle
Wir hatten dieses Problem @microsoft/applicationinsights-web, weil unser Client Fehler protokolliert. Wir ignorieren diesen Fehler einfach, indem wir vor applicationInsights einen Fehlerereignishandler stopImmediatePropagationpreventDefault
einrichten
@JohnnyFun irgendwelche Gedanken darüber, wie man das auf einer Safari macht? Egal was ich bekomme nur "Skriptfehler". wenn dieses Ereignis passiert
NSjonas
29

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
   });
});
Rani
quelle
2
ist die Bedingung erforderlich? "! Array.isArray (Einträge) ||! Einträge.Länge"
Saeed Seyfi
Was meinst du?
Rani
1
Woher wusstest du das ...?
ADJenks
4

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.

jross
quelle
1
Oder checken Sie einfach im Inkognito-Modus ein. Bei den meisten Menschen ist es wahrscheinlich, dass entweder keine oder weitaus weniger Erweiterungen inkognito aktiviert sind.
Jayant Bhawal
4

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.

Khateeb321
quelle
1

hinzufügen entprellen wie

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

Dieser Fehler wurde für mich behoben

Kreja
quelle
1

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.

Jan Kretschmer
quelle