Errori di Javascript/ReactJS di debug

Question

Sto costruendo una piccola applicazione con ReactJS e talvolta trovo difficile eseguirne il debug.

Ogni volta che faccio un po 'di Javascript error, come mancare let/var di fronte a nuova variabile, manca require per un componente che poi ho usato, la mia domanda si ferma proprio lavoro (il codice non viene eseguito oltre la linea in cui l'errore è), ma non ricevo errori nella console del browser. Sembra che alcuni codici ReactJS stessero intercettando errori, magari gestendoli in modo personalizzato. C'è qualcosa di simile in ReactJS? Come posso vedere gli errori nella console?

Sto usando gulp/gulp-connect/browserify impostato per eseguire l'applicazione.

Fammi sapere se hai bisogno di ulteriori dati o esempi di codice, aggiornerò la domanda.

Answer 1

Se si sa che viene generato un errore, ma inghiottito da qualche altro codice, è possibile attivare nel debugger del browser per sospendere l'esecuzione quando viene generata un'eccezione, anche se e 'colto in qualche parte:

Si noti tuttavia che le librerie talvolta attivano deliberatamente eccezioni durante il test se il browser supporta determinate funzionalità. Dovresti scavalcarli.

Answer 2

L'utilizzo di React Hot Loader che è un plug-in Webpack dovrebbe risolvere la maggior parte dei problemi che si verificano in un processo di sviluppo. È facile aggiungere integrate a un progetto esistente e ha come quite a few examples come mettere insieme tutte le cose.

Come risultato:

• le modifiche di codice sarebbero spinti al browser
• in caso di errore si avrà significativo stack trace nella console del browser.

Answer 3

Suppongo che la sintassi JS errata causi il malfunzionamento del processo di gulp, il che non comporterà alcuna distribuzione/distribuzione del browser dell'applicazione nel browser.

Sembra che ci dovrebbero essere errori nella console di sistema (dove gulp è in esecuzione) - in contrasto con la console del browser. Forse il tuo processo di gulp si arresta in modo anomalo quando succede anche questo. Se non ci sono errori nella tua console, potresti doverli ascoltare. This post ha un esempio di come registrare gli errori da browserify:

gulp.task('browserify', function(){ 
    var b = browserify(); 
    b.add('./main.js'); 

    return b.bundle() 
    .on('error', function(err){ 
     console.log(err.message); // 
     this.end(); 
    }) 
    .pipe(source('main.out.js')) 
    .pipe(gulp.dest('./dist')); 
}); 

Probabilmente la soluzione migliore è quella di eseguire il codice attraverso jshint prima browserify in modo che non sta cercando di browserify codice sintatticamente valido.

Caveat: non un utente sorso corrente

Answer 4

react-slingshot è uno starter kit e si vede l'errore in fase di compilazione e mostra traccia dello stack sul browser. Ha anche istituito il test.

Answer 5

Ho sofferto del problema simile con questo mi piace lasciare/var, richiedere, e altri errori banali all'interno del contesto di reazione. Nel mio caso, la causa è l'errore dell'istruzione Promise. Promise sembra sopprimere eventuali eccezioni che si verificano dopo che è stato chiamato. Potrei risolvere il problema gestendo un'eccezione come di seguito.

var Promise = require('es6-promise').Promise; 
var promise = new Promise(...) 
promise 
    .then(function(data){...}) 
    .catch(function(e) { 
    console.error(e.stack) 
}