JavaScript中停止抛出错误的最佳方法是什么"ResizeObserver loop limit exceeded"避免超过哨兵配额？

Question

在我的ReactJs web应用程序上，我得到了"ResizeObserver循环限制超出"；页面上的错误，特别是我使用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包装代码的解决方案。但我不知道该如何归还。

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

您的主要问题是

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

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

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

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

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

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

Answer 2

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

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