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

Question

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

这就是我所说的叠加层：

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

Answer 1

我遇到了同样的问题，我已经在 create-react-app 源代码中挖掘了很长时间。我找不到任何方法来禁用它，但您可以删除它放置的侦听器，从而有效地停止错误消息。打开 developerconsole 和 select html 标签。在那里，您可以删除 unhandledError.js 设置的错误事件侦听器和 unhandlerejection 事件侦听器。您也可以通过单击屏幕右上角的 x 关闭错误消息，然后您应该会看到您的消息。

Answer 2

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

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

同时拥有开发错误叠加层和您的错误边界并没有什么坏处；如果您想查看错误边界，只需按 Escape。

我们认为错误叠加在您的典型错误边界（源代码、点击打开等）上提供了巨大的价值。这也很重要，因为我们探索将热组件重新加载作为所有用户的默认行为。

如果您强烈反对禁用覆盖，则需要从 react-scripts 中退出并停止使用 webpackHotDevClient。一种侵入性较小的方法可能是删除由 window.

的覆盖安装的 error 事件侦听器

Answer 4

我认为这是有道理的，但有时当您打字时出现错误边界，然后每个字符笔画都会弹出叠加层，这很烦人。我可以删除我想的处理程序。

Answer 5

没有选项。

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

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

Answer 6

您可以通过捕获事件 first 来抑制 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 推理线的行为。

Answer 7

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

iframe
{
    display: none;
}

这样可以防止显示错误。

Answer 8

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

body > iframe {
  display: none !important;
}

Answer 9

在文件 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,

Answer 10

可以使用 react-error-overlay 包中的 stopReportingRuntimeErrors 辅助实用程序禁用错误覆盖。

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

yarn add react-error-overlay

然后在 index.js — 在安装根 React 组件之前，导入实用程序并像这样调用它：

import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors(); // disables error overlays
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

现在应该禁用 create-react-app 中的错误覆盖。

Answer 11

为避免在产品中捆绑这个大型开发库，您可以使用动态导入：

yarn add react-error-overlay

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

Answer 12

用adblock隐藏它

暂时禁用错误非常有用，这样您就不必 comment/uncomment 代码中目前未使用的部分，但肯定会在进行更多更改后使用。

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

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

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

我会说这对初学者来说是箭在弦上:)

Answer 13

出于某种原因，我现在才在升级到 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

Answer 14

在这里收集答案，我设法自己解决了这个问题。

Here 是我为此创建的包。

Answer 15

如果您使用的是react-script >= 5.0.0 的最新版本，您只需添加一个环境变量ESLINT_NO_DEV_ERRORS=true。 https://create-react-app.dev/docs/advanced-configuration

Answer 16

css 修复已更改：

body > hmr-error-overlay {
  display: none;
}

我还建议在 init 上添加这个块，这样您就不会出现静默错误：


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

Answer 17

如果您想默认最小化它（在一个小的“显示错误”按钮后面）而不完全禁用，我为此编写了一个小程序包。

npm i hide-cra-error-overlay

然后在index.js（或其他文件）中导入：

import "hide-cra-error-overlay";

就是这样 - 无论何时通常会出现叠加层，您都会在右下角看到一个“显示错误”按钮，您可以单击该按钮来切换它。

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

Disable error overlay in development mode

create-react-app

用adblock隐藏它