ResizeObserver-루프 제한 초과

약 두 달 전에 우리는 웹 앱의 다양한 오류를 알리기 위해 Rollbar를 사용하기 시작했습니다. 그 이후로 가끔 오류가 발생했습니다.

ResizeObserver loop limit exceeded

이것에 대해 저를 혼란스럽게하는 것은 우리가 사용하지 않고 ResizeObserver있고 제가 범인이 될 수 있다고 생각했던 유일한 플러그인을 조사 했다는 것입니다 .

Aurelia 크기 조정

그러나 ResizeObserver어느 쪽 도 사용하지 않는 것 같습니다 .

또한 혼란스러운 점은 이러한 오류 메시지가 1 월부터 발생했지만 ResizeObserverChrome 65에 최근에야 지원이 추가되었다는 것입니다.

이 오류가 발생한 브라우저 버전은 다음과 같습니다.

• Chrome : 63.0.3239 (ResizeObserver 루프 제한 초과)
• Chrome : 64.0.3282 (ResizeObserver 루프 제한 초과)
• Edge : 14.14393 (SecurityError)
• Edge : 15.15063 (SecurityError)

그래서 이것이 브라우저 버그 일 수 있는지 궁금합니다. 아니면 실제로 관련이없는 오류 ResizeObserver일까요?

이 오류는 무시해도됩니다.

사양 작성자 중 한 명이 귀하의 질문에 대한 의견을 작성했지만 답변이 아니며 답변이이 스레드에서 정말로 가장 중요한 답변이며 제가 그것을 무시하기 편하게 만든 답변이라는 것이 의견에 명확하지 않습니다. 센트리 로그.

이 오류는 ResizeObserver가 단일 애니메이션 프레임 내에서 모든 관찰을 제공 할 수 없음을 의미합니다. 무해합니다 (사이트가 중단되지 않음). – Aleksandar Totic 4 월 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를 사용 중이고이 문제가 발생하는 경우 support / index.js 또는 commands.ts의 다음 코드를 사용하여 Cypress에서 안전하게 무시할 수 있습니다.

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 관리자가 직접이 솔루션을 제안 했으므로 그렇게하는 것이 안전하다고 생각합니다.

우리는 이와 같은 문제가있었습니다. 우리는 크롬 확장이 범인이라는 것을 발견했습니다. 특히, loom chrome 확장으로 인해 오류가 발생했습니다 (또는 loom 확장과 우리 코드의 일부 상호 작용). 확장 프로그램을 비활성화하면 앱이 작동했습니다.

특정 확장 / 애드온을 비활성화하여 그중 하나가 오류에 기여하는지 확인하는 것이 좋습니다.

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

더 나은 방법이 있는지 모르겠습니다 ..

디 바운스 추가

new ResizeObserver (_. debounce (entries => {}, 200);

나를 위해이 오류를 수정했습니다.