How can I handle errors in SWR with TypeScript?

How can I handle errors in SWR with TypeScript?

You can handle errors in SWR by using the onError callback in your fetcher function. Would you like an example?

Yes, please provide an example of that.

Sure! Here's a simple example:

import useSWR from 'swr';

const fetcher = async (url: string) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

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

if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Loading...</div>;
return <div>{JSON.stringify(data)}</div>;

This will display an error message if the fetch fails.

What if I want to log the error to an external service?

You can log the error in the onError callback. For example:

const fetcher = async (url: string) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    logErrorToService(error); // Your logging function
    throw error;
  }
};

This way, you can handle the error and log it simultaneously.