ResizeObserver-ループ制限を超えました

約2か月前に、Rollbarを使用してWebアプリのさまざまなエラーを通知し始めました。それ以来、時折エラーが発生しています。

ResizeObserver loop limit exceeded

これについて私を混乱させるのは、私たちが使用ResizeObserverしていないことであり、私が原因である可能性があると思った唯一のプラグインを調査しました。

Aureliaのサイズ変更

しかし、ResizeObserverどちらも使用していないようです。

また、これらのエラーメッセージは1月から発生していますが、Chrome65にResizeObserverサポートが追加されたのはごく最近のことです。

このエラーが発生しているブラウザのバージョンは次のとおりです。

• Chrome：63.0.3239（ResizeObserverループ制限を超えました）
• Chrome：64.0.3282（ResizeObserverループ制限を超えました）
• エッジ：14.14393（SecurityError）
• エッジ：15.15063（SecurityError）

だから私はこれがおそらくブラウザのバグである可能性があるのだろうかと思っていましたか？それとも、実際には何の関係もないエラーResizeObserverですか？

このエラーは無視してかまいません。

仕様の作成者の1人があなたの質問にコメントを書きましたが、それは答えではなく、コメントでは、答えがこのスレッドで本当に最も重要なものであり、私がそれを無視するのを快適にしたものであることが明確ではありません。セントリーログ。

このエラーは、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
   });
});

サイプレスを使用していてこの問題が発生した場合は、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
    }
})

あなたはここでそれについての議論に従うことができます。サイプレスのメンテナ自身がこの解決策を提案したので、そうしても安全だと思います。

これと同じ問題がありました。Chrome拡張機能が原因であることがわかりました。具体的には、織機のクロム拡張機能がエラー（またはコードと織機の拡張機能との相互作用）を引き起こしていました。拡張機能を無効にすると、アプリは機能しました。

特定の拡張機能/アドオンを無効にして、それらの1つがエラーの原因になっている可能性があるかどうかを確認することをお勧めします。

モカユーザーの場合：

以下のスニペットは、mochaがインストールする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);
    }
  }
});

より良い方法があるかどうかわからない。

次のようなデバウンスを追加します

new ResizeObserver（_。debounce（entries => {}、200）;

私のためにこのエラーを修正しました