Отключить наложение ошибок в режиме разработки

Есть ли способ отключить наложение ошибок при запуске приложения create-реагировать в режиме разработки?

Это наложение, о котором я говорю:

enter image description here

Я спрашиваю об этом, потому что я использую границы ошибок (React 16 Error Boundaries) в своем приложении для отображения сообщений об ошибках при сбоях компонентов, но всплывающее окно с ошибкой выскакивает и закрывает мои сообщения.

Ответы

Ответ 1

Мы не предоставляем возможность отключить наложение ошибок в процессе разработки. Границы ошибок не занимают места (они предназначены для использования в производстве).

Нет вреда, имеющего как набросок ошибки разработки, так и вашу границу ошибки; просто нажмите [escape], если вы хотите просмотреть свою границу ошибки.

Мы считаем, что наложение ошибок обеспечивает огромную ценность по сравнению с типичной границей ошибок (исходный код, щелчок для открытия и т.д.). Это также жизненно важно, поскольку мы рассматриваем возможность включения перезагрузки горячих компонентов в качестве поведения по умолчанию для всех пользователей.

Если вы решительно настроитесь на отключение оверлея, вам нужно извлечь из react-scripts и прекратить использование webpackHotDevClient. Менее интрузивным методом может быть удаление прослушивателя событий error, установленного с помощью оверлея window.

Ответ 2

У меня была такая же проблема, и я долгое время работал в источнике создания-реакции-приложения. Я не могу найти способ отключить его, но вы можете удалить прослушиватели, которые он устанавливает, что эффективно останавливает сообщение об ошибке. Откройте консоль разработчика и выберите тег html. Там вы можете удалить прослушиватели событий по ошибке и unhandlerejection, которые установлены на unhandledError.js. Вы также можете закрыть сообщение об ошибке, щелкнув x в правом верхнем углу экрана, а затем вы увидите свое сообщение.

Ответ 3

В config/webpack.config.dev.js закомментируйте следующую строку в массиве entry

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

И раскомментируйте эти два:

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

Ответ 4

Я думаю, что это имеет смысл, но иногда, когда вы печатаете и у вас есть граница ошибки, наложение появляется с каждым штрихом символа и раздражает. Я могу удалить обработчик, я полагаю.

Ответ 6

Вы можете подавить обработку события ошибки React, сначала записав событие. например, поместив в public/index.html <head>:

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

Поскольку вы, вероятно, все еще хотите использовать React overlay для ошибок за пределами границы ошибки, рассмотрите эту опцию:

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

Результатом является поведение, которое следует за попыткой... поймать строку рассуждений.