ResizeObserver - लूप सीमा पार हो गई

Question 1

लगभग दो महीने पहले हमने अपने वेब ऐप में विभिन्न त्रुटियों की सूचना देने के लिए रोलबार का उपयोग करना शुरू किया। तब से हमें कभी-कभार त्रुटि मिलती रही है:

ResizeObserver loop limit exceeded

इस बारे में मुझे भ्रमित करने वाली बात यह है कि हम इसका उपयोग नहीं कर रहे हैं ResizeObserverऔर मैंने एकमात्र प्लगइन की जांच की है जो मुझे लगा कि संभवतः अपराधी हो सकता है, अर्थात्:

औरेलिया आकार

लेकिन यह ResizeObserverया तो उपयोग करने के लिए प्रकट नहीं होता है ।

यह भी भ्रामक है कि ये त्रुटि संदेश जनवरी से घट रहे हैं, लेकिन ResizeObserverसमर्थन केवल हाल ही में क्रोम 65 में जोड़ा गया है।

ब्राउज़र संस्करण जो हमें यह त्रुटि दे रहे हैं:

Chrome: 63.0.3239 (ResizeObserver लूप सीमा पार हो गई)
Chrome: 64.0.3282 (ResizeObserver लूप सीमा पार हो गई)
बढ़त: 14.14393 (सुरक्षा सुरक्षा)
बढ़त: 15.15063 (सुरक्षा सुरक्षा)

तो मैं सोच रहा था कि क्या यह संभवतः ब्राउज़र बग हो सकता है? या शायद एक त्रुटि जो वास्तव में कुछ भी नहीं है ResizeObserver?

Question 2

आप इस त्रुटि को सुरक्षित रूप से अनदेखा कर सकते हैं।

आपके विवरण के लिए एक विशिष्ट लेखक ने एक टिप्पणी लिखी है, लेकिन यह उत्तर नहीं है और टिप्पणी में यह स्पष्ट नहीं है कि उत्तर वास्तव में इस धागे में सबसे महत्वपूर्ण है, और जिसने मुझे इसे अनदेखा करने के लिए सहज बनाया है हमारे संतरी लॉग।

इस त्रुटि का मतलब है कि ResizeObserver एक एनीमेशन फ्रेम के भीतर सभी टिप्पणियों को वितरित करने में सक्षम नहीं था। यह सौम्य है (आपकी साइट नहीं टूटेगी)। - अलेक्जेंडर टोटिक 15 अप्रैल को 3:14 पर

विनिर्देश रिपॉजिटरी में इससे संबंधित कुछ मुद्दे भी हैं ।

Question 3

यह एक पुराना सवाल है, लेकिन यह अभी भी किसी के लिए उपयोगी हो सकता है। आप कॉलबैक को लपेटकर इस त्रुटि से बच सकते हैं 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
   });
});

Question 4

यदि आप सरू का उपयोग कर रहे हैं और यह समस्या बढ़ती जा रही है, तो आप सुरक्षित रूप से इसे समर्थन / index.js या कमांड.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
    }
})

स्निपेट का विस्तार करें

आप इसके बारे में चर्चा यहां कर सकते हैं । जैसा कि सरू के अनुचर ने स्वयं इस समाधान का प्रस्ताव दिया था, इसलिए मेरा मानना है कि ऐसा करना सुरक्षित होगा।

Question 5

हमारा भी यही मुद्दा था। हमने पाया कि एक क्रोम एक्सटेंशन अपराधी था। विशेष रूप से, करघा क्रोम एक्सटेंशन त्रुटि पैदा कर रहा था (या करघा विस्तार के साथ हमारे कोड की कुछ बातचीत)। जब हमने एक्सटेंशन को अक्षम कर दिया, तो हमारे ऐप ने काम किया।

मैं यह देखने के लिए कि उनमें से किसी एक त्रुटि में योगदान हो सकता है, यह देखने के लिए मैं कुछ एक्सटेंशन / एडऑन को अक्षम करने की सलाह दूंगा

Question 6

मोचा उपयोगकर्ताओं के लिए:

नीचे दी गई स्निपेट window.onerror हुक मोचा स्थापित करती है और त्रुटियों को चेतावनी में बदल देती है। 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);
    }
  }
});

यकीन नहीं होता कि बेहतर तरीका है।

Question 7

जैसे बहस जोड़ें

new ResizeObserver (_। debounce (प्रविष्टियाँ => {}, 200);

मेरे लिए यह त्रुटि ठीक कर दी