feat: ErrorCauseへの対応

source/basic/error-try-catch/README.md

@@ -282,6 +282,52 @@ MDNの[JavaScriptエラーリファレンス][]には、ブラウザが投げる
 また、ほとんどのブラウザには`console.log`や`console.error`の出力をフィルタリングできる機能が備わっています。
 ただのログ出力には`console.log`を使い、エラーに関するログ出力には`console.error`を使うことで、ログの重要度が区別しやすくなります。
 
+## [ES2022] Error Cause {#error-cause}
+
+エラーをキャッチし新しいメッセージや別の `Error` オブジェクトで送出すると、デバッグに有益な情報をエラーに付与することできて便利です。  
+これを実現する時に、新しく `Error` オブジェクトを作成して `throw` すると元のエラーのスタックトレースが失われてしまいます。
+
+この問題を解決するには、`catch` 句で補足した変換元の例外を、新しい `Error` オブジェクトのコンストラクタに渡すことで、変換元のエラーのスタックトレースを保持することができます。
+
+{{book.console}}
+```js
+// 数字の文字列を二つ受け取り、合計を返す関数
+function sumNumStrings(a, b) {
+    try {
+        const aNumber = safeParseInt(a);
+        const bNumber = safeParseInt(b);
+        return aNumber + bNumber;
+    } catch (e) {
+        throw new Error("Failed to sum a and b", { cause: e });
+    }
+}
+
+// 数値の文字列を受け取り数値を返す関数
+// 'text' など数値にはならない文字列を渡された場合は例外を送出する
+function safeParseInt(numStr) {
+    const num = parseInt(numStr, 10);
+    if (Number.isNaN(num)) {
+        throw new Error(`${numStr} is not a numeric`);
+    }
+    return num;
+}
+
+try {
+    // 数値にならない文字列 'string' を渡しているので例外が送出される
+    sumNumStrings("string", "2");
+} catch (err) {
+    console.error(`エラーが発生しました (${err})`);
+    // `cause` プロパティを参照することで、throwする時に `cause` で渡したエラーにアクセスすることができる
+    console.error(`詳細 (${err.cause})`);
+}
+```
+
+このスクリプトを読み込むと、`sumNumsStrings` の例外に `safeParseInt` から投げられたスタックトレースが付与された状態のエラーログがコンソールに出力されます。
+ここではFirefoxにおける実行例を示します。
+
+
+![safeParseIntのスタックトレースが含まれたconsole.errorの出力結果](./img/error-cause.png)
+
 ## まとめ {#conclusion}
 
 この章では、例外処理とエラーオブジェクトについて学びました。
@@ -291,6 +337,7 @@ MDNの[JavaScriptエラーリファレンス][]には、ブラウザが投げる
 - `throw`文は例外を投げることができ、`Error`オブジェクトを例外として投げる
 - `Error`オブジェクトには、ECMAScript仕様や実行環境で定義されたビルトインエラーがある
 - `Error`オブジェクトには、スタックトレースが記録され、デバッグに役立てられる
+- Error cause を使うことで例外を変換して送出する際に元のスタックトレースを保持できる
 
 [try...catch]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch
 [throw]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/throw

source/use-case/ajaxapp/promise/README.md

@@ -82,6 +82,7 @@ function main() {
         .catch((error) => {
             // Promiseチェーンの中で発生したエラーを受け取る
             console.error(`エラーが発生しました (${error})`);
+            console.error(`詳細 (${error.cause})`);
         });
 }
 
@@ -100,6 +101,9 @@ function fetchUserInfo(userId) {
                     displayView(view);
                 });
             }
+        })
+        .catch(err => {
+            return Promise.reject(new Error(`Failed fetch user(id: ${userId}) info`, { cause: err }));
         });
 }
 ```
@@ -139,6 +143,7 @@ function main() {
         // Promiseチェーンでエラーがあった場合はキャッチされる
         .catch((error) => {
             console.error(`エラーが発生しました (${error})`);
+            console.error(`詳細 (${error.cause})`);
         });
 }
 
@@ -151,6 +156,9 @@ function fetchUserInfo(userId) {
                 // JSONオブジェクトで解決されるPromiseを返す
                 return response.json();
             }
+        })
+        .catch(err => {
+            return Promise.reject(new Error(`Failed fetch user(id: ${userId}) info`, { cause: err }));
         });
 }
 ```
@@ -177,6 +185,7 @@ async function main() {
         displayView(view);
     } catch (error) {
         console.error(`エラーが発生しました (${error})`);
+        console.error(`詳細 (${error.cause})`);
     }
 }
 ```