Około dwa miesiące temu zaczęliśmy używać Rollbar do powiadamiania nas o różnych błędach w naszej aplikacji internetowej. Od tamtej pory pojawia się sporadyczny błąd:
ResizeObserver loop limit exceeded
To, co mnie w tym myli, to to, że nie używamy ResizeObserver
i zbadałem jedyną wtyczkę, o której sądziłem, że może być winowajcą, a mianowicie:
Ale wydaje się, że nie używa ResizeObserver
.
Mylące jest również to, że te komunikaty o błędach pojawiają się od stycznia, ale ResizeObserver
dopiero niedawno dodano obsługę do Chrome 65.
Wersje przeglądarek, które dają nam ten błąd to:
- Chrome: 63.0.3239 (przekroczono limit pętli ResizeObserver)
- Chrome: 64.0.3282 (przekroczono limit pętli ResizeObserver)
- Edge: 14.14393 (SecurityError)
- Edge: 15.15063 (SecurityError)
Więc zastanawiałem się, czy to może być błąd przeglądarki? A może błąd, z którym właściwie nie ma nic wspólnego ResizeObserver
?
google-chrome
aurelia
microsoft-edge
rollbar
IOIIOOIO
źródło
źródło
ResizeObserver has a mechanism to avoid infinite callback loops and cyclic dependencies
. Czy ostatnio zaktualizowałeś zależność do detektora zmiany rozmiaru elementu (zależność aurelia-resize)? Wygląda na to, że aktualizacja miała miejsce w styczniu…window.ResizeObserver = undefined;
ten problem, na początku aplikacji możesz po prostu wyłączyć ResizeObserver. Nie jest najlepszym rozwiązaniem, oczywiście, ale po prostu przywraca go z powrotem do tego, co było, kiedy to działało ..Odpowiedzi:
Możesz bezpiecznie zignorować ten błąd.
Jeden z autorów specyfikacji napisał w komentarzu do twojego pytania, ale nie jest to odpowiedź i nie jest jasne w komentarzu, że odpowiedź jest naprawdę najważniejsza w tym wątku i ta, która sprawiła, że wygodnie ją zignorowałem nasze dzienniki Sentry.
W repozytorium specyfikacji jest również kilka powiązanych kwestii .
źródło
@microsoft/applicationinsights-web
którego nasz klient rejestruje błędy. Więc po prostu zignorować ten błąd poprzez utworzenie programu obsługi zdarzeń błędu przed applicationInsights i rozmowystopImmediatePropagation
ipreventDefault
To stare pytanie, ale nadal może być pomocne dla kogoś. Możesz uniknąć tego błędu, zawijając wywołanie zwrotne
requestAnimationFrame
. Na przykład: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 }); });
źródło
Jeśli używasz Cypressa i ten problem pojawia się, możesz bezpiecznie zignorować go w Cypress za pomocą następującego kodu w support / index.js lub 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 } })
Możesz śledzić dyskusję na ten temat tutaj . Ponieważ opiekun Cypressa sam zaproponował to rozwiązanie, uważam, że byłoby to bezpieczne.
źródło
Mieliśmy ten sam problem. Okazało się, że winowajcą było rozszerzenie do Chrome. W szczególności rozszerzenie loom chrome powodowało błąd (lub jakąś interakcję naszego kodu z rozszerzeniem loom). Kiedy wyłączyliśmy rozszerzenie, nasza aplikacja działała.
Zalecałbym wyłączenie niektórych rozszerzeń / dodatków, aby sprawdzić, czy któreś z nich może przyczyniać się do błędu.
źródło
Dla użytkowników mokki:
Poniższy fragment kodu zastępuje okno.onerror hook instaluje się i zamienia błędy w ostrzeżenie. 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); } } });
nie jestem pewien, czy istnieje lepszy sposób ..
źródło
dodaj odbicie jak
nowy ResizeObserver (_. debounce (wpisy => {}, 200);
naprawiłem ten błąd za mnie
źródło