Javascript/ReactJSエラーのデバッグ

Question

私はReactJSで小さなアプリケーションを構築しており、デバッグが難しい場合があります。

私はいくつかのJavascript errorを作るたびに、新しい変数の前にlet/varを逃すように、私は後で使うコンポーネントのrequireを逃し、私のアプリケーションは、ちょうど（コードは、エラーがある行を超えて実行されません）動作を停止し、ブラウザのコンソールにエラーは表示されません。あたかもReactJSコードがエラーを傍受していたかのように思えます。 ReactJSのようなものはありますか？コンソールでエラーを表示するにはどうすればよいですか？

私はgulp/gulp-connect/browserifyを使用してアプリケーションを実行しています。

追加のデータやコードサンプルが必要な場合は、質問を更新してください。あなたは、エラーがスローされたが、いくつかの他のコードに飲み込まれることがわかっている場合は

Answer 1

、あなたはそれがどこかに引っ掛かった場合でも、例外がスローされたときに実行を一時停止するには、ブラウザのデバッガで有効にすることができます。

ただし、ライブラリが特定の機能をサポートしているかどうかをテストする際に、ライブラリが意図的に例外をトリガすることがあります。あなたはそれらを乗り越えなければならないでしょう。

Answer 2

WebpackプラグインであるReact Hot Loaderを使用すると、開発プロセスの多くの問題を解決できます。 integrateは既存のプロジェクトに簡単にあり、すべてのものをまとめて入れる方法はquite a few examplesです。

結果：

• あなたのコードの変更は、ブラウザのコンソールに意味のあるスタックトレースを持つことになり、エラーの場合には、ブラウザ
• にプッシュされます。

Answer 3

誤ったJS構文がgulpプロセスを失敗させ、アプリケーションがブラウザにまったくバンドルされない/展開されてしまうことが予想されます。

ブラウザコンソールではなく、システムコンソール（gulpが実行されている場所）にエラーがあるようです。これが起こったときに、おそらくあなたのギャルププロセスがクラッシュする可能性があります。あなたのコンソールにエラーがない場合、あなたはそれらを聞く必要があるかもしれません。 This postは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')); 
}); 

おそらく最良の解決策は、あなたが構文的に不正なコードをbrowserifyしようとしていないようbrowserify前jshintを通して、あなたのコードを実行することです。

警告：現在グッユーザ

Answer 4

react-slingshotはスターターキットであり、それはコンパイル時エラーを示し、ブラウザ上にスタックトレースを示していません。また、テストが設定されています。

Answer 5

私はlet/var、require、およびその他の些細な間違いが反応の文脈の中にないのと同様の問題を抱えていました。 私の場合、原因はPromiseの間違いです。 Promiseは、呼び出された後に発生する例外をすべて抑制するようです。 以下のように例外を処理することで問題を解決できます。

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