相关疑难解决方法(0)

最近，我的 React 应用程序中开始出现一个新错误：

ResizeObserver loop limit exceeded

似乎普遍的共识是该错误是良性的，没有什么可担心的。

但是，当我通过 测试我的程序时，我不确定如何忽略它或让它停止显示npm start。

出现的屏幕如下所示：

有什么方法可以抑制此页面或其他地方的此特定错误，这样我就不必每次都将其忽略？

该错误来自我使用的MUI Masonry 组件，但我的理解是它可能来自许多依赖项。

这是我使用它的代码，以防有助于抑制此错误。

import Masonry from '@mui/lab/Masonry';
import { Box } from '@mui/material';
import { ReactNode } from 'react';
import { BsFillPlusSquareFill as AddButton } from 'react-icons/bs';
import { useNavigate } from 'react-router';
import { LoadingIndicator } from '../LoadingIndicator';
import { BackButton } from './BackButton';
import styles from './SheskaList.module.css';

export const SheskaListContent = (props: { loading: boolean, cards: ReactNode[] }) …

我目前正在使用 TestCafe 进行一些 e2e 测试。我遇到了以下错误

   1) - Error in Role initializer -
      A JavaScript error occurred on "http://localhost:3000/".
      Repeat test actions in the browser and check the console for errors.
      If you see this error, it means that the tested website caused it. You can fix it or disable tracking JavaScript errors in TestCafe. To do the latter, enable the "--skip-js-errors" option.
      If this error does not occur, please write a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".
      
      JavaScript error details:
      ResizeObserver loop …

我不敢相信以前没有人注意到这一点，但我似乎找不到任何人注意到这种行为。首先我应该说这个 html 是很久以前写的（不是我写的），目前还不能真正修改。

所以问题是这样的：

我们的 html 结构布局如下

.rptDisplay {
  overflow: auto;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 200px;
  max-height: 100vh;
  font-size: 11px;
  text-align: left;
}

.rptPositioner {
  width: 33%;
  display: block;
  transform-origin: 0px 0px;
  transform: scale(3, 3);
}

.rptHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 1;
  background: #eee;
}

body {
  margin: 0;
  padding: 0;
}

<div class="rptDisplay">
  <div class="rptPositioner">
    <div class="rptHeader">Header</div>
    <div class="row">Row</div>
    <div class="row">Row</div>
    <div class="row">Row</div>
    <div …

在我的 ReactJs Web 应用程序中，我在特别使用AntTable. 我搜索了一下，据我所知这个错误是无害的，可以忽略。而且这种情况只发生在 Chrome 中，其他浏览器不会发生。但是，对我来说，问题是我已经集成Sentry到我的应用程序中来监视和处理错误。我的大多数用户都使用 Chrome 作为浏览器，因此我的哨兵报价很快就受到限制。忽略此特定错误的最佳方法是什么？现在，我正在尝试找到一些好的解决方案，而不是if向我的代码脚本添加脏语句引发错误以检查这是否是“ResizeObserver”错误。我只是不想这样做，是否还有其他解决方案？

如果需要，我还可以分享有关我的应用程序的任何其他详细信息 - 包括代码。

这是应用程序将捕获的错误发送到的函数Sentry。

  init() {
    if (env.ENV === 'production' && !this.isInitialized) {
      this.isInitialized = true;
      Sentry.init({
        release: env.REACT_APP_VERSION,
        dsn: env.SENTRY_DSN,
        beforeSend(event) {
          const { request: { url }, exception: { values } } = event;
          if (
            url.includes('login') &&
            values[0].type === 'UnhandledRejection' &&
            values[0].value.includes('Non-Error promise rejection captured with keys')
          ) {
            return null;
          }

          return event;
        },
      });
    }
  }

我尝试应用包装代码的解决方案requestAnimationFrame …

我有菜单和汉堡按钮可以切换它，并且想测试这种行为。但是，菜单并没有完全消失，只是在隐藏时变得更薄（只有图标可见），所以我不能只测试它是否可见，因为它总是可见。

因此，我通过invoke('width')这样的方式检查尺寸：

cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.above', 200)
cy.get('[data-test="sidebar-toggle"]')
  .click()
cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.below', 100)

但我收到错误ResizeObserver loop limit exceeded，因为它在单击后不等待菜单转换完成。所以我只是添加了wait(500)之后click()，现在它可以工作了。但这不是有点黑客吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的很长的延迟，但这浪费了测试时间。

是否有任何简单的通用方法告诉 Cypress 等待我的宽度达到应有的宽度，而不是立即放弃？

编辑：我对 wait() 解决方案的看法是错误的，它并没有真正的帮助。错误可能与转换无关。无需使用已接受答案中更改的代码 -invoke有效。但是这个关于忽略错误的答案的解决方案是正确的 - 关于此错误有多个问题，并且可以安全地忽略。答案如此简短 - 只需忽略此异常即可。它可以不放在 test 中，而是放在 support/index.js 中，这样它就可以在全球范围内工作。

我正在运行一个混合 PhoneGap 应用程序（几年来，运行 Cordova Android 6.1.2，最近运行的是 9.0）；多年来，我们的 #1 javascript 错误一直显着

ResizeObserver loop limit exceeded

但是，与在 Google 上发现的有关此错误的许多其他报告相比，我的问题的主要区别在于，在我的代码中的任何位置使用了 0 个 ResizeObserver 实例。搜索我的整个计算机，唯一出现在任何地方的 ResizeObserver 实例是一个随机的 Steam 文件。在运行时查看我的应用程序，设置window.ResizeObserver = undefined不会中断/执行任何操作，并且document.resizeObservers（根据 W3C 文档）不返回任何内容。

我看过这篇文章，它似乎是这个错误的规范文章：ResizeObserver - loop limit exceeded。“此错误意味着 ResizeObserver 无法在单个动画帧内提供所有观察结果。这是良性的（您的站点不会中断）”的答案。如果我真的在使用 ResizeObserver，那对我来说就足够了。由于我没有使用它，我担心出现的这个错误表明出现了更大的错误。

不幸的是，我们用户的 Chrome 版本/区域设置/时区/Android 版本/等/等没有可辨别的模式。

我对这个 API 进行了广泛的研究，但没有发现任何可以表明我的问题的东西；要么为什么会运行某种幻影 ResizeObserver 和/或为什么该错误会出现在不使用该 API 的应用程序中。

非常感谢这里的任何帮助（即使只是一个模糊的方向）。非常感谢！

我试图在某些应用程序中通过 google 自动登录，但收到此错误消息：（未捕获的异常）错误：超过 ResizeObserver 循环限制错误以下错误源自您的应用程序代码，而不是来自 Cypress。

超出 ResizeObserver 循环限制

当赛普拉斯检测到源自您的应用程序的未捕获错误时，它将自动使当前测试失败。

此行为是可配置的，您可以选择通过侦听 uncaught:exception 事件来关闭此行为。

这是我的代码：

describe('empty spec', () => {
  it('login multi domain ', () => {
    cy.visit('/login');
    cy.get('form > .flex').click({force:true});


    cy.origin(`https://accounts.google.com`, ()=>{
        cy.get("#identifierId").type("user");
        cy.get(".VfPpkd-LgbsSe-OWXEXe-k8QpJ").click({force:true});
        cy.get(`#password`).type("pass");
        cy.get(".VfPpkd-LgbsSe-OWXEXe-k8QpJ").click({force:true});
    })
  })
})

提前致谢