Catching error

[greynguyen]

How can I catch the error of useSwr so that it doesn't throw it to the console?

I've tried nesting useSwr inside a try and catch and it doesn't work. The code I am using is below:

  var profileSwr = useSWR(getProfileKey(), fetcher);
  const profileSwrData = profileSwr.data;
  const profileSwrMutate = profileSwr.mutate;
  const profileSwrError = profileSwr.error;

[huozhi]

@duongdangng can you share more about your example or a minimal repro on codesanbox showing where the errors thrown from?

[greynguyen]

@huozhi Yup I have something like this in my code:

const User = ({ user, username }: UserProps) => {
     const getProfileKey = () => {
         if (!username) {
            return null;
         }
       return `/api/profile/${username}`;
     };
    
    const fetcher = async (url: RequestInfo) => {
        const res = await fetch(url);
        if (!res.ok) {
            return;
        }
    return res.json();
    };

    const profileSwr = useSWR(getProfileKey(), fetcher);
    const profileSwrData = profileSwr.data;
    const profileSwrMutate = profileSwr.mutate;
    
    return (
        ....
    )
}

As you can see, if the username is a username that doesn't exist, our endpoint will return a 404 error, in which case, the error will be thrown directly in the browser console. I want to be able to catch that error so that I can handle it, instead of showing it to the user. Any help is appreciated!

[huozhi]

One way is to use onError(err, key, config) callback option to receive when error occurs, ref.
Another idea is to catch it in your fetcher since it's network failures.