Question

在开发模式下运行create-react-app时，有没有办法禁用错误覆盖？

这是我正在谈论的重叠：

我问这个是因为我在我的应用中使用错误边界（React 16 Error Boundaries）来显示组件崩溃时的错误消息，但错误覆盖会弹出并覆盖我的消息。

Answer 1

我们不提供在开发中禁用错误覆盖的选项。错误边界不起作用（它们用于生产用途）。

开发错误覆盖和错误边界都没有坏处;如果您想查看错误边界，只需按[escape]即可。

我们认为错误覆盖提供了超出典型错误边界的巨大价值（源代码，点击打开等）。当我们探索启用热组件重新加载作为所有用户的默认行为时，这也是至关重要的。

如果您对禁用叠加层有强烈的兴趣，则需要从react-scripts退出并停止使用webpackHotDevClient。一种侵扰性较小的方法可能是删除error覆盖所安装的window事件侦听器。

Answer 2

可以使用react-error-overlay软件包中的>>> comment = WebDriverWait(driver, 60).until(EC.visibility_of_element_located((By.XPATH, "//yt-formatted-string[contains(., 'Comments')]"))) Traceback (most recent call last): File "<stdin>", line 1, in <module> File "/usr/local/lib/python3.5/dist-packages/selenium/webdriver/support/wait.py", line 80, in until raise TimeoutException(message, screen, stacktrace) selenium.common.exceptions.TimeoutException: Message:帮助工具来禁用错误覆盖。

首先，安装react-error-overlay软件包：

stopReportingRuntimeErrors

然后在yarn add react-error-overlay中安装-紧接在安装根React组件之前，导入实用程序并按如下所示调用它：

index.js

现在应禁用create-react-app中的错误叠加。

Answer 3

您可以通过捕获事件 first 来抑制React的错误事件处理。例如，通过放入public/index.html的{{1}}：

<head>

由于您可能仍然需要React的错误覆盖来覆盖错误边界之外的错误，因此请考虑以下选项：

<script>
      window.addEventListener('error', function(e){
        // prevent React's listener from firing
        e.stopImmediatePropagation();
        // prevent the browser's console error message 
        e.preventDefault();
      });
</script>

假设您的错误边界是这样的：

<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>

结果是遵循try ... catch推理行的行为。

Answer 4

另一种解决方案是添加以下CSS样式：

iframe
{
    display: none;
}

这可以防止错误显示。

Answer 5

在config/webpack.config.dev.js中，注释掉entry数组

中的以下行

require.resolve('react-dev-utils/webpackHotDevClient'),

并取消注释这两个：

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),

Answer 6

我遇到了同样的问题，并且我一直在使用create-react-app源很长一段时间。我找不到任何方法来禁用它，但您可以删除它放置的侦听器，这有效地停止了错误消息。打开developerconsole并选择html标记。在那里你可以删除错误和unhandlerejection上的事件监听器，这是由unhandledError.js实现的。您还可以通过单击屏幕右上角的x来关闭错误消息，然后您应该看到您的消息。

Answer 7

我认为这是有道理的，但是有时当您键入内容并有错误边界时，叠加层会随着每个字符笔划而弹出并令人讨厌。我可以删除我想要的处理程序。

Answer 8

要解决此问题，可以使用CSS：

body > iframe {
  display: none !important;
}

Answer 9

为避免捆绑在这个大型开发库中，请禁用动态导入：

yarn add react-error-overlay

if (process.env.NODE_ENV === 'development') {
  import('react-error-overlay').then(m => {
    m.stopReportingRuntimeErrors();
  });
}

Answer 10

用adblock隐藏

暂时禁用错误非常有用，这样您就不必注释/取消注释当前未使用的代码部分，但肯定会在进行一些更改后进行。

最快的解决方案是使用 adblock 来选择有错误的 iframe。

只需单击一下即可在给定页面上启用/禁用广告拦截。

在开发模式下覆盖呈现的页面只是为了通知用户新导入的对象或尚未使用最近创建的变量是违反直觉的。

我会说这是初学者的膝盖之箭:)

Answer 11

没有选择。

但是，如果您强烈希望禁用模式窗口，只需将这一行注释掉

https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173

Answer 12

在文件 webpack.config.js 中，注释以下行：

 // require.resolve('react-dev-utils/webpackHotDevClient'),

取消注释：

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),

在文件 webpackDevServer.config.js 中，注释：

// transportMode: 'ws',
// injectClient: false,

在开发模式下禁用错误覆盖

12 个答案:

用adblock隐藏