先生、僕エラーハンドリングがしたいです。

はじめに

いつもエラーハンドリングって適当に書いてました（懺悔）
エラーの実態を知るべく、我々はアマゾンの奥地へと足を踏み入れた、、、。

知りたいこと

• エラーハンドリングって何
• エラーって何

エラーハンドリングって何

エラーハンドリングと書いていますが、自分が知りたいのはモロにtry~catchなので一旦GPT先生に聞いてみました。曰く

try...catch は、エラー (例外) が発生したときにプログラムがクラッシュするのを防ぎ、適切に処理するための構文 です。

続けて以下のコードも出力してくれました。

try {
  // ここにエラーが起こるかもしれないコードを書く
  let result = riskyFunction(); // 例: エラーが発生する可能性のある関数
  console.log(result);
} catch (error) {
  // エラーが発生したときの処理
  console.error("エラーが発生しました:", error.message);
}

tryの中にはエラーリスクのある関数などを記述します（よく見るのはapiを叩くなど）。
try文中で発生したエラーはcatch文が感知して、記述されている方法でユーザーに通知が一般的なようです。

エラーって何

続いて良く見るコードに以下のようなものがあります。

try {
  let result = riskyFunction(); // 例: エラーが発生する可能性のある関数
  if () {
    throw New Error("エラー出たよ！");
  }
} catch (error) {
  console.error("エラーが発生しました:", error.message);
}

こういった処理を見かけます。throw New Errorって何だ？Error内にある文字列は何のためにあるんだ？調べます！

try {
  throw new Error("Whoops!");
} catch (e) {
  console.error(e);
}

幸いにもmdn web docsに例が掲載されていました。try文中で生成されたErrorインスタンスがcatch文中でeとして取得され、それぞれe.name、e.messageがconsoleに表示されているようです。実際どのような値が出力されているのでしょうか？

出力結果

Error: Whoops!

e.nameとはインスタンスの名称が渡り、e.messageはインスタンス作成時に渡された文字列が渡っているようです。また、e.messageはemptyでも良さそう。
react.toastifyを利用して、エラートーストの文章だけe.messageから渡すなどもあり得そう！

最後に

エラーって奥深いんだろうなって思って遠ざけていたところがあったのですが、意外とあっさりしていて調べてみるもんだなって思いました。