ResizeObserver loop completed with undelivered notifications

[tommedema]

Describe the bug
We keep seeing thousands of these logs in our sentry bug tracker. It occurs in the window.onerror event listener:

ResizeObserver loop completed with undelivered notifications

Frameworks/Libraries used
React 16.9.0

I'm using it in a hook useResizeObserver.ts:

/**
 * Inspired by ZeeCoder/use-resize-observer (MIT licensed).
 * @see https://github.com/ZeeCoder/use-resize-observer
 * @see https://github.com/juggle/resize-observer
 */

import { useEffect, useState, useRef, useMemo, RefObject } from 'react'
import { ResizeObserver } from '@juggle/resize-observer'

interface IUseResizeObserverProps<T> {
  ref?: ((instance: T | null) => void) | RefObject<HTMLDivElement> | null | undefined,
  onResize?: (size: { width: number, height: number }) => void
}

export interface ISize {
  width?: number,
  height?: number
}

const useResizeObserver = <T>({ ref, onResize }: IUseResizeObserverProps<T> = {}) => {
  // `defaultRef` Has to be non-conditionally declared here whether or not it'll
  // be used as that's how hooks work.
  // @see https://reactjs.org/docs/hooks-rules.html#explanation
  const defaultRef = useRef(null)
  ref = ref || defaultRef

  const [size, setSize] = useState<ISize>({
    width: undefined,
    height: undefined
  })

  // Using a ref to track the previous width / height to avoid unnecessary renders
  const previous = useRef<ISize>({
    width: undefined,
    height: undefined
  })

  useEffect(() => {
    if (
      typeof ref !== 'object' ||
      ref === null ||
      !(ref.current instanceof Element)
    ) {
      return
    }

    const element = ref.current

    const resizeObserver = new ResizeObserver(entries => {
      if (!Array.isArray(entries)) {
        return
      }

      // Since we only observe the one element, we don't need to loop over the array
      if (!entries.length) {
        return
      }

      const entry = entries[0]

      // `Math.round` is in line with how CSS resolves sub-pixel values
      const newWidth = Math.round(entry.contentRect.width)
      const newHeight = Math.round(entry.contentRect.height)

      if (
        previous.current.width !== newWidth ||
        previous.current.height !== newHeight
      ) {
        const newSize = { width: newWidth, height: newHeight }
        if (onResize) {
          onResize(newSize)
        } else {
          previous.current.width = newWidth
          previous.current.height = newHeight

          setSize(newSize)
        }
      }
    })

    resizeObserver.observe(element)

    return () => {
      resizeObserver.unobserve(element)
      resizeObserver.disconnect()
    }
  }, [ref, onResize])

  return useMemo(() => ({ ref, ...size }), [ref, size])
}

export default useResizeObserver

Smartphone (please complete the following information):
E.g. one case

• Device: iPhone
• OS: iOS 13.4
• Browser: Chrome Mobile iOS
• Version: 80.0.3987

(But we also see this on Android, Windows, Linux, iOS safari)

[TremayneChrist]

Hi @tommedema this in an inbuilt feature to prevent infinite resize loops that will chrash the browser https://github.com/juggle/resize-observer/blob/master/README.md#resize-loop-detection

This happens when an observed element is resized again during a notification. This can easily happen when scrollbars appear, for example.

[tommedema]

I understand but how do you catch it so that it doesn’t show in onerror?

[TremayneChrist]

It's part of the specification to fire an error event so that the issue can be resolved, not hidden. This will also happen with the native ResizeObserver, packaged in modern browsers.

[tommedema]

I see but is there a way to avoid this error from being dispatched on the window? That’s what’s causing it to show up in sentry

…

On Tue, Apr 7, 2020 at 00:27 Tremayne Christ ***@***.***> wrote: It's part of the specification to fire an error event so that the issue can be resolved, not hidden. This will also happen with the native ResizeObserver, packaged in modern browsers. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#103 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACRAOKSZ5BUJEHBCXY22UDRLLIWFANCNFSM4MCU7BKA> .

[TremayneChrist]

No, it's designed to be dispatched this way. You are receiving the error, because there is a genuine error - a resize loop.

I'm not sure what your size hook is doing, but, I see you are rounding values and then setting the rounded value back. If this is in the same loop as the resize notification, it will cause another resize on the element, because 254.4 !== 254.

Why do you need to round values?

[tommedema]

I could remove it, but the returned value does not cause it to resize, it is a read only value that is just used to position other elements.

I am looking for a way to catch this error and silently ignore it. Perhaps the only way is to manually implement a window.onerror handler and then redispatch other error to Sentry myself?

[TremayneChrist]

Positioning other elements can cause the element you're observing to resize still. Maybe this is the case for your application? I personally think it's unwise to silence the error. Like I said before, it's happening for a reason and could be affecting your users. Something like this could be happening on certain screen sizes --> https://codesandbox.io/s/fast-shadow-9iw35

I'll close this issue though as it's a feature and not a problem with the library itself.

[tommedema]

I understand, but as mentioned I'm not changing the width of elements like you are doing in your codesandbox.

[TremayneChrist]

The sandbox was more of an example of what a user could see happening. This same issue can happen when other elements cause the observed element to resize. Also, like I said before, scrollbars appearing can also cause resize loops, if not handled correctly.

[tommedema]

Since I only need the event to fire once for each update, and not have an update cause an update, is there a way to programatically have it not "trickle down"?

I tried adding an event listener like so:

window.addEventListener('error', (e) => {
  console.log('window error')
  console.log(e)
})

to then reproduce the issue and fix it, but I cannot reproduce it (the above event never fires no matter what I try). My users are getting it though...

[TremayneChrist]

You may have to look at what users are bumping into this and see if there are any patterns between them.

• Are the screen sizes the same?
• Pages the same?
• Browsers the same?
  etc.

Then you can try to reproduce it locally.

[TremayneChrist]

If you really want to filter it out though, you can use Sentry's filtering...
https://docs.sentry.io/error-reporting/configuration/filtering/?platform=javascript