রেজাইজঅবার্সার - লুপের সীমা অতিক্রম করে

Question 1

প্রায় দুই মাস আগে আমরা আমাদের ওয়েব অ্যাপ্লিকেশনটিতে বিভিন্ন ত্রুটি সম্পর্কে আমাদের অবহিত করতে রোলবার ব্যবহার শুরু করি। তখন থেকেই আমরা মাঝে মাঝে ত্রুটি পেয়ে যাচ্ছি:

ResizeObserver loop limit exceeded

আমাকে যে বিষয়টি সম্পর্কে বিভ্রান্ত করে তা হ'ল আমরা ব্যবহার করছি না ResizeObserverএবং আমি একমাত্র প্লাগইন অনুসন্ধান করেছি যা আমি ভেবেছিলাম সম্ভবত অপরাধী হতে পারে, যথা:

অরেলিয়া পুনরায় আকার দিন

তবে এটি ব্যবহার করছে বলে মনে ResizeObserverহয় না।

এছাড়াও বিভ্রান্তকর বিষয় হ'ল এই ত্রুটি বার্তাগুলি জানুয়ারীর পর থেকে ResizeObserverঘটছে তবে ক্রম 65 এ কেবল সমর্থন যোগ করা হয়েছে।

ব্রাউজার সংস্করণগুলি যা আমাদের এই ত্রুটিটি দিচ্ছে তা হ'ল:

ক্রোম: .0৩.০.৩৩৯৯ (রিসাইজঅবার্সার লুপের সীমা অতিক্রম করেছে)
ক্রোম: .0৪.০.৩২২২ (রিসাইজবার্সার লুপের সীমা অতিক্রম করেছে)
প্রান্ত: 14.14393 (সিকিউরিটিআরার)
প্রান্ত: 15.15063 (সিকিউরিটিআরার)

তাই আমি ভাবছিলাম যে এটি সম্ভবত ব্রাউজার বাগ হতে পারে? অথবা সম্ভবত এমন কোনও ত্রুটি যার সাথে আসলে কিছুই করার নেই ResizeObserver?

Question 2

আপনি এই ত্রুটিটি নিরাপদে উপেক্ষা করতে পারেন।

একটি স্পেসিফিকেশন লেখক আপনার প্রশ্নের মন্তব্যে লিখেছিলেন তবে এটি কোনও উত্তর নয় এবং মন্তব্যে এটি পরিষ্কার নয় যে উত্তরটি এই থ্রেডের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং এটিই যে আমাকে এড়ানোতে স্বাচ্ছন্দ্যবোধ করেছিল one আমাদের সেন্ট্রি লগস

এই ত্রুটির অর্থ এই যে রেজাইজঅবার্সার একক অ্যানিমেশন ফ্রেমের মধ্যে সমস্ত পর্যবেক্ষণ সরবরাহ করতে সক্ষম হয়নি। এটি সৌম্য (আপনার সাইটটি ভাঙবে না)। - আলেকসন্দর টোটিক এপ্রিল 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

আমরা এই একই সমস্যা ছিল। আমরা দেখতে পেয়েছি যে ক্রোম এক্সটেনশানটি অপরাধী ছিল। বিশেষত, তাঁত ক্রোম এক্সটেনশনের ফলে ত্রুটি ঘটছিল (বা তাঁত এক্সটেনশন সহ আমাদের কোডের কিছু মিথস্ক্রিয়া)। আমরা যখন এক্সটেনশনটি অক্ষম করি তখন আমাদের অ্যাপ্লিকেশন কাজ করে।

তাদের মধ্যে কেউ ত্রুটিতে অবদান রাখছে কিনা তা দেখার জন্য আমি কিছু এক্সটেনশন / অ্যাডনগুলি অক্ষম করার পরামর্শ দেব।

Question 5

আপনি যদি সাইপ্রাস ব্যবহার করছেন এবং এই সমস্যাটি ঝাপটায় তবে আপনি সাইপ্রেসে এটি নিরাপদে / ইনডেক্স.জেএস বা কমান্ড.এসটি নিম্নলিখিত কোড সহ উপেক্ষা করতে পারেন 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 6

মত অভিযোজন যোগ করুন

নতুন রেজাইজঅবার্সার (_। প্রবর্তন (এন্ট্রি => {}, 200);

আমার জন্য এই ত্রুটি স্থির

Question 7

মোচা ব্যবহারকারীদের জন্য:

নীচের স্নিপেটটি উইন্ডোটিকে ওভাররাইড করে .অনরর হুক মোচা ইনস্টল করে ত্রুটিগুলিকে একটি সতর্কতায় রূপান্তরিত করে। 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);
    }
  }
});

আরও ভাল উপায় আছে তা নিশ্চিত না ..