ResizeObserver - ลูปเกินขีด จำกัด

ประมาณสองเดือนที่แล้วเราเริ่มใช้ Rollbar เพื่อแจ้งให้เราทราบถึงข้อผิดพลาดต่างๆใน Web App ของเรา นับตั้งแต่นั้นเป็นต้นมาเราได้รับข้อผิดพลาดเป็นครั้งคราว:

ResizeObserver loop limit exceeded

สิ่งที่ทำให้ฉันสับสนเกี่ยวกับเรื่องนี้คือเราไม่ได้ใช้งานResizeObserverและฉันได้ตรวจสอบปลั๊กอินเดียวที่ฉันคิดว่าอาจเป็นตัวการได้คือ:

Aurelia ปรับขนาด

แต่ดูเหมือนจะไม่ใช้ResizeObserverอย่างใดอย่างหนึ่ง

สิ่งที่ทำให้สับสนก็คือข้อความแสดงข้อผิดพลาดเหล่านี้เกิดขึ้นตั้งแต่เดือนมกราคม แต่ResizeObserverเพิ่งมีการเพิ่มการสนับสนุนใน Chrome 65

เวอร์ชันของเบราว์เซอร์ที่ทำให้เรามีข้อผิดพลาดนี้ ได้แก่ :

• Chrome: 63.0.3239 (เกินขีด จำกัด ของลูป ResizeObserver)
• Chrome: 64.0.3282 (เกินขีด จำกัด ของลูป ResizeObserver)
• ขอบ: 14.14393 (SecurityError)
• ขอบ: 15.15063 (SecurityError)

ดังนั้นฉันจึงสงสัยว่านี่อาจเป็นข้อบกพร่องของเบราว์เซอร์หรือไม่? หรืออาจเป็นข้อผิดพลาดที่ไม่เกี่ยวข้องกับResizeObserverอะไร?

คุณสามารถเพิกเฉยต่อข้อผิดพลาดนี้ได้อย่างปลอดภัย

ผู้เขียนข้อกำหนดรายหนึ่งเขียนในความคิดเห็นสำหรับคำถามของคุณ แต่ไม่ใช่คำตอบและไม่ชัดเจนในความคิดเห็นว่าคำตอบนั้นสำคัญที่สุดในชุดข้อความนี้และเป็นคำตอบที่ทำให้ฉันสบายใจที่จะเพิกเฉยต่อคำถามนี้ บันทึกยามของเรา

ข้อผิดพลาดนี้หมายความว่า ResizeObserver ไม่สามารถส่งการสังเกตการณ์ทั้งหมดภายในเฟรมภาพเคลื่อนไหวเดียว ไม่เป็นพิษเป็นภัย (ไซต์ของคุณจะไม่พัง) - Aleksandar Totic 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 เองเสนอวิธีแก้ปัญหานี้ดังนั้นฉันเชื่อว่าจะปลอดภัยที่จะทำเช่นนั้น

เรามีปัญหาเดียวกันนี้ เราพบว่าส่วนขยายของโครเมี่ยมเป็นตัวการ โดยเฉพาะอย่างยิ่งส่วนขยาย loom chrome ทำให้เกิดข้อผิดพลาด (หรือการโต้ตอบบางอย่างของรหัสของเรากับส่วนขยาย loom) เมื่อเราปิดการใช้งานส่วนขยายแอปของเราก็ใช้งานได้

ฉันขอแนะนำให้ปิดการใช้งานส่วนขยาย / ส่วนเสริมบางอย่างเพื่อดูว่าหนึ่งในนั้นอาจมีส่วนทำให้เกิดข้อผิดพลาดหรือไม่

สำหรับผู้ใช้ Mocha:

ข้อมูลโค้ดด้านล่างจะแทนที่ window.onerror hook 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);
    }
  }
});

ไม่แน่ใจว่ามีวิธีที่ดีกว่านี้ ..

เพิ่ม debounce เช่น

ResizeObserver ใหม่ (_. debounce (entries => {}, 200);

แก้ไขข้อผิดพลาดนี้ให้ฉัน