2017-10-05 3 views
3

開発モードでcreate-react-appを実行しているときにエラーオーバーレイを無効にする方法はありますか?開発モードでエラーオーバーレイを無効にする

これは私が話しているのオーバーレイです:イムは、コンポーネントがクラッシュしたときにエラーメッセージを表示するために、私のアプリでエラー境界(React 16 Error Boundaries)を使用しているので、私はこれを聞いてるのよ

enter image description here

が、エラーオーバーレイがポップアップして自分のメッセージをカバーします。

答えて

1

我々が開発中のエラーオーバーレイを無効にするオプションを提供していません。 エラーバウンダリは使用されません(プロダクション用です)。

開発エラーのオーバーレイとエラー境界の両方が発生することはありません。エラーの境界線を表示する場合は、[escape]を押すだけです。

エラーオーバーレイは、一般的なエラー境界(ソースコード、クリックして開くなど)を超える大きな価値を提供します。 ホットコンポーネントの再読み込みをすべてのユーザーの既定の動作として有効にすることも検討する必要があります。

オーバーレイを無効にすることを強く感じる場合は、react-scriptsから取り出してwebpackHotDevClientの使用を中止する必要があります。あまり介入しない方法では、オーバーレイによってインストールされたerrorイベントリスナーをwindowから削除することがあります。

+0

本当に素晴らしいチップ!今私は、エラー境界をテストするために環境変数を操作する必要はありません。 – arvinsim

0

私は同じ問題を抱えていましたが、私は長い間、create-react-appソースを掘り下げてきました。私はそれを無効にする方法はありませんが、それが効果的にエラーメッセージを停止する場所に置くリスナーを削除することができます。 developerConsoleを開き、htmlタグを選択します。そこではunhandledError.jsによって置かれたエラーとunhandlerejectionのイベントリスナーを削除することができます。画面の右上隅にあるxをクリックしてエラーメッセージを閉じることもできます。メッセージが表示されます。 config/webpack.config.dev.js

0

entry配列

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

で次の行をコメントアウトしてこれら二つのコメントを解除します

require.resolve('webpack-dev-server/client') + '?/', 
require.resolve('webpack/hot/dev-server'), 
関連する問題