在开发模式下禁用错误覆盖
有没有办法在开发模式下运行create-react-app时禁用错误覆盖？
这是我正在谈论的重叠:
我问这个是因为我在我的应用程序中使用错误边界(React 16 Error Boundaries)来显示组件崩溃时的错误消息,但错误覆盖会弹出并覆盖我的消息.
小智 31
我们不提供在开发中禁用错误覆盖的选项.错误边界不取代它们(它们用于生产用途).
同时存在开发错误覆盖和错误边界是没有害处的; [escape]如果您想查看错误边界,只需按.
我们认为错误叠加比典型的错误边界(源代码,点击打开等)提供了巨大的价值.当我们探索启用热组件重新加载作为所有用户的默认行为时,这也是至关重要的.
如果您对禁用叠加层有强烈的兴趣,则需要弹出react-scripts并停止使用webpackHotDevClient.一种侵入性较小的方法可能是删除error覆盖层安装的事件监听器window.
- 如果你是维护者，请添加一个选项来隐藏这个覆盖，这真的很烦人。每次出现时，我都需要关闭它或刷新浏览器页面才能继续我的工作。它没有提供任何有用的信息，因为我需要调试这段代码，并且我使用浏览器控制台堆栈跟踪来查找代码的错误行。 (18认同)
- 很高兴您觉得叠加层提供了巨大的价值，但我不明白允许人们禁用它有什么坏处。对我来说毫无意义的功能。 (17认同)
- 当开发错误边界组件并设计/测试它们的外观时，这是一个非常烦人的功能。它会减慢开发速度并且不会增加任何价值。您应该允许开发人员决定是否要打开此功能。 (15认同)
- @JoeHaddad`一种侵入性较小的方法可能是删除窗口覆盖层安装的错误事件侦听器`您能否展示如何操作（代码示例）？谢谢你！ (7认同)
- FWIW按下“转义”对我没有任何作用，就像单击右上角的“ x”一样。在看到这篇文章之前，我什至不知道这是您可以做的事情，但是后来发现它不起作用。由于存在这种重叠行为，因此尝试测试“错误边界”一直令人沮丧，因此我不确定当前的实现是否是最佳解决方案。 (4认同)
- 我不认为这个覆盖提供任何价值。我很想永远禁用它。首先——速度太慢了！ (4认同)
- 就我个人而言，我只想禁用它，因为与空页面相比，加载时间更长，而且我可以在控制台中看到我需要的所有错误详细信息。我确实可以更快地看到我需要的信息...如果 Chrome 不太忙于加载我不需要的 HTML。 (4认同)
- 这让我花了太多时间测试我的 ErrorBoundary。我同意应该强调这个屏幕的覆盖性质，这样人们就不会开始追逐实际上已被捕获的“未捕获的错误”。 (2认同)
- 当我们使用异常来处理 404 或 500 等 API 错误时，覆盖不会带来任何“巨大的价值”...... (2认同)
小智 16
由于某种原因，只有在升级到 Webpack 5 时才会弹出叠加层。无论如何，您现在可以通过添加以下内容来取消叠加层webpack.config.js：
module.exports = {
//...
devServer: {
client: {
overlay: false,
},
},
};
或者通过 CLI：npx webpack serve --no-client-overlay
摘自这里： https: //webpack.js.org/configuration/dev-server/#overlay
Hen*_*Zhu 11
可以使用react-error-overlay包中的stopReportingRuntimeErrorshelper 实用程序禁用错误覆盖。
首先，安装 react-error-overlay 包：
yarn add react-error-overlay
然后在index.js安装根 React 组件之前，导入该实用程序并像这样调用它：
yarn add react-error-overlay
现在应该禁用 create-react-app 中的错误覆盖。
- 这似乎不起作用。我得到一个空白屏幕，并在控制台中出现错误“未捕获的错误：当前未监听”和“index.js：1未捕获的错误：预期要注入的选项”。 (9认同)
另一种解决方案是添加以下CSS样式：
iframe
{
display: none;
}
这样可以防止错误显示。
- 这也将隐藏您当时页面上的任何其他 Iframe (9认同)
- 如果您确实想使用此解决方案，则应该执行“body > iframe { display: none }”，这样您就不会删除应用程序上的每个“iframe”。 (6认同)
- 在为 iframe 设置“不显示”时请小心，因为它会将应用程序中的所有 iframe 设置为“不显示”。通过 id 定位它，然后设置 display none iframe#webpack-dev-server-client-overlay { display: none; } (4认同)
为了解决这个问题，你可以使用CSS：
body > iframe {
display: none;
}
- 不需要`!important`。 (3认同)
因此，这个覆盖层是一个 iframe，它添加到错误边界的后备组件上。无论如何，你可以通过完全隐藏它来做到他的目的，就像-
iframe#webpack-dev-server-client-overlay {
display: none;
}
检查 iframe 正在使用的 id
小智 7
您可以通过首先捕获事件来抑制React的错误事件处理。例如，通过在放置public/index.html的<head>：
<script>
window.addEventListener('error', function(e){
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
</script>
由于您可能仍然需要React的错误覆盖来覆盖错误边界之外的错误，因此请考虑以下选项：
<script>
window.addEventListener('error', function(e){
const {error} = e;
if (!error.captured) {
error.captured = true;
e.stopImmediatePropagation();
e.preventDefault();
// Revisit this error after the error boundary element processed it
setTimeout(()=>{
// can be set by the error boundary error handler
if (!error.shouldIgnore) {
// but if it wasn't caught by a boundary, release it back to the wild
throw error;
}
})
}
});
</script>
假设您的错误边界是这样的：
static getDerivedStateFromError(error) {
error['shouldIgnore'] = true;
return { error };
}
结果是遵循try ... catch推理行的行为。
- 从今天开始似乎还不起作用。如果我使用 `e.stopImmediatePropagation();`，我会收到以下错误：`未捕获的错误：在您的组件之一中抛出了一个错误，但 React 不知道它是什么。这可能是由于浏览器不稳定造成的。React 尽力保留 DevTools 的“异常暂停”行为，这需要一些仅适用于 DEV 模式的技巧。这些可能在您的浏览器中不起作用。尝试在生产模式下触发错误，或切换到现代浏览器。如果您怀疑这实际上是 React 的问题，请提出问题。 (2认同)
小智 5
如果你使用的是最新版本的react-script >= 5.0.0，你只需要添加一个环境变量ESLINT_NO_DEV_ERRORS=true。
https://create-react-app.dev/docs/advanced-configuration
| 归档时间： |
|
| 查看次数： |
7758 次 |
| 最近记录： |