reactjserror-handlingpreventdefaultresize-observer

How to stop React Overlay from appearing on a specific error

I am trying to stop ResizeObserver loop limit exceeded error from showing up on my development enviornment of my react application.

enter image description here

The error is benign

How can I get React to stop showing this in my application when in development? It does not show up in production builds.

I have tried adding this code to the top-level of my application at index.tsx:

window.addEventListener('error', event => {

    if (event.message.includes('ResizeObserver loop limit exceeded')) {
        event.preventDefault();
        event.stopPropagation();
        console.log(event.message)
    }
});

The console.log(event.message) is being executed and the error name that it outputs is correct. But the react overlay error still appears.

Solution

  • If you are using webpack, you can configure it not to show overlay on this error. To do this you can add in field: "client", which is inside field "devServer", this config:

          overlay: {
    runtimeErrors: (error) => {
      if (error.message === "ResizeObserver loop limit exceeded") {
        return false;
      }
      return true;
    },
  },

    Here's the docs about it: https://webpack.js.org/configuration/dev-server/#overlay .