RESAS APIがエラーで返ってきたときに、HTTPErrorでキャッチをすり抜ける問題

h-yoshikawa44 commented 2 years ago

期待する動作

RESAS API がエラーを返した時、「〇〇データ取得に失敗しました。お手数ですが、お時間経過後に再度お試しください。」とのエラーメッセージが表示される。

不具合内容

RESAS API がエラーを返した時、「想定しない人口遷移データが取得されました。」とのエラーメッセージが表示される。

再現方法

RESAS API のリクエスト URL をわざと違うものにして、リクエストを動作させる

h-yoshikawa44 commented 2 years ago

原因

RESAS API では、エラー時（400、403、404 のみ）にもヘッダーとしてはステータスコード200を返してしまうため。レスポンス内容に含まれるステータスコードの方で、本来のステータスコードが入るような構造になっている。

そのため、ky が HTTPError をスローせず、型ガードの部分で Error をスロー → Error をキャッチされることで、このような状態になってしまっているようである。

人口構成 API リクエストのラッパーのカスタムフックの catch ブロックを抜粋

.catch((err) => {
  if (err instanceof HTTPError) {
    setErrorMessage(
      `${prefName}の人口遷移データの取得に失敗しました。お手数ですが、お時間経過後に再度お試しください。`
    );
  } else if (err instanceof Error) {
    setErrorMessage('想定しない人口遷移データが取得されました。');
  } else {
    console.error(err);
  }
  setIsLoading(false);
});

↓

ky の afterResponse で、レスポンスボディからステータスコードを取り出し、設定しなおす処理を追加して対応。

h-yoshikawa44 commented 2 years ago

細かな追加対応

API ルート削除
再エクスポート用 index.ts のインポート元 URL を相対パスに修正
ページ初回読み込み時に、都道府県ブロックが一瞬ちらつく問題修正

h-yoshikawa44 / resas-graph-app