ResizeObserver: se superó el límite de bucle
Hace aproximadamente dos meses comenzamos a utilizar Rollbar para notificarnos de varios errores en nuestra aplicación web. Desde entonces hemos recibido algún error ocasional:
ResizeObserver loop limit exceeded
Lo que me confunde de esto es que no lo estamos usando ResizeObservery he investigado el único complemento que pensé que podría ser el culpable, a saber:
Aurelia Cambiar tamaño
Pero tampoco parece estar consumiendo ResizeObserver.
Lo que también es confuso es que estos mensajes de error han estado apareciendo desde enero, pero ResizeObserverrecientemente se agregó soporte a Chrome 65.
Las versiones de navegador que nos han estado dando este error son:
- Chrome: 63.0.3239 (se superó el límite de bucle de ResizeObserver)
- Chrome: 64.0.3282 (se superó el límite de bucle de ResizeObserver)
- Borde: 14.14393 (Error de seguridad)
- Borde: 15.15063 (Error de seguridad)
Entonces me preguntaba si esto podría ser un error del navegador. ¿O tal vez un error que en realidad no tiene nada que ver ResizeObserver?
Puede ignorar este error con seguridad.
Uno de los autores de la especificación escribió en un comentario a su pregunta, pero no es una respuesta y no está claro en el comentario si la respuesta es realmente la más importante en este hilo, y la que me hizo sentir cómodo al ignorarla en nuestros registros Sentry.
Este error significa que ResizeObserver no pudo entregar todas las observaciones dentro de un solo cuadro de animación. Es benigno (su sitio no se romperá). – Aleksandar Totic 15 de abril a las 3:14
También hay algunos problemas relacionados con esto en el repositorio de especificaciones.
Es una pregunta antigua, pero aún podría resultar útil para alguien. Puede evitar este error envolviendo la devolución de llamada en formato requestAnimationFrame. Por ejemplo:
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
});
});
Si está utilizando Cypress y este problema surge, puede ignorarlo de forma segura en Cypress con el siguiente código en support/index.js o 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
}
})Puedes seguir la discusión al respecto aquí . Como los propios mantenedores de Cypress propusieron esta solución, creo que sería seguro hacerlo.
Tuvimos este mismo problema. Descubrimos que una extensión de Chrome era la culpable. Específicamente, la extensión de Loom Chrome estaba causando el error (o alguna interacción de nuestro código con la extensión de Loom). Cuando desactivamos la extensión, nuestra aplicación funcionó.
Recomendaría deshabilitar ciertas extensiones/complementos para ver si alguno de ellos podría estar contribuyendo al error.
