データ取得失敗時のエラーハンドリング

例えばバックエンドで何らかのエラーがでてデータが取得できない場合、現状のコードだとデータが表示されず、エラーの原因がわかりません。そのため、データ取得部分にてエラーハンドリンを行いましょう。

先ほどaxios.getにてpromise型が返却され、処理が終わったら、.thenにて処理結果を取得できると説明しましたが、正確には処理が成功した場合の処理を受け取ることができます。失敗した場合に関しては、.catchとすることで、失敗した場合の処理結果を取得することができます。では、失敗した場合の返却値をコンソールにて確認してみましょう。

一旦存在しないURLに置き換えてエラーを起こしてみましょう。

PostList.tsx◎

...
  useEffect(() => {
    axios
      .get<Post[]>("https://invalid")
      .then((res) => {
        setPostList(res.data);
      })
      .catch((e) => {
        console.log(e);
      });
  }, [userId]);
...

そうすると、catch内の処理がはしり処理結果がコンソールに出力されます。

確認するとAxiosError型のオブジェクトが確認できます。

では、エラーが発生した際にmessageをerrorMessageというstateで管理して、画面上に表示するようにしましょう。表示部分はbootstrapのアラートを使用します。

アラートgetbootstrap

PostList.tsx◎

...
  const [userId, setUserId] = useState(1);
  const [errorMessage, setErrorMessage] = useState("");
...
  useEffect(() => {
    axios
      .get<Post[]>("https://invalid")
      .then((res) => {
        console.log(res);
        setPostList(res.data);
      })
      .catch((e) => {
        setErrorMessage(e.message);
      });
  }, [userId]);
...
      {errorMessage !== "" && (
        <div className="alert alert-danger" role="alert">
          {errorMessage}
        </div>
      )}
      <table className="table">
...

上記にて以下のように表示が確認できるかと思います。

確認できたら、URLの方を元に戻しましょう。

PostList.tsx◎

...
  useEffect(() => {
    axios
      .get<Post[]>("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        setPostList(res.data);
      })
...