私は、Promise に基づく非同期コードをデバッグする方法を理解しようとしています。Promise とは、ECMAScript 6 ベースの Promise を意味し、デバッグとは、組み込みの Chrome または Firefox デバッガーを使用することを意味します。
私が困っているのは、エラーが発生したときに、どのように「拒否」してもスタック トレースを取得できないことです。
これらを試しました:
console.log(new Error('Error occured'));
throw new Error('Throwing an Error');
return new Error('Error returned by the onRejected function');
reject(new Error('Pass Error to the reject function'));
しかし、それらのどれもコード内の実際のエラーやスタック トレースを返しません。
私の質問は、JavaScript Promise を適切にデバッグするにはどうすればよいかということです。
ベストアンサー1
これは議論する価値のあるトピックですが、残念なことに、ネイティブ プロミスでは実際には非常に困難です。
Chrome で生の ES6 Promise をデバッグするのは大変です。これは、エラーが黙って抑制され、catch を省略しても Promise が失敗したことを示すものが何も表示されないためです。
更新: Chrome は未処理の拒否をログに記録するようになりました(方法についてはこのリンクを参照してください)
Promise.resolve("foo").then(function(){
throw new Error("You will never see this");// silent failure
});
Firefox では、未処理の拒否検出を実行するため、状況は少し改善されていますが、まだ不安定であり、Promise をどこかに割り当てた場合は機能しません。
それで、何ができるでしょうか?
含む青い鳥- ES6のPromiseのスーパーセットであり、内部で直接交換することができ、より豊富なAPIを持ち、より高速で、素晴らしいスタックトレースデバッグを考慮して構築されており、優れたエラー処理機能を備えています。
Bluebird を追加したら、次のコードを呼び出します。
Promise.longStackTraces();
これにより、速度が少し低下します (それでも非常に高速です)。また、驚くべきエラー メッセージが表示されます。例:
Promise.resolve().then(function outer() {
return Promise.resolve().then(function inner() {
return Promise.resolve().then(function evenMoreInner() {
a.b.c.d()
});
});
});
ネイティブの Promise では、これはサイレント エラーとなり、デバッグが非常に困難になりますが、Bluebird Promise では、デフォルトでコンソールに大きな赤いエラーが表示され、次のようになります。
ReferenceError: a is not defined
at evenMoreInner (<anonymous>:6:13)
From previous event:
at inner (<anonymous>:5:24)
From previous event:
at outer (<anonymous>:4:20)
From previous event:
at <anonymous>:3:9
at Object.InjectedScript._evaluateOn (<anonymous>:581:39)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:540:52)
at Object.InjectedScript.evaluate (<anonymous>:459:21)
デバッグが完了したら、それを交換してネイティブの Promise に戻ることができます。個人的には、本番環境でエラーがあることを知ることが重要なので、お勧めしませんが、確かに実行可能です。