swr: Error Catching not working with suspense true

useSWR catching errors is not working when adding to the options suspense true

The code will never enter the if the statement of the error and the website will carshes and If we remove the suspense true everything will work fine

 const fetcher = url => Axios.get(url, authHeader()).then(res => res.data);
    const url = `${apiUrl}/info/5`;
    const { data, error, isValidating } = useSWR(url, fetcher, , { suspense: true });
    if (error) {
console.log('error');
    }

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15

Most upvoted comments

👍 BTW, vercel/swr enables GitHub Discussions, so I think it’s the best place to post a question like this😄 https://github.com/vercel/swr/discussions

koba04 on Jan 11, 2021

@AmmarMohamadIsmaeel You can handle errors differently on each component by creating each ErrorBoundary or passing different props to a single ErrorBoundary.

<ErrorBoundaryA>
  <PageA />
</ErrorBoundaryA>

<ErrorBoundaryB>
  <PageB />
</ErrorBoundaryB>

<ErrorBoundary errorType="a">
  <PageA />
</ErrorBoundary>

<ErrorBoundary errorType="b">
  <PageB />
</ErrorBoundary>

Does it make sense?

koba04 on Jan 11, 2021

@AmmarMohamadIsmaeel As the document describes, you have to use an error boundary instead of the error property.

But if an error occurred, you need to use an error boundary to catch it

https://swr.vercel.app/docs/suspense

koba04 on Jan 10, 2021