ResizeObserver - перевищено обмеження циклу

Близько двох місяців тому ми почали використовувати Rollbar, щоб повідомляти нас про різні помилки в нашому веб-додатку. З тих пір ми періодично отримуємо помилку:

ResizeObserver loop limit exceeded

Мене бентежить у цьому те, що ми не використовуємо, ResizeObserverі я дослідив єдиний плагін, який, на мою думку, міг бути винуватцем, а саме:

Змінити розмір Аурелії

Але, схоже, він не використовує ResizeObserverжодного.

Що також бентежить, так це те, що ці повідомлення про помилки з’являються з січня, але ResizeObserverпідтримка Chrome 65 була додана нещодавно.

Версії браузера, які спричинили цю помилку:

• Chrome: 63.0.3239 (перевищено обмеження циклу ResizeObserver)
• Chrome: 64.0.3282 (перевищено обмеження циклу ResizeObserver)
• Край: 14.14393 (Помилка безпеки)
• Край: 15.15063 (SecurityError)

Тож мені було цікаво, чи це може бути помилка браузера? Або, можливо, помилка, яка насправді не має нічого спільного ResizeObserver?

Ви можете спокійно ігнорувати цю помилку.

Один із авторів специфікації написав у коментарі на ваше запитання, але це не відповідь і не зрозуміло в коментарі, що відповідь насправді є найважливішою у цій темі, і та, завдяки якій мені було зручно її ігнорувати наші журнали Sentry.

Ця помилка означає, що ResizeObserver не зміг доставити всі спостереження за один кадр анімації. Це доброякісно (ваш сайт не зламається). - Олександр Тотіч 15 квітня о 3:14

У сховищі специфікацій до цього також є деякі пов’язані проблеми .

Це давнє запитання, але воно все одно може бути корисним для когось. Ви можете уникнути цієї помилки, обернувши зворотній дзвінок requestAnimationFrame. Наприклад:

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

Якщо ви використовуєте Cypress, і ця проблема виникає, ви можете спокійно проігнорувати його в Cypress, використовуючи наступний код у support / index.js або 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
    }
})

Ви можете слідкувати за обговоренням тут . Оскільки сам розробник Cypress пропонував це рішення, то я вважаю, що це було б безпечно зробити.

У нас була така сама проблема. Ми виявили, що винуватцем є розширення хрому. Зокрема, розширення хрому ткацького верстата спричиняло помилку (або деяку взаємодію нашого коду з розширенням ткацького верстата). Коли ми вимкнули розширення, наш додаток працював.

Я б порекомендував вимкнути певні розширення / аддони, щоб перевірити, чи не сприяє помилці одне з них.

Для користувачів Mocha:

Фрагмент нижче перекриває вікно window.onerror mocha встановлюється і перетворює помилки на попередження. 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);
    }
  }
});

не впевнений, що є кращий спосіб ..

додати розмов як

новий ResizeObserver (_. debounce (entries => {}, 200);

виправила цю помилку для мене