SWR でエラーを受け取るまでの流れ

useSWR は以下のようなインターフェースになっています。

const { data, error } = useSWR('key', fetcher);

error オブジェクトには fetcher 内で発生した例外によって投げられたエラーオブジェクトが格納されるため、その振る舞いは fetcher の実装次第で変わってきます。

// 正しく error を受け取れない実装
import axios, { isAxiosError } from 'axios';

const fetcher = async (url: string) => {
  try {
    const response = await axios.get(url);

    return response.data;

  } catch (error) {
      if (isAxiosError(error)) {
        console.error(error);
      // ^^^^^ 例外を握り潰しているため、SWR がエラーの発生を検知できない。
      // error オブジェクトは undefined のままになってしまう。
      }
  }
}

Axios や Fetch API は 200 番台以外の HTTP レスポンスを受け取ると例外を投げます。そのため変に try-catch などで例外処理をしてしまうと、エラーオブジェクトの伝播を止めてしまいかねません。例外は素通りさせることで、SWR を通じて React コンポーネントまでエラーの発生を伝えることができます。

TypeScript を使用している場合は、useSWR にエラーオブジェクトの型引数を渡しておくとよいと思います。上記のようなエラーオブジェクトを返す余地のないコードが、コンパイルエラーとして検知されるようになります。

const { data, error } = useSWR<ResponseDataType, Error>(
  'key',
  fetcher,
);

参考

API – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.app
Handling Errors | Axios Docsaxios-http.com