エラーハンドリング 失敗しても壊れない画面

前の章のコードには、実はワナがひとつ残っています。

もし、fetchが失敗したら?——電波の悪い地下鉄、サーバーの障害、URLの打ち間違い。通信は日常的に失敗します。前章のコードで失敗が起きると、setIsLoading(false) の行にたどり着けません。つまり画面は——永遠に「読み込み中...」。

ユーザーは待ち続けます。来ないデータを。この「永遠のローディング」は、世の中のアプリで実際によく見るバグです。今日はこれを、「失敗しました」と正直に言える画面に直します。

try/catch——「失敗したら、こっち」

JavaScriptには、失敗に備える専用の構文があります。

try {
  // 失敗するかもしれない仕事
} catch (error) {
  // 失敗したときだけ、ここに飛んでくる
}

tryの中を上から実行し、どこかで失敗(エラー)が起きた瞬間、残りを飛ばしてcatchへジャンプします。失敗しなければcatchは素通り。「失敗するかもしれない仕事を、受け皿つきでやる」構文です。

もうひとつ、fetch特有の注意があります。fetchは、サーバーが「404 Not Found」を返しても失敗扱いになりません(「返事が来た」こと自体は成功なので)。404や500を失敗として扱うには、封筒のokという印を自分で確認します。

const response = await fetch(url);
if (!response.ok) {
  throw new Error("取得に失敗しました");
}

response.ok は「返事が正常(200番台)ならtrue」。throw は「ここでエラーを発生させろ」という命令で、発生したエラーはcatchが受け止めます。「okでなければthrow、throwはcatchへ」——この2行も定食の一部として覚えてください。

3状態パターン——完成形

エラーも「画面の状態」なので、stateにします。これで役者が3人そろいます。