ResizeObserver - vượt quá giới hạn vòng lặp

Khoảng hai tháng trước, chúng tôi đã bắt đầu sử dụng Rollbar để thông báo về các lỗi khác nhau trong Ứng dụng web của chúng tôi. Kể từ đó, chúng tôi đã thỉnh thoảng gặp lỗi:

ResizeObserver loop limit exceeded

Điều khiến tôi bối rối về điều này là chúng tôi không sử dụng ResizeObservervà tôi đã điều tra plugin duy nhất mà tôi nghĩ có thể là thủ phạm, đó là:

Aurelia Thay đổi kích thước

Nhưng dường như nó cũng không được sử dụng ResizeObserver.

Điều cũng khó hiểu là những thông báo lỗi này đã xuất hiện từ tháng 1 nhưng ResizeObserverhỗ trợ chỉ mới được thêm vào Chrome 65 gần đây.

Các phiên bản trình duyệt đã gây cho chúng tôi lỗi này là:

• Chrome: 63.0.3239 (Đã vượt quá giới hạn vòng lặp ResizeObserver)
• Chrome: 64.0.3282 (Đã vượt quá giới hạn vòng lặp ResizeObserver)
• Cạnh: 14.14393 (SecurityError)
• Cạnh: 15.15063 (SecurityError)

Vì vậy, tôi đã tự hỏi liệu đây có thể là một lỗi trình duyệt không? Hoặc có lẽ là một lỗi thực sự không liên quan gì ResizeObserver?

Bạn có thể bỏ qua lỗi này một cách an toàn.

Một trong những tác giả đặc tả đã viết trong nhận xét cho câu hỏi của bạn nhưng đó không phải là câu trả lời và không rõ trong nhận xét rằng câu trả lời thực sự là câu trả lời quan trọng nhất trong chủ đề này và câu trả lời khiến tôi thoải mái bỏ qua nó trong nhật ký Sentry của chúng tôi.

Lỗi này có nghĩa là ResizeObserver không thể cung cấp tất cả các quan sát trong một khung hình hoạt hình. Nó là lành tính (trang web của bạn sẽ không bị vỡ). - Aleksandar Totic ngày 15 tháng 4 lúc 3:14

Cũng có một số vấn đề liên quan đến vấn đề này trong kho thông số kỹ thuật.

Đó là một câu hỏi cũ nhưng nó vẫn có thể hữu ích cho ai đó. Bạn có thể tránh lỗi này bằng cách gói lệnh gọi lại vào requestAnimationFrame. Ví dụ:

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

Chúng tôi đã có cùng một vấn đề. Chúng tôi nhận thấy rằng một tiện ích mở rộng chrome là thủ phạm. Cụ thể, tiện ích mở rộng chrome của máy dệt đã gây ra lỗi (hoặc một số tương tác của mã của chúng tôi với tiện ích mở rộng máy dệt). Khi chúng tôi tắt tiện ích mở rộng, ứng dụng của chúng tôi đã hoạt động.

Tôi khuyên bạn nên tắt một số tiện ích mở rộng / tiện ích bổ sung nhất định để xem liệu một trong số chúng có thể gây ra lỗi hay không.

Nếu bạn đang sử dụng Cypress và sự cố này xảy ra, bạn có thể bỏ qua nó một cách an toàn trong Cypress bằng mã sau trong support / index.js hoặc command.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
    }
})

Bạn có thể theo dõi cuộc thảo luận về nó ở đây . Vì chính người bảo trì Cypress đã đề xuất giải pháp này, vì vậy tôi tin rằng sẽ an toàn khi làm như vậy.

thêm trang điểm như

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

đã sửa lỗi này cho tôi

Đối với người dùng Mocha:

Đoạn mã dưới đây ghi đè cài đặt window.onerror hook mocha và biến các lỗi thành cảnh báo. 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);
    }
  }
});

không chắc có cách nào tốt hơn ..