# データ取得失敗時のエラーハンドリング例えばバックエンドで何らかのエラーがでてデータが取得できない場合、現状のコードだとデータが表示されず、エラーの原因がわかりません。そのため、データ取得部分にてエラーハンドリンを行いましょう。先ほど`axios.get`にて`promise`型が返却され、処理が終わったら、`.then`にて処理結果を取得できると説明しましたが、**正確には処理が成功した場合の処理を受け取ることができます。**失敗した場合に関しては、`.catch`とすることで、失敗した場合の処理結果を取得することができます。では、失敗した場合の返却値をコンソールにて確認してみましょう。一旦存在しないURLに置き換えてエラーを起こしてみましょう。

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

そうすると、`catch`内の処理がはしり処理結果がコンソールに出力されます。確認すると`AxiosError`型のオブジェクトが確認できます。

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

...
  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の方を元に戻しましょう。

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