Отключить наложение ошибок в режиме разработки
Есть ли способ отключить наложение ошибок при запуске приложения create-реагировать в режиме разработки?
Это наложение, о котором я говорю:
Я спрашиваю об этом, потому что я использую границы ошибок ( React 16 Error Boundaries) в моем приложении для отображения сообщений об ошибках, когда компоненты аварийно завершают работу, но всплывающее окно с ошибкой появляется и закрывает мои сообщения.
18 ответов
Мы не предоставляем возможность отключить наложение ошибок при разработке. Границы ошибок не занимают своего места (они предназначены для производственного использования).
Нет ничего плохого в том, что и оверлей ошибок разработки и ваша граница ошибок; просто нажмите [escape] если вы хотите просмотреть границы ошибок.
Мы считаем, что наложение ошибок дает огромное значение по сравнению с вашей типичной границей ошибок (исходный код, нажмите, чтобы открыть и т. Д.). Это также важно, поскольку мы рассматриваем возможность перезагрузки горячих компонентов в качестве поведения по умолчанию для всех пользователей.
Если вы решительно настроены отключить наложение, вам нужно будет извлечь из react-scripts и прекратить использование webpackHotDevClient, Менее навязчивым методом может быть удаление error прослушиватель событий установлен наложением window,
Альтернативное решение - добавить следующий стиль CSS:
iframe
{
display: none;
}
Это предотвращает отображение ошибки.
почему-то у меня оверлей выскочил только сейчас при обновлении до 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
Наложение ошибок можно отключить с помощью stopReportingRuntimeErrorsвспомогательная утилита в пакете response-error-overlay.
Сначала установите пакет response-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-response-app теперь должны быть отключены.
Вы можете подавить обработку события ошибки React, сначала захватив событие. например, поместив в public/index.html"s <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 };
}
Результатом является поведение, которое следует за попыткой... поймать строку рассуждений.
Чтобы решить эту проблему, вы можете использовать CSS:
body > iframe {
display: none !important;
}
Таким образом, это наложение представляет собой iframe, который добавляется поверх резервного компонента границы ошибки. В любом случае вы можете сделать это, полностью спрятав его, например:
iframe#webpack-dev-server-client-overlay {
display: none;
}
Проверьте идентификатор, который использует iframe
Если вы используете последнюю версию с реактивным скриптом >= 5.0.0, вам просто нужно добавить переменную среды
ESLINT_NO_DEV_ERRORS=true. https://create-react-app.dev/docs/advanced-configuration
Чтобы избежать объединения в эту большую библиотеку разработчиков, отключите динамический импорт:
yarn add react-error-overlay
if (process.env.NODE_ENV === 'development') {
import('react-error-overlay').then(m => {
m.stopReportingRuntimeErrors();
});
}
В config/webpack.config.dev.jsзакомментируйте следующую строку в entry массив
require.resolve('react-dev-utils/webpackHotDevClient'),
И раскомментируйте эти два:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
В файле 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,
скрыть это с помощью adblock
Очень полезно временно отключить ошибки, чтобы вам не приходилось комментировать / раскомментировать части вашего кода, которые не используются в данный момент, но это определенно будет после еще нескольких изменений.
Самое быстрое решение - просто использовать adblock, чтобы выбрать iframe с ошибками.
Просто переключить его одним щелчком мыши, чтобы включить / отключить блокировку рекламы на данной странице.
Наложить обработанную страницу в режиме разработки просто для того, чтобы проинформировать пользователя о том, что недавно импортированные объекты или недавно созданные переменные еще не используются, нелогично.
Я бы сказал, это стрелка в колено для новичков :)
Я думаю, что это имеет смысл, но иногда, когда вы печатаете и имеете границу ошибки, наложение всплывает с каждым ударом символа и раздражает. Я могу удалить обработчик, я полагаю.
Собрав ответы здесь вместе, мне удалось решить этот вопрос для себя.
Вот пакет, который я создал для этого.
У меня была та же проблема, и я долго копался в источнике create-реагировать на приложение. Я не могу найти способ отключить его, но вы можете удалить слушателей, которые он устанавливает, что эффективно останавливает сообщение об ошибке. Откройте developerconsole и выберите HTML-тег. Там вы можете удалить прослушиватели событий при ошибке и unhandlerejection, которые устанавливаются unhandledError.js. Вы также можете закрыть сообщение об ошибке, щелкнув значок x в верхнем правом углу экрана, после чего вы должны увидеть свое сообщение.
Исправление css изменилось:
body > hmr-error-overlay {
display: none;
}
Я также рекомендую добавить этот блок при инициализации, чтобы вы не получали тихих ошибок:
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();
});
Там нет варианта для этого.
Но, если вы сильно хотите отключить модальное окно, просто закомментируйте эту строку
Если вы хотите минимизировать это по умолчанию (за небольшой кнопкой «Показать ошибки») без полного отключения, я написал для этого небольшой пакет.
npm i hide-cra-error-overlay
Затем импортируйте в index.js (или другой файл):
import "hide-cra-error-overlay";
Вот и все — всякий раз, когда обычно появляется оверлей, вместо этого вы увидите кнопку «Показать ошибки» в правом нижнем углу, которую вы можете щелкнуть, чтобы переключить ее.