web-dev-qa-db-fra.com

Désactiver la superposition d'erreur en mode développement

Existe-t-il un moyen de désactiver la superposition d'erreur lors de l'exécution d'une application create-react-app en mode développement?

C'est la superposition dont je parle: 

 enter image description here

Je demande cela parce que j'utilise des limites d'erreur ( React 16 Error Boundaries ) dans mon application pour afficher des messages d'erreur lorsque des composants se bloquent, mais la superposition d'erreur apparaît et couvre mes messages.

create-react-app
12
Daniel Hildesson

Nous ne fournissons pas une option pour désactiver la superposition d'erreur en développement . Les limites d'erreur ne prennent pas sa place (elles sont destinées à une utilisation en production).

Il n'y a aucun mal à avoir à la fois la superposition d'erreur de développement et votre limite d'erreur; appuyez simplement sur [escape] si vous souhaitez afficher votre limite d'erreur.

Nous pensons que la superposition d’erreurs fournit une valeur considérable par rapport à votre limite d’erreur typique (code source, clic pour l’ouvrir, etc.) . Elle est également essentielle lorsque nous explorons la possibilité de recharger les composants à chaud en tant que comportement par défaut pour tous les utilisateurs.

Si vous souhaitez vraiment désactiver la superposition, vous devrez éjecter de react-scripts et cesser d'utiliser webpackHotDevClient. Une méthode moins intrusive consiste peut-être à supprimer l'écouteur d'événements error installé par la superposition de window.

15
Joe Haddad

Vous pouvez supprimer le traitement des événements d'erreur de React en capturant l'événement first . Par exemple, en plaçant dans 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>

Etant donné que vous souhaitez probablement toujours utiliser la superposition d'erreurs de React pour les erreurs situées en dehors de la limite d'erreur, envisagez cette option:

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

en supposant que votre limite d'erreur fasse quelque chose comme:

    static getDerivedStateFromError(error) {
        error['shouldIgnore'] = true;
        return { error };
    }

Le résultat est un comportement qui suit essaie ... attraper ligne de raisonnement.

1
Omry Nachman

Dans config/webpack.config.dev.js, commentez la ligne suivante dans le tableau entry

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

Et décommentez ces deux:

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

J'avais le même problème et je creusais depuis longtemps dans la source create-react-app. Je ne trouve aucun moyen de le désactiver, mais vous pouvez supprimer les écouteurs qu'il met en place, ce qui arrête efficacement le message d'erreur. Ouvrez la console de développement et sélectionnez la balise html. Là, vous pouvez supprimer les écouteurs d'événements en cas d'erreur et d'unhandlerejection qui sont mis en place par unhandledError.js. Vous pouvez également fermer le message d'erreur en cliquant sur le x dans le coin supérieur droit de l'écran. Vous devriez alors voir votre message.

1
Jani

Je pense que cela a du sens, mais parfois, lorsque vous tapez et que vous avez une limite d’erreur, la superposition apparaît à chaque trait et est agaçante. Je peux supprimer le gestionnaire, je suppose.

1
JimTheDev

Il n'y a pas d'option pour cela.

Mais, si vous vouliez fortement désactiver la fenêtre modale, commentez cette ligne

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

0
ColCh