javascript 中停止抛出“超出 ResizeObserver 循环限制”错误避免超过 Sentry 配额的最佳方法是什么？

Question

在我的 ReactJs web 应用程序上，我在专门使用AntTable的页面上收到“超出 ResizeObserver 循环限制”错误。 我搜索了一下，据我所知，这个错误是无害的，可以忽略。 而且它只发生在 Chrome 中，没有其他浏览器。 但是，对我来说，这里的问题是我已经将Sentry集成到我的应用程序中以监控和处理错误。 而且我的大多数用户都使用 Chrome 作为浏览器，因此我的哨兵报价如此之快。 忽略此特定错误的最佳方法是什么。 现在，我正在尝试找到一些好的解决方案，而不是在我的代码脚本中添加脏if语句以引发错误以检查这是否是最初的“ResizeObserver”错误。 如果有任何其他解决方案，我根本不想这样做？

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

这是 function ，应用程序将捕获的错误发送到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应用包装代码的解决方案。 但我不知道我应该如何归还它。

  init() {
    if (!this.isInitialized) {
      this.isInitialized = true;
      Sentry.init({
        release: env.REACT_APP_VERSION,
        dsn: env.SENTRY_DSN,
        beforeSend(event) {
          const resizeObserver = new ResizeObserver((entries) => {
            window.requestAnimationFrame(() => {
              if (!Array.isArray(entries) || !entries.length) {
                return null;
              }
              return event;
            });
          });
          resizeObserver.observe(document.getElementById('app'));
        },
      });
    }
  }

如果不是关于ResizeObserver错误，我只需要原样返回。

Answer 1

使用window.requestAnimationFrame 。 有关更多信息，请参阅此答案。 基本上：

resizeObserver = new ResizeObserver(entries => {
    window.requestAnimationFrame(() => {
        // ...your code here
    });
});

Answer 2

你的主要问题是

忽略此特定错误的最佳方法是什么。

您正在使用 Sentry，并且希望防止报告不相关的错误以不超过配额。

在这种情况下，您应该在应用程序中初始化 Sentry 时使用ignoreErrors ，如下所示：

Sentry.init({
  ignoreErrors: [
    "ResizeObserver loop limit exceeded"
  ],
  // other config options
  // ...
});

有关详细信息，请参阅 Sentry 文档： https://docs.sentry.io/platforms/javascript/configuration/filtering/#decluttering-sentry

有关节省配额的更多想法，请阅读https://blog.sentry.io/2017/03/27/tips-for-reducing-javascript-error-noise （有点旧，但大多数提示仍然适用于新的哨兵 SDK）。