[JaveScript]エラー処理について

はじめに

JavaScriptのエラー処理について学習したことをまとめていきます。

エラーハンドリングとは

例外が発生した時、そのエラーや例外を適切に処理するプロセスや手法のこと(例外処理と呼ぶこともある)。
エラーハンドリングが組み込まれていないと、例外が起きた場合に予期せぬ動作をしたり、クラッシュしてしまう。

エラー処理の基本

エラー処理の書き方は3つ

1. try...catch
2. throw
3. エラーオブジェクト

try...catch

tryブロック内で例外が発生した時に、その例外をcatchブロックで受け取ることができる
※例外が発生しなかったらcatchは行われない
finallyブロックは例外が発生した・しないに関わらず最終的に必ず実行されるブロック

try...catch

try {
// 実行される処理
} catch(error) {
//例外が発生した場合に実行される処理
} finally {
 //必ず実行される処理
}

注意点
この処理には必要最低限1つ以上のcatchブロックかfinallyブロックが必要になるため、以下のバターンがある
・try...catch
・try...finally
・try...catch...finally

throw

例外を発生させるもの。これをcatchブロックがキャッチしてくれる。

throw

throw 例外の式;

注意点
catchブロックがないとプログラムが終了してしまうため用意する必要がある

throw文の例外の式部分には以下の様に、プリミティブ型やオブジェクト型(後述する Error オブジェクトなど)を入れることができる

throw

throw "例外発生";
throw 400;
throw new Error("例外発生！");

しかし、エラー処理を行う場合はエラーオブジェクトを生成して例外を投げることが推奨されている

文字列のthrow
スタックトレースを取得できず、問題の発生箇所を特定できないため文字列を直接throwしてはいけない
以下のようにErrorオブジェクトを使用する

Errorオブジェクト

throw new Error('エラー')

エラーオブジェクト

処理を実行中にエラーが発生した時に生成される

エラ-

try {
  // funcメソッドは存在しない->エラー発生
  func();
} catch (error) {
  // errorにエラーオブジェクトが渡る
  console.error(error);
}

結果としてエラーが返ってくる。
エラーオブジェクトを自作しthrow文で例外として投げることもできる

エラーオブジェクトの作成

try {
//エラーオブジェクトを生成しthrowする
throw new Error('エラーが発生')
} catch(error) {
//throwで投げられたErrorをキャッチ
console.error(error)
}

エラーの種類

エラーの種類にはいくつかあり、詳細はこちら
・ReferenceError：不正な参照から参照先の値を取得した時に発生するエラーを表す
・SyntaxError：構文エラーを表す
ex)タイプミス、予約語を不適切な場所で使用した
・TypeError：変数または引数の型が有効でない場合に発生する
ex)constに再代入しようとした時、存在しない要素を指定した時

非同期処理でのエラー処理

非同期処理では、基本的にtry...catchしてもエラーハンドリングできない
例えば、Promiseを使った非同期処理の例外

例外処理

fetch('hoge/hoge').then((result) => {
  console.log(result)
}).catch((e) => {
  console.log(e)
}).finally(() => {
  console.log('done')
})

thenとcatchで繋ぐ
構造としてはtry...catchと同じで処理に問題がなければthenの部分を実行、エラーが発生した場合はcatchをfinallyは必ず実行される。

注意点
async/awaitを使用した場合は普通にtry...catchが使用できる

async/await

try{
  // 例外が発生し得る処理
  await fetch('/hoge/foo')
}catch(e){
  // エラー時に実行される処理
  console.log(e)
}

参考

【JavaScript】エラー処理 完全ガイド
【JavaScript】エラー処理の基本的なところを理解する