JavaScriptでtry文を使った際にcatch句で正しく例外が捕捉されない原因

はじめに

JavaScriptでtry文を使った際にcatch句で正しく例外が捕捉されないという事象が発生したので、原因をまとめました。

当該ソースコード

以下が問題のソースコードです。

main.js

// 処理を実行している最中に例外が起きても例外処理が実行されない
try{
  btnElm.addEventListener('click', () => {
    // 処理
  });
} catch(e) {
  // 例外処理
}

ボタンをクリックして呼び出した処理を実行している最中に例外が発生しても例外処理が実行されません。

原因と対策

原因

ずばり、addEventListenerが非同期で行われる処理であることが原因です。図にすると以下の通りで、addEventListenerの処理が別のコンテキストで行われており、try文で例外を捕捉することができません。

対策

以下の通りコードを書き直しましょう

main.js

btnElm.addEventListener('click', () => {
    try{
        // 処理
    } catch(e) {
        // 例外処理
    }
});

非同期的に実行されるaddEventListener内で例外を捕捉しているので、ただしく例外処理が実行されます。処理の流れを図に表すと以下の通りです。