JavaScript | 「例外＋非同期」のデバッグ実践（Promise の中のエラー追跡）

ここからは、「例外 × 非同期処理（Promise・async/await）」で発生するエラーをデバッグする方法を、初心者向けにやさしく、具体例つきで解説します。
（ブラウザ開発ツールを使った実践手順つきです 👇）

1. 非同期処理のエラーは「すぐ catch に飛ばない」!?

まず、Promiseやasync/awaitでは「エラーが即座に止まらない」ことが多いです。
普通のtry...catchでは非同期の中のエラーは拾えないこともあります。

例1：Promiseでの落とし穴

try {
  new Promise((resolve, reject) => {
    throw new Error("Promiseの中でエラー！");
  });
} catch (e) {
  console.log("キャッチできた？", e);
}

try {
  new Promise((resolve, reject) => {
    throw new Error("Promiseの中でエラー！");
  });
} catch (e) {
  console.log("キャッチできた？", e);
}

👉 実行結果：

Uncaught (in promise) Error: Promiseの中でエラー！

catchに入らない！

なぜ？
→ Promiseの中は非同期タスクとして別スレッド的に動くため、
外側のtry...catchでは届かないのです。

2. 正しい書き方：Promise の catch() を使う

new Promise((resolve, reject) => {
  throw new Error("Promiseの中でエラー！");
}).catch(e => {
  console.error("捕まえた！", e);
});

new Promise((resolve, reject) => {
  throw new Error("Promiseの中でエラー！");
}).catch(e => {
  console.error("捕まえた！", e);
});

✅ 結果：

捕まえた！ Error: Promiseの中でエラー！

または、reject()を明示的に呼んでも同様：

new Promise((resolve, reject) => {
  reject(new Error("明示的にエラー発生！"));
}).catch(e => console.error(e));

new Promise((resolve, reject) => {
  reject(new Error("明示的にエラー発生！"));
}).catch(e => console.error(e));

3. async/await での例外処理

awaitを使うと、try...catchが再び有効になります。

async function fetchData() {
  try {
    const res = await fetch("https://example.com/invalid-url");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("データ取得中にエラー発生！", err);
  }
}

fetchData();

async function fetchData() {
  try {
    const res = await fetch("https://example.com/invalid-url");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("データ取得中にエラー発生！", err);
  }
}

fetchData();

await は「Promiseの完了を待つ」構文なので、
内部でrejectされたとき catch にちゃんと飛びます。

4. 開発ツールで非同期エラーを追う（Chrome / Edge）

手順

1. F12キーで「開発者ツール（DevTools）」を開く
2. 「Sources」タブを開く
3. 該当の .js ファイルを左ペインで選ぶ
4. 該当箇所にブレークポイント（行番号クリック）を設定
5. 「再読み込み」または関数を実行

💡 ヒント

• 右上の「▶」マークでステップ実行（1行ずつ進む）
• 「Call Stack（コールスタック）」でエラーのたどり方が見える
• 「Scope / Watch」で、変数の中身をリアルタイムに確認できる

5. 非同期ブレークポイントを活かす！

例：fetchのエラーを止める

async function getUser() {
  const res = await fetch("https://invalid.example.com");
  const data = await res.json();
  console.log("ユーザー:", data);
}

getUser();

async function getUser() {
  const res = await fetch("https://invalid.example.com");
  const data = await res.json();
  console.log("ユーザー:", data);
}

getUser();

手順：

1. await fetch(...) の行にブレークポイントを置く
2. 実行すると、Promiseが解決 or 失敗する瞬間で停止できる
3. 「Call Stack」には getUser → fetchData → async のように、非同期呼び出しチェーンが見える

💡 ポイント：
Chromeでは「Async（非同期）スタックトレース」を自動でつなげてくれるため、
awaitをまたいでも「どこで始まった処理か」まで遡れます！

6. Promise 連鎖のデバッグ（then → then → catch）

fetch("https://invalid.example.com")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("最終的にキャッチ:", err));

fetch("https://invalid.example.com")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("最終的にキャッチ:", err));

🔍 デバッグコツ：

• then()の中で右クリック → 「Add conditional breakpoint」（条件付きブレークポイント）で
  「res.ok === false」のときだけ止めるようにできる。
• 「Promise」オブジェクトをクリックすると、
  「[[PromiseState]]: rejected」などが見える。
  → どのPromiseがエラーを持っているか確認可能。

7. よくある初心者エラーと解決法

まとめ