099. Error Handling（エラーハンドリング：想定外のトラブルを「事故」にしない）

原理：完璧な世界など存在しない

サーバーが「沈黙」したとき、どうするか

Webアプリを作っていると、避けられないエラーが発生します。 - サーバーのプログラムがバグで急に止まった（500エラー）。 - インターネット回線が不安定で、返事が届かなかった。 - 探しているデータが削除されていた（404エラー）。

こうした「不慮の事故」が起きたとき、何もしないとユーザーは「ボタンを押したのに何も起きない。壊れたのかな？」と不安になります。

「エラーハンドリング（Error Handling）」とは、「何かがうまくいかなかった時、それをいち早く察知して、ユーザーに適切に報告したり、代わりの対応を行ったりすること」です。

実践：トラブルをスマートに伝える

1. HTMXのデフォルトの振る舞いを知る

HTMXは、サーバーから「400番台（ユーザー側のミス）」や「500番台（サーバー側のミス）」のエラーが返ってきたとき、標準では「画面を更新しない」という選択をします。これは、中途半端なエラー画面で今の入力を上書きしないための優しさです。

2. エラーをキャッチしてメッセージを出す（hx-on）

エラーが起きた瞬間に、JavaScriptの力を少し借りて「通知（トースト）」を出す例です。

<div hx-get="/api/broken-route" 
     hx-on::error="alert('通信エラーが発生しました。時間を置いてやり直してください。')">
    データを読み込む
</div>

3. エラー用のターゲットを用意する（hx-target-error）

最新のHTMX（または拡張機能）では、「成功した時はここに出す、失敗した時はあっちに出す」といった、エラー専用の表示先を指定することもできます。

比較：何もしない vs 適切にハンドリングする

何もしない

現象: 内部で通信エラーが起きているが、画面は無反応。
結果: ユーザーは何度もボタンを連打し、ストレスが溜まり、最悪はサイトを去ってしまう。

ハンドリングする

現象: 「サーバーが混み合っています」といったメッセージがサッと出る。
結果: ユーザーは「あ、今ちょっと調子が悪いのかな」と納得し、冷静に次の操作（リロードなど）ができる。

まとめ：初心者のための「失敗」の作法

エラーハンドリングは、アプリの「心の広さ」を表します。

ユーザーを責めない: どんなエラーであっても「あなたが悪い」という言い方は避け、「お手数ですが」「確認してください」という丁寧な言葉を選びましょう。
デバッグのヒントを残す: 開発者コンソール（F12）には、エラーの詳しい情報が出るようにしておくと、あとの修理が楽になります。
500エラーは開発者の課題: 500エラーは「あってはならないこと」です。これが頻発するなら、フロントエンドより先にサーバー側のプログラムを直す必要があります。

最悪の事態を、最高のリカバリーへ。エラーハンドリングという「安全ネット」を張り巡らせることで、多少のトラブルでは揺るがない、タフで誠実なWebアプリを構築してください。次の記事では、エラーの正体を突き止める鍵となる「ステータスコード別処理（100. Status Code Handling）」をご紹介します。