JavaScript の Promise, await, async 時のエラー捕捉について

new Promise() を返す関数内でのエラーは onError では拾えない。

window.addEventListener('error', (msg, file, no) => {
  alert(['onError', msg.message, file, no].join("\n--------\n"))
})

window.addEventListener('unhandledrejection', (evt) => {
  alert(['onUnhandledrejection', evt.reason.stack].join("\n--------\n"))
})

// onErrorでは拾えない。onUnhandledrejection では拾える。
new Promise((resolve,reject)=>{ throw new Error('xxx') })

エラーを捕捉するにはどうするか。

function p1(){ return new Promise((resolve,reject)=>{
  throw new Error('xxx')
})}
//-----
;(async()=>{
  try{ p1() }catch(err){ alert(err) } // × awaitで無い場合は拾えない
  try{ await p1() }catch(err){ alert(err) } // ○ await なら拾える
  p1().catch((err)=>{ alert(err) }) // ○ .catch()でも拾える
  
  try{
    await p1().catch((err)=>{ alert(err) }) // ○ こっちだけで拾える
  }catch(err){
    alert(err)
  }
  
  try{
    await p1().catch((err)=>{ alert(err); throw err }) // ○ 拾える
  }catch(err){
    alert(err) // ○ throw してるのでこちらでも拾える
  }
})();

new Promise() を返す関数内のエラーは自分で捕捉するしかない。
親には伝播しない。

function p2(){ return new Promise((resolve,reject)=>{
  p1()
})}
p2().catch((err)=>{ alert(err) }) // p1 のエラーは　p2 に伝わらないので捕捉できない

伝播させるには手動で上げるしかない。

function p2(){ return new Promise((resolve,reject)=>{
  p1().catch(reject) // こちらで捕捉して上に上げる
})}
p2().catch((err)=>{ alert(err) }) // 捕捉できる

new Promise() では await(try ~ catch) と .catch() は直接の 自分自身 内のエラーのみ反応する。

new Promise() 内で new Promise() を使用するとそれはもう別世界でエラーは自動では伝播しないので注意。